HTML页面渲染及优化详解

页面渲染主要经过过程，具体介绍如下：

字节 → 字符 → 令牌 → 节点 → 对象模型

CSS树的生成和DOM树的生成基本是相同，如下

为什么会有CSS树

因为CSS关系也会有父子关系，就是css中常说的继承，一些样式如font-size等子元素会继承父级，所以会生成一套对应的CSS树和DOM树相对应。

通过上面的页面渲染介绍，很容易理解，重排就是重新布局页面结构，计算节点位置，而重绘就是绘制页面，只是一些样式如背景，颜色的变化等，不需要重新计算位置布局，所以 重排一定会导致重绘，但是重绘不一定导致重排。

导致页面重排主要有以下几点

上文中触发了四次重排，通过上文介绍，offsetTop，scrollTop，clientTop等属性的修改会触发重排，当浏览器获取DOM样式的时候立刻会执行一次重排，因为需要计算浏览器位置坐标，不会再继续观察下文是否还有DOM的 *** 作，下文介绍浏览器渲染机制。

这种情况看似会触发四次重排，实际只会触发一次重排，现代浏览器基本都有渲染机制，浏览器会批量将样式修改一次性执行，批量修改完后再批量获取DOM位置，实际只触发一次。

等价于

通过上文，容易理解这种情况会触发两次重排，可以使用缓存（实际是分离读写）来优化。

这种情况会触发五次重排

避免设置大量的style属性，因为通过设置style属性改变结点样式的话，每一次设置都会触发一次reflow，所以最好是使用class属性实现元素的动画，设置position属性，最好是设为absoulte或fixed，脱离文档流，这样不会影响其他元素的布局。

事件委托原理：利用事件冒泡的特性，子元素都会冒泡到父元素上，当子元素如（li）元素都绑定事件时，可以只需绑定父元素（ul）来达到相同的效果，这样不仅减少了对dom的 *** 作，减少重排或重绘，而且不用分配大量变量来保存dom，减少了内存。

委托

不要使用table布局，因为table中某个元素一旦触发了reflow，那么整个table的元素都会触发reflow。那么在不得已使用table的场合，可以设置table-layout:auto或者是table-layout:fixed这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。

不要一个个修改属性，应通过一个class来修改

改为

参考文献

https://blog.csdn.net/b954960630/article/details/82317999

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<script>标签，输入js代码：var a = '<input type="text" value="test" />'document.body.innerText = a。

3、浏览器运行index.html页面，此时html代码被当成字符串渲染到了页面上。

其实前后端渲染的选择，并没有太多关系到服务器的效率。而是多数网站需要权衡内容的可见性与功能性两者。

一、内容可见性

指的是让有效内容更容易被获取，因为多数网站是展现有效内容给用户，帮助公司或品牌产品得到更多的流量，这类网站涉及到SEO尤为重要，非常有必要为了让自己的内容更容易被索引且获得更好的排名而付出一些努力。因此此类网站不喜欢使用过多JS生成的内容，既所谓的前端渲染。因为这类页面不利于搜索引擎索引自己的页面，这样就很难通过有效内容从搜索引擎得到有效的引流。早期的网站，很多都是以呈现有效内容为主，很少用JS实现丰富的应用功能，因此比较多地关注关键字，内部链接，外部链接等等来提高网站的权值。以提供有效内容为主的网站，主要有静态，动态之分。静态以标准HTML为主，动态多由服务器根据请求生成SEO友好的内容。

两者对前端浏览来说没有太大的区别。主要是是服务器端的服务方式，如静态多以简单文件形式提供，动态诸如ASP，ASPX，CGI（不同的脚本），或者是高端语言的Web开发框架，实现是极其灵活丰富的。目的都是相同的，既提供更有效的内容给用户。至于效率，可以有多重优化方式，从来都不是开发上首要考虑到问题。

二、服务功能性

此类网站通常使用一个比较现代也比较高端的名称，既WebApp。其主要目的并非提供用户感兴趣的内容为主。网站更希望与用户可以有更多的交互，同过为用户提供一系列更为实用的应用功能，并从中获取反馈或回报。

这类网站的流行得益于多重技术都发展，首先是计算机处理速度有了更好的提升，CPU、GPU以及内存等不再是限制JS执行复杂功能的瓶颈；其次是以WebKit为内核的浏览器逐渐发展强大，并在Google的努力之下，Chromium得到了极大的发展，大大地推动了基于浏览器的WebApp的可用和可行性。一大批成功的基于浏览器的富应用被开发出来并取得巨大成功，使得JS比以往任何时候都更流行，让JS名副其实地成为Web Language。随后进一步发展的CSS3，HTML5，强化的JS组件，如WebSocket，Web Worker等等，让JS在浏览器端实现功能强大的富应用更得心应手。

总之，整个行业的发展使得网站不再是简单的靠内容提供而获取流量，提供有效的富应用功能可以让网站变得更加有价值。

---