前端优化汇总

晴天wawa
103 阅读4分钟

一、网络传输层面优化

  1. CDN：内容分发网络

    优化方向：首屏加载速度（FCP）

    优化原因：提供资源的服务器距离用户更近，延迟更低。源服务器资源分配给CDN减少了负载

    CDN原理：（引用文章）

    CDN使用场景：

    • 开源的项目可以用第三方CDN服务
    • 可以将自己网站的静态资源放在CDN上，如js，css，图片等
    • 直播传送：CDN支持流媒体，采用主动推送的方式进行

  2. http强缓存，协商缓存

  3. gzip压缩，减少传输带宽

二、代码逻辑层面，开发时的优化

  1. 编写JS监听浏览器可视区域，动态加载某些数据

    优化方向：首屏加载速度（FCP）

    优化原因：滚动屏幕之前，可视化区域之外的数据不会加载。减少服务器压力，也减少浏览器负担。防止加载过 多暂时用不到的数据影响其他资源文件加载

    懒加载的应用和实现：

    • 图片懒加载：对src赋值图片才开始加载，当图片出现在浏览器可视区域后，拿到图片dom将提前存好地址赋值给src即可。也可以将路径放在data-*属性上（HTML5特性更优雅），然后赋值给src
    • 虚拟列表：（1000+长度）监听浏览器可视区域，计算出列表中应该渲染的起始下标和结束下标，css用绝对定位的方式实现每个item的渲染

计算可视区域的关键变量：scrollTop是内容被隐藏的像素数，也就是滚动条滚动的高度，offsetTop相对其offsetParent的顶部内边距的像素，window.innerHeight浏览器视口高度

插曲：预加载

优化原因：和懒加载相反，将所需的资源提前加载到本地，后面在需要用到时候直接从缓存取资源。减少用户等待时间。 2. 防抖节流

优化方向：提高js执行效率，防止一些操作触发过于频繁
优化原因：结合定时器和闭包，在每次事件触发时判断要不要执行业务逻辑

防抖场景：
- 按钮提交，只执行最后一次
- 服务端验证，执行一段连续输入的最后一次（配合联想词搜索功能食用更佳）

节流场景：
- 拖拽场景：一段时间只执行一次，防止频繁触发导致卡顿
- 缩放场景：对浏览器size的监控场景
- 动画场景：一段时间执行一次动画

3. 复杂计算开启web worker多线程计算 4. 使用事件委托

vue框架的优化

  1. v-for + key
  2. 路由懒加载
  3. 第三方插件按需引入
  4. 使用computed和watch缓存结果
  5. 组件卸载

react框架的优化

  1. map + key
  2. 路由懒加载
  3. 第三方插件按需引入
  4. 用useCallback，useMemo，memo缓存组件和函数

三、浏览器渲染层面优化

  1. 尽量避免回流

    优化方向：提高页面加载速度，减少js执行时间，提高页面渲染速度 优化原因：回流（重排）会导致对渲染树的一部分重新布局，性能开销大。重绘不影响在文档流的位置，只针对 元素进行重新绘制。

    导致回流的变化场景：浏览器窗口，元素内容，元素尺寸、位置，字体大小，激活CSS伪类，添加删除DOM

    优化实践：

    • 更改元素样式不要一行一行的改dom，写在新class中，给元素添加class统一更改，将多次回流变为一次
    • 将元素先设为display：none改完样式后再显现出来
    • DOM多个读写操纵不要穿插，详情了解浏览器渲染队列机制（链接）
    • 用定位脱离文档流，减少回流面积

四、图片优化

直接上结论~

  1. 能用CSS代替就不用图片
  2. 小图用base64编码，不用引入外部资源依赖少发一次请求（用Webpack构建工具配置使用）
  3. 将多个图标整合到一个图片中（雪碧图）
  4. 选择图片格式：浏览器Webp，小图png，照片jpeg

五、打包构建时的优化

  1. Loader

    优化Babel：Babel将代码生成AST，然后再生成新的代码，转换代码越多效率越低

    Webpack配置优化搜索范围： 优化方向：打包速度 优化原因：减少没必要的文件编译

rules:[
    {
        test: /\.js$/,
        loader: 'babel-loader',
        // 只在src下查找
        include: [resolve('src')],
        // 忽略的路径
        exclude: /node_modules/
    }
]

还可以配置缓存将babel编译过的文件缓存起来

  1. Plugins

    HappyPack：将Loader同步执行转换为并行

    优化方向：打包速度 优化原因：将单线程打包转换为多线程打包，充分利用系统资源，适合大项目优化

loader: [{
    ……
    loader: 'happypack/loader?id=happyBabel'
}]

plugins： [
    new HappyPack({
        id: 'happyBabel',
        loaders: ['babel-loader?cacheDirectory'],
        // 开启4个进程
        threads: 4
    })
]

  1. 代码压缩

  2. Tree Shaking

  3. Code Splitting

持续创作中……

avatar
文章
阅读
粉丝