前端面试题之性能优化

1、网络相关

• DNS 预解析

复制代码

• 缓存（见上文浏览器缓存机制）
• 使用 HTTP / 2.0
• 预加载 —— 可以将一些不影响首屏但重要的文件延后加载，能够降低首屏加载的时间，缺点是兼容性不好

复制代码

• 预渲染 —— 将要下载的文件预先在后台渲染

复制代码

2、优化渲染过程

• 代码层面的优化（参考浏览器篇如何减少重绘和回流）
• 懒执行 —— 将某些逻辑放到使用时再进行，可以通过定时器或事件进行唤醒
• 懒加载 —— 将不关键的资源延后加载，如图片、视频资源等。

3、文件优化

图片优化：

• 可以用 css 模拟代替的尽量不要用图片
• 小图片用 base64 格式
• 雪碧图
• 选择正确的图片格式
  • 选择使用 WebP 格式，体积较小，缺点是兼容性不好
  • 小图使用 PNG ，图标类可以使用 SVG 代替
  • 照片使用 JPEG

其他文件优化：

• CSS 文件放在 head 中
• 服务端开启文件压缩功能
• 将 script 标签放在 body 底部，因为 JS 文件执行会阻塞渲染。
• script 文件异步加载
  • defer：在 script 标签上加上 defer 属性，defer 是在 HTML 解析完之后才会执行，如果是多个，按照加载的顺序依次执行
  • async：在 script 标签上加上 async 属性，async 是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关
• 对于需要很多时间计算的代码可以考虑使用 Webworker，Webworker 可以让我们另开一个线程执行脚本而不影响渲染。
• 使用CDN

4、其他

使用 Webpack 优化项目：

• 对于 Webpack4，打包项目使用 production 模式，这样会自动开启代码压缩
• 开启 tree shaking，移除没有用的代码
• 优化图片，对于小图可以使用 base64 的方式写入文件中
• 按照路由拆分代码，实现按需加载
• 给打包出来的文件名添加哈希，实现浏览器缓存文件

错误监控：

• 即时运行错误
  • try...catch
  • window.onerror
• 资源加载错误
  • object.onerror
  • 高级浏览器下的 performance.getEntries() 可以获取已经加载完成的资源进而监控加载失败的资源
• 跨域的 js 运行错误 —— 在 script 标签增加 crossorigin 属性，然后设置 js 资源响应头 Access-Control-Allow-Origin
• 打包时生成 sourceMap 文件便于 debug

错误上报：

• 采用 Ajax 通信的方式上报
• 通过 img 标签的 src 发起一个请求。

5、简述一下你对web性能优化的方案？

1、尽量减少 HTTP 请求
2、使用浏览器缓存
3、使用压缩组件
4、图片、JS的预载入
5、将脚本放在底部
6、将样式文件放在页面顶部
7、使用外部的JS和CSS
8、精简代码

6、你所知道的页面性能优化的方法有哪些

压缩、合并，减少请求，代码层析优化。。。

7、前端开发的优化问题

（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

（4） 当需要设置的样式很多时设置className而不是直接操作style。

（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

（7） 图片预加载，将样式表放在顶部，将脚本放在底部  加上时间戳。

（8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。