html网页渲染的基本过程
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">基本过程</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1．解析HTML文件，创建DOM树</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2．解析CSS,形成CSS对象模型</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3．将CSS与DOM合并，构建渲染树（renderingtree）</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4．布局和绘制</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">对渲染树上的<span style="color: black;">每一个</span>元素，计算它的坐标，<span style="color: black;">叫作</span>之为布局。浏览器采用一种流<span style="color: black;">办法</span>，布局一个元素只需<span style="color: black;">经过</span>一次，<span style="color: black;">然则</span>表格元素<span style="color: black;">必须</span><span style="color: black;">经过</span>多次。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">最后，渲染树上的元素最终展示在浏览器里，这一过程<span style="color: black;">叫作</span>为“painting”。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当用户与网页交互，<span style="color: black;">或</span>脚本程序改动修改网页时，前文<span style="color: black;">说到</span>的<span style="color: black;">有些</span>操作将会重复执行，<span style="color: black;">由于</span>网页的内在结构<span style="color: black;">已然</span><span style="color: black;">出现</span>了改变。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Repaint(重绘)</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">重绘是改变不影响元素在网页中的位置的元素样式时，譬如bac<span style="color: black;">公斤</span>round-color(背景色)， border-color(边框色)， visibility(可见性)，浏览器会<span style="color: black;">按照</span>元素的新属性重新绘制一次(这<span style="color: black;">便是</span>重绘，<span style="color: black;">或</span>说重新构造样式)，使元素呈现新的外观。重绘不会带来重新布局，<span style="color: black;">因此</span>并不<span style="color: black;">必定</span><span style="color: black;">伴同</span>重排。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Reflow（重排）</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">渲染对象在创建完成并添加到渲染树时，并不<span style="color: black;">包括</span>位置和<span style="color: black;">体积</span>信息。计算这些值的过程<span style="color: black;">叫作</span>为布局或重排。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当改变影响到文本内容或结构，<span style="color: black;">或</span>元素位置时，重排<span style="color: black;">或</span>说重新布局就会<span style="color: black;">出现</span>。这些改变<span style="color: black;">一般</span>由以下事件触发：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> DOM操作（元素添加、删除、修改<span style="color: black;">或</span>元素<span style="color: black;">次序</span>的改变）；</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 内容变化，<span style="color: black;">包含</span>表单域内的文本改变；</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> CSS属性的计算或改变；</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 添加或删除样式表；</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 更改“类”的属性；</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 浏览器窗口的操作（缩放，滚动）；</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">伪类激活（悬停）。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">"重绘"不<span style="color: black;">必定</span><span style="color: black;">必须</span>"重排"，<span style="color: black;">例如</span>改变某个网页元素的颜色，就只会触发"重绘"，不会触发"重排"，<span style="color: black;">由于</span>布局<span style="color: black;">无</span>改变。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">然则</span>，"重排"必然<span style="color: black;">引起</span>"重绘"，<span style="color: black;">例如</span>改变一个网页元素的位置，就会<span style="color: black;">同期</span>触发"重排"和"重绘"，<span style="color: black;">由于</span>布局改变了。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">浏览器<span style="color: black;">怎样</span>优化渲染？</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（1）将多次改变样式属性的操作合并成一次操作</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（2）将<span style="color: black;">必须</span>多次重排的元素，position属性设为absolute或fixed，</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">这般</span>此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（3）<span style="color: black;">因为</span>display属性为none的元素不在渲染树中，对<span style="color: black;">隐匿</span>的元素操作不会<span style="color: black;">诱发</span>其他元素的重排。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">倘若</span>要对一个元素进行<span style="color: black;">繁杂</span>的操作时，<span style="color: black;">能够</span>先<span style="color: black;">隐匿</span>它，操作完成后再<span style="color: black;">表示</span>。<span style="color: black;">这般</span><span style="color: black;">仅在</span><span style="color: black;">隐匿</span>和<span style="color: black;">表示</span>时触发2次重排。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">看这个的时候又想到display:none、visibility:hidden和overflow:hidden的区别，顺便带一下。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">display:none和visibility:hidden都是把网页上某个元素<span style="color: black;">隐匿</span>起来的功能</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">display:none:</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">隐匿</span>元素，不占网页中的任何空间，让这个元素彻底消失（看不见<span style="color: black;">亦</span>摸不着）,<span style="color: black;">因为</span>会影响到网页的空间，<span style="color: black;">因此</span>会<span style="color: black;">导致</span>一次重排和重绘。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">visibility:hidden:</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">他是把那个层<span style="color: black;">隐匿</span>了，<span style="color: black;">亦</span><span style="color: black;">便是</span>你看不到它的内容<span style="color: black;">然则</span>它内容所占据的空间还是存在的。（看不见但摸得到），该操作不会对页面有影响，<span style="color: black;">因此</span>只会<span style="color: black;">导致</span>一次重绘。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">overflow:hidden:</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">让超出的元素<span style="color: black;">隐匿</span>（不占据网页空间），<span style="color: black;">便是</span>在设置该属性的时候他会<span style="color: black;">按照</span>你设置的宽高把多余的那部分剪掉，会<span style="color: black;">导致</span>一次重排和重绘。</p>
你的话语如春风拂面，让我感到无比温暖。 外链发布论坛学习网络优化SEO。 外贸论坛是我们的，责任是我们的，荣誉是我们的，成就是我们的，辉煌是我们的。
页:
[1]