前端架构&软实力复习-性能优化

2021-06-30 05:48:562021-07-01 12:29:25

性能优化

网络层面

  1. 压缩代码，删除不必要的代码和注释以及空格，尽量做到最小化文件

  2. 合理的代码合并与分割，降低资源请求时间

  3. 合理使用缓存

  4. 静态资源存放cdn

渲染过程

优化dom结构

  • css文件放在head中，JavaScript文件放在body底部

    js的执行会阻碍render（两个不同的线程）

优化css

  • 减少重绘回流

    重绘会在设置节点样式时频繁出现，同时也会很大程度上影响性能，重绘是当节点需要更改外观而不会影响布局的时候发生，比如改变 color 就叫重绘 回流是布局或者几何属性需要改变就称为回流，回流必然会引起重绘，重绘不一定为引发回流

    1. 使用transform代替top
    2. 使用visibility代替display:none
    3. 直接改变className（把要修改的样式集中到一个class内统一修改）
    4. 避免使用table布局（尽量不要使用table布局。如果没有定宽，表格一列的宽度则由最宽的一列决定，那个很可能在最后一行的宽度超出之前的列宽，引起整体回流造成table可能需要多次计算才能确定- 好其在渲染树中节点的属性）

  • 扁平化css选择器，避免嵌套过深

    选择器嵌套不超过三级

优化JavaScript

  • 事件委托（慎用，存在兼容性），减少事件绑定

  • 合理更新dom

    1. dom离线操作

    2. 异步更新（包装成micro任务）

  • 减少重绘回流

    一些api会引起回流（getBoundingClientRect/getComputedStyle/clientTop/scrollTop/offsetTop），避免频繁使用

开发工具优化

使用一系列工具使得开发更加方便、高效

使用webpack打包代码

使用webpack打包代码

  • 版本号问题

    打包后资源文件名自动添加8位hash值

  • 代码压缩/混淆

    使用webpack插件压缩/混淆代码，减小文件体积

使用babel处理兼容性

可以使用es6+高级语法进行开发

使用eslint规范代码

参考：