前端性能优化是怎么回事

前端性能优化

话说回来，使用 HTML、CSS、JS 开发网站，谁会把我们写好的代码拿去运行呢？是浏览器呀。

那么性能优化是怎么回事呢？

优化谁的性能？如果我们没有开发网站，那么什么也不需要优化，但开发了，就要优化了。现在不考虑后端，只考虑前端性能优化。

难道压缩图片资源、压缩代码量，好让用户快速访问。写的 HTML 需要优化？写的 CSS 代码需要优化？写的 JavaScript 代码需要优化？

如果在浏览器内的性能优化，我想到的就是我们所写的代码。浏览器解析 HTML，变成 DOM 对象。浏览器解析 CSS, 变成 CSSOM。浏览器解析 JavaScript，执行我们写过的代码，然后去操作 DOM 更改标签呢的数据，然后去操作 DOM 对应的样式，去更改每个 DOM 节点对应的样式。

浏览器是如何渲染网页的？

当浏览器接受到一个网页时，它会如何解析呢？如何去识别谁是 <script> 标签、谁是 <style> 标签识别这些标签，各自做了什么事？

浏览器渲染一个网页，大概有五个步骤。

第一步：HTML 转成 DOM 结构
第二步：CSS 转成 CSSOM 结构
第三步：DOM 和 CSSOM 结合，生成一颗渲染树（包含每个节点的视觉信息）
第四步：生成布局（layout），即将所有渲染树的所有节点进行平面整合
第五步：讲布局绘制在屏幕上