我以为文章题目起的挺实际，在BS大行其道的本日，浏览器作为一款window软件已经是许多程序员兄弟的衣食父母，所以相识一下浏览器是很必要的。

1、背景

作为前端程序员一定要猎奇从地点栏输入地点后究竟发作了什么

主流浏览器

IE、Firefox、Safari、Chrome、Opera五大家属, Firefox、Chrome是开源的完整开源的，safari部份开源

浏览器的重要组成

用户界面、浏览器引擎、衬着引擎、收集、js诠释器、UI后端、数据存储，google为每一个tab页分一个衬着引擎，
注：浏览器引擎和衬着引擎的区分
(1) 浏览器引擎是一个主历程、用来治理衬着引擎地点的历程，衬着引擎对应的历程能够只属于一个tab页（chrome），而浏览器历程属于全部浏览器
(2) 衬着引擎没有接见操纵系统的权限（文件、收集、装备）而浏览器引擎有，如许的目标是有歹意网站时不会损伤全部浏览器或许操纵系统
(3) 当用户在地点栏输入网址要求网页时，衬着引擎向浏览器引擎发出要求:顺次挪用收集猎取资本，要求的资本抵达后，浏览器引擎把资本传给衬着

   衬着引擎，衬着引擎将猎取的资本举行剖析(html css js),有一些组件（规划历程就属于个中的某个组件）花样化后传给浏览器引擎，浏览器在界面中将界面显现出来

衬着引擎

衬着引擎有两种Mozilla和webkit,熟习css的同砚能够觉得这俩外国字挺熟习，对啊css兼容性的属性都会加这俩前缀，衬着引擎就是将要求的资本在浏览器中显现出来

衬着主流程

首先是猎取要求的文档，文档由8kb的数据块组成，8kb的大小是由tcp缺省缓冲区的大小决议的。构建成dom树->构建render树->规划render树->绘制render树。

(1) 衬着引擎从浏览器引擎猎取html文档后最先剖析，举行词法剖析（将输入分红能够明白的单词）和语法剖析（对应言语的语义划定规矩，形貌文档内容），终究依据文档标签构建一棵DOM树(能够明白成c++的一种数据结构),剖析历程假如碰到了行内、内联、外联的css，对应的子历程动手cssom树的构建(能够明白成c++的一种数据结构，形貌款式划定规矩)，由因而两个历程所以没有壅塞的题目，假如剖析历程当中碰到了javascript，那末DOM，而且javascript的实行须要比及cssom构建终了，下一步构建衬着树是须要两个树都是在完成构建的状况。

(2) 此时要构建衬着树了，先从DOM树的根节点最先逐层遍历，然后顺次在cssom中找到对应的款式并合并到衬着树，假如碰到了隐蔽款式那末
直接在衬着树种疏忽。

(3) 对衬着树举行’规划’，之前的一切操纵都没触及浏览器窗口，他们就是在这个阶段联系起来的，如许衬着树才顺应差别大小的窗口，这时刻一切的位置和尺寸都被转换为像素(px)

(4) 末了是将规划树转换花样传给浏览器引擎，在浏览器窗口绘制。

2、css壅塞

从上文中我们晓得css是壅塞的也黑白壅塞的，壅塞衬着树的构建，然则关于dom树的构建是不壅塞的。假如在构建衬着树时是不壅塞的会发作什么，我们会看到’纯html’没有任何款式，如许是不友好的，然则某些时刻我们确切想让它是不壅塞的，比方触及打印的款式，在特定大屏上的款式，由于他们对衬着的影响比较小，此时能够采纳媒体属性(media)

<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="style.css"    rel="stylesheet" media="all">
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">

注： 不壅塞不是不下载，只是在初次合成衬着树时不受它的壅塞

3、javascript壅塞

从衣食父母-浏览器中我们晓得javascript剧本的实行是会壅塞DOM树的构建的，而且在cssom构建终了前住手实行，如许会有很大的机能开支，有无不壅塞的要领呢？
1、外部js异步加载

<script src="app.js" async></script>

2、 内联js异步实行

function h () {
    console.log(document.querySelectorAll('h1'))
}
setTimeout(h, 0)