老生常谈-从输入url到页面展示到底发生了什么

解析过程中，浏览器起首会解析HTML文件构建DOM树，然后解析CSS文件构建衬着树，比及衬着树构建完成后，浏览器开端构造衬着树并将其绘制到屏幕上。这个过程比较复杂，涉及到两个概念: reflow(回流)和repain(重绘)。

DOM节点中的各个元素都是以盒模型的情势存在，这些都须要浏览器去寂?驿地位和大年夜小等，这个过程称为relow;当盒模型的地位,大年夜小以及其他属性，如色彩,字体,等肯定下来之后，浏览器便开端绘制内容，这个过程称为repain。

页面在初次加载时必定会经历reflow和repain。reflow和repain过程是异常消费机能的，尤其是在移动设备上，它会破坏用户体验，有时会造成页面卡顿。所以我们应当尽可能少的削减reflow和repain。

1)什么是反向代劳?

JS的解析是由浏览器中的JS解析引擎完成的，比如谷歌的是V8。JS是单线程运行，也就是说，在同一个时光内只能做一件事，所有的义务都须要列队，前一个义务停止，后一个义务才能开端。然则又存在某些义务比较耗时，如IO读写等，所以须要一种机制可以先执行排在后面的义务，这就是：同步义务(synchronous)和异步义务(asynchronous)。

JS的履行机制就可以看做是一个主线程加上一个义务队列(task queue)。同步义务就是放在主线程上履行的义务，异步义务是放在义务队列中的义务。所有的同步义务在主线程上履行，形成一个履行栈;异步义务有了运行结不雅就会在义务队列中放置一个事宜;脚本运行时先依次运行履行栈，然后会大年夜义务队列里提取事宜，运行义务队列中的义务，这个过程是赓续反复的，所以又叫干事宜轮回(Event loop)。具体的过程可以看我这篇文┞仿：点击这里

9、浏览器发送请求获取嵌入在 HTML 中的资本(如图片、音频、视频、CSS、JS等等)

其拭魅这个步调可以并列在步调8中，在浏览器显示HTML时，它会留意到须要获取其他地址内容的标签。这时，浏览器会发送一个获取请求来从新获得这些文件。比如我要获取外图片，CSS，JS文件等，类似于下面的链接：

图片：http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif

CSS式样表：http://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.css

JavaScript 文件：http://static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.js

这些地址都要经历一个和HTML攫取类似的过程。所以浏览器会在DNS中查找这些域名，发送请求，重定向等等...

------------瓜分线------------

至此，大年夜输入url到页面展示的过程终于整顿完了。本文前前后后整顿了差不多一个礼拜，当然，网上有很多文┞仿的次序可能跟本文不太一样，也是可以的。

如今已分开呆了一年的大年夜YY，进入了另一家公司，有很多器械在后面等着进修，有点小压力的同时也有很强烈的高兴，哈哈。愿你在金三银四里找到知足的工作，干巴爹。

当然，文笔有限，有误之处，迎接指出，本文参考了很多的文┞仿，不过很多文┞仿的链接不记得了，所以只列出了下面庞个参考链接。

下面这张图很完美的说清楚明了这一过程：

【编辑推荐】