前端性能优化
话说回来,使用 HTML、CSS、JS 开发网站,谁会把我们写好的代码拿去运行呢?是浏览器呀。
那么性能优化是怎么回事呢?
优化谁的性能?如果我们没有开发网站,那么什么也不需要优化,但开发了,就要优化了。现在不考虑后端,只考虑前端性能优化。
难道压缩图片资源、压缩代码量,好让用户快速访问。写的 HTML 需要优化?写的 CSS 代码需要优化?写的 JavaScript 代码需要优化?
如果在浏览器内的性能优化,我想到的就是我们所写的代码。浏览器解析 HTML,变成 DOM 对象。浏览器解析 CSS, 变成 CSSOM。浏览器解析 JavaScript,执行我们写过的代码,然后去操作 DOM 更改标签呢的数据,然后去操作 DOM 对应的样式,去更改每个 DOM 节点对应的样式。
浏览器是如何渲染网页的?
当浏览器接受到一个网页时,它会如何解析呢?如何去识别谁是 <script> 标签、谁是 <style> 标签识别这些标签,各自做了什么事?
浏览器渲染一个网页,大概有五个步骤。
第一步:HTML 转成 DOM 结构
第二步:CSS 转成 CSSOM 结构
第三步:DOM 和 CSSOM 结合,生成一颗渲染树(包含每个节点的视觉信息)
第四步:生成布局(layout),即将所有渲染树的所有节点进行平面整合
第五步:讲布局绘制在屏幕上