共计 1453 个字符，预计需要花费 4 分钟才能阅读完成。
不论是什么样的前端面试，总会问到的一个问题：前端性能优化。
置信如果这个问题没有答好，在面试中会很被动。
于是，趁着这个天天宅的期间，好好的整顿了一番。
Start~
一、HTML 优化
渲染程序
- 1、CSS 样式表置于头部，CSS 会一边加载一边渲染
- 2、JS 脚本置于尾部，JS 在未加载实现之前，会阻塞渲染
- 3、应用内部的样式表和脚本，优先加载出 HTML 构造
- 4、要害 JS、CSS 代码能够内嵌在 HTML 中，比方：rem 动静等
- 5、防止应用 iFrame
- 6、应用骨架屏
二、CSS 优化
加载优化
- 1、防止应用 css 的 @import
- 2、防止应用通配符
- 3、防止应用!impotant
- 4、优化 css reset，我的项目中不会用到这么多 reset
- 5、防止应用 css 表达式
动画优化
- 1、能够应用 transform 开启图形减速
- 2、用 translate 取代 left，能够防止页面重排
选择器优化
- 1、选择器嵌套尽量不要超过三层
- 2、id 选择器尽量不要嵌套
- 3、应用继承
体积优化
- 1、提取公共 CSS
三、JS 优化
运行速度
- 1、如果没有兼容问题，尽量应用原生办法
- 2、依据兼容浏览器的最低版本，思考是否应用 polyfill
- 3、switch 语句绝对 if，能够较快通过将 case 语句依照最可能到最不可能的程序进行组织
- 4、位运算较快。当进行数字运算时，位运算操作要比任何布尔运算或者算数运算快
- 5、巧用 || 和 && 布尔运算符，能够缩小执行代码语句
- 6、应用加号拼接是最快的，其次是 String()、.toString()、new String()
- 7、须要应用定时器时，用 setTimeout 取代 setInterval，setInterval 会始终占用内存
- 8、制作 JS 动画时，应用 requestAnimationFrame 取代 setTimeout 和 setInterval
变量优化
- 1、防止全局查找，能够将须要拜访的属性用变量保留
- 2、应用变量比应用对象属性和数组元素要快
- 3、对于蕴含大量数据而不须要操作的对象，能够应用 Object.freeze 解冻对象，放慢运行速度
缩小无用操作
- 1、应用节流、防抖
- 2、应用事件委托取代大量事件的绑定
- 3、若须要对 DOM 进行大量操作，能够应用 Fragment 缩小操作次数
缩小未应用代码
- 1、进行 tree-shaking，删减未应用的代码
算法优化
- 1、增加 key 值，最大效益的应用虚构 DOM，缩小 Diff 工夫
- 2、应用 benchmark 测试不同算法的性能，择优
四、网络优化
申请数量下限：
- 1、每个网站最多容许同时 6 个申请，能够思考将资源分类部署
申请速度优化：
- 1、应用 CDN，能够减速资源的申请速度
加载工夫调配：
- 1、外围资源预加载
- 2、大体积资源按需加载（Webpack 拆包）
缩小加载体积
- 1、压缩图片
- 2、压缩 HTML、CSS、JS 代码
- 3、开启网络压缩，如：GZIP
缩小加载次数
- 1、制作精灵图
- 2、将小图片转换为 base64 字符串
- 3、应用浏览器缓存
- 4、应用前端缓存，如: LocalStorage、Cookie、SessionStorage 等
- 5、缩小重定向申请，比方：nginx 反向代理的重定向
- 6、防止应用服务端字体
五、React 性能优化
1、优化 react 事件，防止应用闭包函数
2、应用继续化数据结构 Immutable 对 redux 进行治理
3、优化 shuoldComponentUpdate 生命周期定义根底组件 BaseComponent 取代 React.Component
4、应用纯组件 PureComponent
5、增加 Key 值
注：以上总结的可能不残缺，能够在评论区补充，我后续补充上，谢谢~
正文完