无论什么样的前端面试，总会问到一个问题：前端性能优化。相信如果这个问题没有回答好，你在面试中会很被动。于是，趁着每天宅在家里的这段时间，好好收拾了一下。开始~一、HTML优化渲染顺序1、将CSS样式表放在头部，CSS会边加载边渲染。2.把JS脚本放在最后。在JS加载之前，它会阻塞渲染。Scripts，先加载出HTML结构4.关键的JS和CSS代码可以嵌入到HTML中，比如：remdynamics等。避免使用通配符3.避免使用!impotant4。优化cssreset，项目中不会用到这么多reset5。避免使用css表达式动画优化1。使用转换启用图形加速2。使用translate代替left避免页面重载行选择器优化1.尽量不要嵌套超过三层的选择器2.尽量不要嵌套id选择器3.使用继承量优化1.提取公共CSS3.JS优化运行速度1.如果没有兼容性问题，尝试使用Native方法2.根据兼容浏览器的最低版本，考虑是否使用polyfill3。与if相比，switch语句可以通过将case语句按从最可能到最不可能的顺序组织来更快。4.位运算速度更快。在执行数字运算时，位运算比任何布尔运算或算术运算都快。5.巧妙使用||&&布尔运算符可以减少代码语句的执行。6、使用加号拼接是最快的，其次是String()、.toString()、newString()7、需要使用定时器时，使用setTimeout而不是setInterval。setInterval会一直占用内存。8.制作JS动画时，使用requestAnimationFrame代替setTimeout和setInterval变量。您可以保存需要使用变量访问的属性。2.使用变量比使用对象属性和数组元素更快。3、对于包含大量数据且不需要操作的对象，可以使用Object.freeze将对象冻结，以加快操作速度，减少无用操作。1.使用节流防抖2.使用事件委托替代大量事件的绑定3.如果需要对DOM进行大量操作，可以使用Fragment减少操作次数，减少未使用code1.执行tree-shaking删除不用的代码算法优化1.增加key值，最大化利用virtualDOM，减少Diff时间2.使用benchmarks测试不同算法的性能，选出最好的4.上限网络优化请求：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.避免使用服务端字体5.React性能优化1.优化React事件，避免使用闭包函数2.使用continuous3.优化shuoldComponentUpdate的生命周期，定义基础组件BaseComponent替代React.Component4。使用纯组件PureComponent5。添加Key值注意：以上总结可能不完整，大家可以在评论区补充，我稍后补充，谢谢~
