浏览器兼容的处理

兼容性能优化:

  1. 减少请求数量 a. 把前端的公共库合并 b. 不同页面单独合并 c. 对于图片,使用雪碧图,base64编码图片,使用字体图标 d. 减少重定向 e. 使用缓存 f. 避免使用空的 href 和 src

  2. 减小资源大小 a. 对前端资源进行压缩 b. 使用wep格式图片 c. 开启gzip

  3. 优化网络连接 a. 使用cdn网络(内容分发网络(Content Delivery Network,简称CDN)是建立并覆盖在承载网之上,由分布在不同区域的边缘节点服务器群组成的分布式网络。)CDN应用广泛,支持多种行业、多种场景内容加速,例如:图片小文件、大文件下载、视音频点播、直播流媒体、全站加速、安全加速

    1. 当终端用户(北京)向www.a.com下的指定资源发起请求时,首先向LDNS(本地DNS)发起域名解析 请求。

    2. LDNS检查缓存中是否有www.a.com的IP地址记录。如果有,则直接返回给终端用户;如果没有,则向授权DNS查询。

    3. 当授权DNS解析www.a.com时,返回域名CNAME www.a.tbcdn.com对应IP地址。

    4. 域名解析请求发送至阿里云DNS调度系统,并为请求分配最佳节点IP地址。

    5. LDNS获取DNS返回的解析IP地址。

    6. 用户获取解析IP地址。

    7. 用户向获取的IP地址发起对该资源的访问请求。

  • 如果该IP地址对应的节点已缓存该资源,则会将数据直接返回给用户,例如,图中步骤7和8,请求结束。

  • 如果该IP地址对应的节点未缓存该资源,则节点向源站发起对该资源的请求。获取资源后,结合用户自定义配置的缓存策略,将资源缓存至节点,例如,图中的北京节点,并返回给用户,请求结束。

  • CDN(1)CDN的加速资源是跟域名绑定的。 (2)通过域名访问资源,首先是通过DNS分查找离用户最近的CDN节点(边缘服务器)的IP (3)通过IP访问实际资源时,如果CDN上并没有缓存资源,则会到源站请求资源,并缓存到CDN节点上,这样,用户下一次访问时,该CDN节点就会有对应资源的缓存了。 b. 并行连接 持久连接 管道化连接

  1. 优化资源加载

a. 资源加载位置,css引用在head中,先外链后本页,js引用在body底部,先外链后本页

b. 资源加载时机,异步加载,设置script的defer和async属性,模块化的话使用按需加载

c. 使用资源预加载和资源懒加载

  1. 减少重绘和回流

    a. 缓存DOM

    b. 减少DOM深度和数量

    c. 批量操作dom和css样式

    d. 使用事件代理

    e. 使用防抖和节流

  2. 使用性能更好的API

    a. 用对css选择器

    b. 使用requestAnimationFrame代替setTimeout和setInterval

    c. 使用IntersectionObserver实现图片懒加载(是一个交叉观察器)

    d. 使用web worker

  3. webpack优化

a. 打包公共代码 b. 动态导入和按需加载 c. 剔除无用代码

原文链接:https://www.cnblogs.com/sunsunshine/p/14191401.html

原创文章,作者:优速盾-小U,如若转载,请注明出处:https://www.cdnb.net/bbs/archives/17904

(0)
上一篇 2022年11月17日
下一篇 2022年11月17日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

优速盾注册领取大礼包www.cdnb.net
/sitemap.xml