前端性能优化是怎么回事？

前端性能优化

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

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

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

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

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

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

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

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

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