前端性能优化策略

一、硬件服务

CDN分发,gzip||Brotli压缩,大小图,缓存,CDN-combo文件组合,多个域名并发请求(分域存放)

二、项目构建

  • wenpack
  1. 大文件切割抽取公共代码
  2. 功能或业务为单元代码
  3. 相应依赖和公共资源可以放到CDN
  4. babel按需引入工具库与UI库

三、页面上

网络加载类

  1. 减少 HTTP 资源请求次数
    • CSS/JS combo,CSS sprite

  合并静态资源图片、JavaScript 或 CSS 代码,减少页面请求数和资源请求消耗

  避免重复的资源,防止增加多余请求

  1. 减小 HTTP 请求大小
    • CSS/JS/Images压缩

  减少没必要的图片、JavaScript、CSS 及 HTML 代码

  对文件进行压缩优化

  1. 异步的优先级,是否需要同时请求多个,需要分段请求

  2. 异步的重复请求和异步缓存cache

  3. 一些只获取的异步,可以用GET

    使用 XMLHttpRequest 时,浏览器中的 POST 方法发送请求首先发送文件头,然后发送 HTTP 正文数据,而使用 GET 时只发送头部,所以在拉取服务端数据时使用 GET 请求效率更高

  4. 资源预加载

  5. 减少页面重定向

  6. 图片懒加载,路由懒加载

  7. 分页加载

  8. 页面非首次渲染时的组件启用懒加载或预加载

  9. mate

    //为 HTMl 内容设置 CaChe-Control 或 Expires 可以将 HTML 内容缓存起来,避免频繁向服务器端发送请求。
    <meta http-equiv="Cache-Control" content="max-age=7200" />
    <meta http-equiv="Expires" content="Mon, 20 Jul 2016 23:00:00 GMT" />
    //合理设置 Etag 和 Last-Modified 使用浏览器缓存,对于未修改的文件,静态资源服务器会向浏览器端返回304,让浏览器从缓存中读取文件,减少 Web 资源下载的带宽消耗并降低服务器负载
    <meta http-equiv="Cache-Control" content="max-age=7200" />
    <meta http-equiv="Expires" content="Mon, 20 Jul 2016 23:00:00 GMT" />
    
  10. 其他

    • 将 CSS 或 JavaScript 放到外部文件中,避免使用标签直接引入

    • 避免页面中空的 href 和 src - 阻塞了页面中其他资源的下载进程

    • 对js||css文件进行合理拆分或延后加载,保证关键路径的资源能快速加载完成

页面渲染类

  1. 开发规范,减少代码混入和冗余

  2. CSS 资源引用放到 HTML 文档顶部,浏览器可以优先下载 CSS 并尽早完成页面渲染

  3. 脚本文件可以放在HTML文档底部后面

    • 防止 JavaScript 的加载和解析执行对页面渲染造成阻塞

    • 除非被标记为异步或者通过其他的异步方式加载

      <script src="main.js" defer></script>
      <script src="main.js" async></script>
      
  4. 生产环境下避免使用 CSS import 引用加载 CSS

  5. 减少处理循环步骤,避免运行耗时的 JavaScript

  6. 减少 DOM 元素数量和深度

  7. 尽量减少在 HTML 中直接缩放图片(动画卡顿)

  8. 避免使用 CSS 表达式或 CSS 滤镜

  9. 生成css雪碧图,更新background-position属性值

  10. 小图片一键生成base64编码

  11. 尽量避免使用 table,iframe 等慢元素

前端灾备策略

灾备是为了保持线上业务在极端很差网络环境下的高可用性,具体做法如下:

  • 本地缓存:异步接口数据优先使用本地localStorage中的缓存数据
  • 二次请求:接口数据本地无localStorage缓存数据,重新再次发出ajax请求
  • 双层接口:部分接口和域名会上线至CDN,业务调用时优先使用CDN接口,如果一定时间内未请求到数据,会用源站接口再次请求
  • 垫底数据:源站接口万一无法访问,使用预设好的垫底备份数据
  • 接口下线:必要时候,下线非核心业务接口和非核心功能
posted @ 2020-05-21 15:31  千年轮回  阅读(306)  评论(0编辑  收藏  举报