前端面试之前端性能优化

一、页面加载及渲染过程优化

1.1 优化 DOM

• 删除不必要的代码和注释包括空格，尽量做到最小化文件。
• 利用 GZIP 压缩文件
• 结合 HTTP 缓存文件

1.2 优化 CSSOM

原因：

1. 因为renderTree是依赖于DomTree和CSSOM Tree，所以RenderTree必须等到cssTree构建完成才会开始渲染。
2. CSS虽然不会阻塞dom的解析，但是会阻塞dom的渲染。因此，CSSOM缩小、压缩以及缓存同样重要。
   优化
3. 减少关键css元素的数量，关注媒体查询，因为媒体查询影响了CRP的性能。

1.3 优化javascript

原因：

• 当浏览器遇到script标签时，会阻止解析器继续操作，直到cssom构建完毕，js才会继续运行并且继续完成dom构建过程。
  优化

1. 当我们在script标签种加入async标签，async 允许脚本在文档解析时位于后台运行（两者下载的过程不会阻塞 DOM，但执行会）。
2. 当我们在script标签种加入defer标签，脚本会等待文档解析完后再执行。
3. 如果脚本不会修改dom或者css，推荐使用async.
4. 预加载preload& prefetch 和dns预解析(dns-prefetch)