浏览器渲染过程与性能优化

如今知道了网页的衬着都是由浏览器完成的，那么如不雅一个网站的页面加载速度太慢会导致用户体验不敷友爱，本文经由过程详解浏览器衬着页面的过程来惹人一些根本的浏览器机能优化筹划。让浏览器更快地衬着你的网页并快速响应大年夜而进步用户体验。

关键衬着路径

浏览器接收到办事器返回的 HTML 、 CSS 和 JavaScript 字节数据并对其进行解析和改变成像素的衬着过程被称为关键衬着路径。经由过程优化关键衬着路径即可以缩短浏览器衬着页面的时光。

浏览器在衬着页面前须要先构建出 DOM 树与 CSSOM 树 (如不雅没有 DOM 树和 CSSOM 树就无法肯定页面的构造与样式，所以这两项是必须先构建出来的)。

DOM 树全称为 Document Object Model 文档对象模型，它是 HTML 和 XML 文档的编程接口，供给了对文档的构造化表示，并定义了一种可以使法度榜样对该构造进行拜访的方法 (比如 JavaScript 就是经由过程 DOM 来操作构造、样式和内容)。 DOM 将文档解析为一个由节点和对象构成的集合，可以说一个 WEB 页面其实就是一个 DOM 。

Chrome 许可应用 subresource 属性指定优先级最高的下载资本(当所有属性为 subresource 的资本下载完完毕后，才会开端下载属性为 prefetch 的资本)。

CSSOM 树全称为 Cascading Style Sheets Object Model 层叠样式表对象模型，它与 DOM 树的含义相差不大年夜，只不过它是 CSS 的对象集合。

大年夜家都知道万维网的应用层应用了 HTTP 协定，并且用浏览器作为人口拜访收集上的资本。用户在应用浏览器拜访一个网站时须要先经由过程 HTTP 协定向办事器发送请求，之后办事器返回 HTML 文件与锾螃信息。这时，浏览器会根据 HTML 文件来进行解析与衬着(该阶段还包含向办事器请求非内联的 CSS 文件与 JavaScript 文件或者其他资本)，最终再将页面涌如今用户面前。

构建DOM树与CSSOM树

浏览器大年夜收集或硬盘中获得 HTML 字节数据后会经由一个流程将字节解析为 DOM 树：

编码：先将HTML的原始字节数据转换为文件指定编码的字符。
令牌化：然后浏览器会根据 HTML 规范来将字符串转换成各类令牌 (如、如许的标签以及标签中的字符串和属性等都邑被转化为令牌，每个令牌具有特别含义和一组规矩)。令牌记录了标签的开端与停止，经由过程这个特点可以轻松断定一个标签是否为子标签(假设有与两个标签，当标签的令牌还未竽暌滚到它的停止令牌就碰见了标签令牌，那么就是的子标签)。
生查对象：接下来每个令牌都邑被转换成定义其属性和规矩的对象(这个对象就是节点对象)。
构建完毕： DOM 树构建完成，全部对象集合就像是一棵树形构造。可能有人会困惑为什么 DOM 是一个树形构造，这是因为标签之间含有复杂的父子关系，树形构造正好可以诠释这个关系( CSSOS 同理，层叠样式也含有父子关系。例如： div p {font-size: 18px} ，会先寻找所有 p 标签并断定它的父标签是否为 div 之后才会决定要不要采取这个样式进行衬着)。

全部 DOM 树的构建过程其实就是：字节 -> 字符 -> 令牌 -> 节点对象 -> 对象模型，下面精晓过一个示例 HTML 代码与配图更形象地解释这个过程。

浏览器衬着过程与机能优化

当上述 HTML 代码碰见标签时，浏览器会发送请求获得该标签中标记的 CSS 文件(应用内联 CSS 可以省略请求的步调进步速度，但没有须要为了这点速度而损掉了模块化与可保护性)， style.css 中的内容如下：

body { font-size: 16px } 
p { font-weight: bold } 
span { color: red } 
p span { display: none } 
img { float: right }

浏览器获得外部 CSS 文件的数据后，就会像构建 DOM 树一样开端构建 CSSOM 树，这个过程没有什么特其余差别。

浏览器衬着过程与机能优化

如不雅想要更具体地去体验一下关键衬着路径的构建，可以应用 Chrome 开辟者对象中的 Timeline 功能，它记录了浏览器大年夜请求页面资本一向到衬着的各类操作过程，甚至还可以录制某一时光段的过程(建议不要去看太大年夜的网站，信息会比较混乱)。

浏览器衬着过程与机能优化

<html> 
  <head> 
    <metaname="viewport"content="width=device-width,initial-scale=1"> 
    <linkhref=http://mobile.51cto.com/"style.css"	
			 1/6    1 2 3 4 5 6 下一页 尾页	
			

　　推荐阅读
　　洞察| 创新帮助制造业企业跑赢数字化转型攻坚战
            
            就连腾讯董事会主席兼首席履行官马化腾在近期召开的“2017中国两化融合大年夜会”上也几回再三强调，制造业是数字经济的主疆场，它的转型进级将是新一轮全球数字竞争的关键。对>>>详细阅读


本文标题：浏览器渲染过程与性能优化
地址：http://www.17bianji.com/lsqh/37738.html
 1/2    1