中药治疗白癜风 http://m.39.net/pf/a_4784993.html文章来自：华为云开发者社区
摘要：本文主要讲谈及浏览器的渲染原理、流程以及相关的性能问题。
问题前瞻
1.为什么css需要放在头部？
.js为什么要放在body后面？
.图片的加载和渲染会阻塞页面DOM构建吗？
4.dom解析完才出现页面吗？
5.首屏时间根据什么来判定？
浏览器渲染
1.浏览器渲染图解
[来自googl开发者文档]
浏览器渲染页面主要经历了下面的步骤：
1.处理HTML标记并构建DOM树。
.处理CSS标记并构建CSSOM树。
.将DOM与CSSOM合并成一个渲染树。
4.根据渲染树来布局，以计算每个节点的几何信息。
5.将各个节点绘制到屏幕上。
为构建渲染树，浏览器大体上完成了下列工作：
从DOM树的根节点开始遍历每个可见节点。
某些节点不可见（例如脚本标记、元标记等），因为它们不会体现在渲染输出中，所以会被忽略。
某些节点通过CSS隐藏，因此在渲染树中也会被忽略，例如，上例中的span节点---不会出现在渲染树中，---因为有一个显式规则在该节点上设置了“display:non”属性。
对于每个可见节点，为其找到适配的CSSOM规则并应用它们。
发射可见节点，连同其内容和计算的样式。
根据以上解析，DOM树和CSSOM树的构建对于页面性能有非常大的影响，没有DOM树，页面基本的标签块都没有，没有样式，页面也基本是空白的。所以具体css的解析规则是什么？js是怎么影响页面渲染的？了解了这些，我们才能有的放矢，对页面性能进行优化。
.css解析规则
divid="div1"divclass="a"divclass="b".../divdivclass="c"divclass="d".../divdivclass="".../div/div/divdivclass="f"divclass="c"divclass="d".../div/div/div/div
#div1.c.d{}.f.c.d{}.a.c.{}#div1.f{}.c.d{}
从左向右的匹配规则
从右向左的匹配规则
如果css从左向右解析，意味着我们需要遍历更多的节点。不管样式规则写得多细致，每一个dom结点仍然需要遍历，因为整个stylruls还会有其它公共样式影响。如果从右向左解析，因为子元素只有一个父元素，所以能够很快定位出当前dom符不符合样式规则。
.js加载和执行机制
首先明确一点，我们可以通过js去修改网页的内容，样式和交互等，这一意味着js会影响页面的dom结构，如果js和dom构建并行执行，那么很容易会出现冲突，所以js在执行时必然会阻塞dom和cssom的构建过程，不论是外部js还是内联脚本。
js的位置是否影响dom解析？
首先我们为什么提倡把js放在body标签的后面去加载，因为从dmo上看无论是放在had还是放在body后加载js，页面domcontntload的时间都是一样的：
我们从图中可以看出js的加载和执行是阻塞dom解析的，但是因为页面并不是一次就渲染完成，所以我们需要做的是尽量让用户看到首屏的部分被渲染出来，js放在头部，则页面的内容区域还没有解析到就被阻塞了，导致用户看到的是白屏，而js放在body后面，尽管此时页面dom仍然没有解析完成，但是已经渲染出一部分楼层了，这也是为什么我们比较看重页面的首屏时间。
只有DOM和CSSOM树构建好后并合并成渲染树才能开始绘制页面图形，那是不是把整个DOM树和CSSOM树构建好后才能开始绘制页面？这显然是不符合我们平时访问页面的认知的，实际上：
为达到更好的用户体验，呈现引擎会力求尽快将内容显示在屏幕上。它不必等到整个HTML文档解析完毕之后，就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其余内容的同时，呈现引擎会将部分内容解析并显示出来。
具体浏览器什么时候进行首次绘制？可以查看本文对浏览器首次渲染时间点的探究。
4.图片的加载和渲染机制
首先我们解答一下上面的问题：图片的加载与渲染会不会阻塞页面渲染？答案是图片的加载和渲染不会影响页面的渲染。
那么标签中的图片和样式中的图片的加载和渲染时间是什么样的呢？
解析HTML—构建DOM树
加载样式—解析样式—构建样式规则树
加载javascript—执行javascript代码
把DOM树和样式规则树匹配构建渲染树
计算元素位置进行布局
绘制
当然把DOM树和样式规则树匹配构建渲染树时，只会把可见元素和它对应的样式规则结合一起产出到渲染树，这就意味有不可见元素，当匹配DOM树和样式规则树时，若发现一个元素的对应的样式规则上有display:non，浏览器会认为该元素是不可见的，因此不会把该元素产出到渲染树上。
性能优化
css优化
1.尽量减少层级
#divp.class{color:d;}.class{color:d;}
层级减少，意味者匹配时遍历的dom就少。
关于lss嵌套的书写规范也基于这个道理。
.使用类选择器而不是标签选择器
减少匹配次数
.按需加载css
(function(){window.gConfig=window.gConfig
{};window.gConfig.isMobil=/iPhon
iPad
iPod
Android/i.tst(navigator.usrAgnt);varhClassNam;if(window.gConfig.isMobil){hClassNam=phon;documnt.writ(linkl="stylsht"hf="
转载请注明：http://www.qianzhongdushijian.com/jdsz/6679.html
当前位置： 铅中毒事件 > 识诊急性铅中毒 > 前端工程师必备从浏览器的渲染到性能优化
