有关前端优化的面试题

js优化

• 遵循严格模式：“use strict”；
• 将js脚本放在页面底部，加快渲染页面；
• 将js脚本成组打包，减少请求；
• 使用非阻塞方式下载js脚本；
• 尽量使用局部变量来保存全局变量；
• 尽量减少使用闭包；
• 最小化重绘（repaint）和回流（reflow）；

如何最小化重绘和回流

• 需要对元素进行复杂操作时，可以先隐藏（display: none;），操作完成后再显示。
• 需要创建多个DOM节点时，使用DocumentFragment创建后一次性加入document。
• 尽量使用css属性简写，如：用border代替border-width、border-style、border-color；用elem.className和elem.style.cssText代替elem.style.xxx。

如果需要手动写动画，你认为最小时间间隔是多久？

16.7ms。多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔：1s/60*1000=16.7ms。

CSS优化

• 多个css合并，尽量减少HTTP请求。
• 将css文件放在页面最上面。
• 移除空的css规则。
• 选择器优化嵌套，尽量避免层级过深。
• 充分利用css继承属性，减少代码量。
• 属性值为0时，不加单位。
• 属性值为小于1的小数时，省略小数点前面的0。
• 使用css雪碧图。

前端性能优化

• 尽可能减少HTTP请求数。
• 使用CDN（Content Delivery Network）。
• 添加Expires头（或者 Cache-control）。
• Gzip组件。
• 将css样式放在页面上方。
• 将脚本移动到底部（包括内联的）。
• 避免使用css中的Expressions。
• 将JavaScript和css独立成外部文件。
• 减少DNS查询。
• 压缩JavaScript和css（包括内联的）。
• 避免重定向。
• 移除重复的脚本。
• 配置实体标签（ETags）。
• 使用AJAX缓存。

如何使用webpack来优化前端性能？

• 压缩代码，删除多余代码、注释、简化代码的写法等等方式。
• 利用CDN加速。在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。
• 删除死代码。将代码中永远不会走到的片段删除掉。
• 优化图片，对于小图可以使用base64的方式写入文件中。
• 按照路由拆分代码，实现按需加载，提取公共代码。
• 给打包出来的文件名添加哈希，实现浏览器缓存文件。