浅析前端页面渲染机制

单过程

不合于收集部分的多过程衬着引擎是单线程工作的，意味着衬着流程是一步一步渐进完成的。

解析文档(parser HTML)

在具体介绍浏览器衬着文档之前，先应当懂得浏览器若何解析文档：解析文档的次序，对于CSS和JavaScript若何处赖寥。

var $slide = $('.slide-left'); 
 
$slide.css({ 
 
    "margin-left": "100px" 
 
}); 
 
console.log($slide.css('padding'); $slide.addClass('slide-left'); $slide.css({ 
 
    "margin-left": "10px" 
 
});

解析次序

浏览器按大年夜上到下的次序扫描解析文档;

5.UI后端(UI backend):负责绘制提示框等浏览器组件，其底层应用的是操作体系的用户接口;

解析样式和脚本

脚本或许是因为平日会在JavaScript脚本中改变文档DOM构造，于是浏览器以同步方法解析，加载和履行脚本，浏览器在解析文档瓯，当解析到标签时，会解析个中的脚本(对于外链的JavaScript文件，须要先加载该文件内容，再进行解析)，然后急速履行，这全部过程都邑壅塞文档解析，直到脚本履行完才会持续解析文档。就是说因为脚本是同步加载和履行的，它会壅塞文档解析，这也说清楚明了为什么如今平日建议将标签放在标签前面，而不是放在标签里。如今HTML5供给defer和async两个属性支撑延迟和异步加载JavaScript文件，如：

<script defer src=http://developer.51cto.com/art/201704/"script.js">

改进针对上文说的脚本壅塞文档解析，主流浏览器如Chrome和FireFox等都有一些优化，比如在履行脚本时，开启另一个过程解析残剩的文档以找出场加载其他的待下载外部资本(不改变主过程的DOM树，仅优化加载外部资本)。
样式不合于脚本，浏览器对样式的处理并不会壅塞文档解析，大年夜概是因为样式表并不会改变DOM构造。
样式表与脚本你可能想问样式是否会壅塞脚本文件的加载履行呢?正常情况是不会的，然则存在一个问题是平日我们会裹足本中请求样式信息，然则在文档解析时，如不雅样式尚未加载或解析，将会获得缺点信息，对于这一问题，FireFox浏览器和Webkit浏览器处理策略不合：
- 当存在有样式文件未被加载和解析时，FireFox浏览器会壅塞所有脚本;
- 而Webkit浏览器只会壅塞操作了改文件内声明的样式属性的脚本。

构建DOM树

DOM，即文档对象模型(Document Object Model),DOM树，即文档内所有节点构成的一个树形构造。

假设浏览器获取返回的如下HTML文档：

<!doctype html> 
 
    <html> 
 
    <head> 
 
      <link rel="stylesheet" href=http://developer.51cto.com/art/201704/"./theme.css"></link> 
 
      <script src=http://developer.51cto.com/art/201704/"./config.js"></script> 
 
      <title>关键衬着路径</title> 
 
    </head> 
 
    <body> 
 
      <h1 class="title">关键衬着路径</h1> 
 
      <p>关键衬着路径介绍</p> 
 
      <footer>@copyright2017</footer> 	
			 2/5   首页 上一页 1 2 3 4 5 下一页 尾页	
			

　　推荐阅读
　　在终端中优雅地编写Python
媒介最早我也执偾在办事器上编辑文件的时刻用用vim来改改法度榜样，并没有把vim当做本身的主力编辑器。然则有时的一次机会须要改一个奇葩的输入文件的格局，用了下Vim的宏录制，尝到了甜头，于是后面就开端用Vim来写>>>详细阅读


本文标题：浅析前端页面渲染机制
地址：http://www.17bianji.com/lsqh/34753.html
 1/2    1