我觉得文章的标题挺写实的。在BS流行的今天，浏览器作为一个窗口软件，已经是很多程序员兄弟的父母了，所以了解浏览器是很有必要的。一、背景作为前端程序员，一定很好奇从地址栏输入地址后发生了什么。主流浏览器的五大家族是IE、Firefox、Safari、Chrome和Opera。Firefox和Chrome是开源的，是完全开源的，Safari是开源浏览器的一部分。主要组件是用户界面、浏览器引擎、渲染引擎、网络、js解释器、UI后端和数据存储。Google为每个标签页分配一个渲染引擎。注意：浏览器引擎和渲染引擎的区别（1）浏览器引擎是一个主进程，用来管理渲染引擎所在的进程。渲染引擎对应的进程可能只属于一个标签页（chrome），而浏览器进程则属于整个浏览器。(2)渲染引擎不访问操作系统权限（文件、网络、设备）和浏览器引擎，这样当出现恶意网站时，整个浏览器或操作系统不会被破坏(3)当用户在地址栏输入URL请求网页，渲染引擎会向浏览器发送请求引擎发出请求：依次调用网络获取资源。请求的资源到达后，浏览器引擎将资源传递给渲染引擎，渲染引擎解析获取到的资源（htmlcssjs），将一些组件（布局过程属于它们的某个组件）格式化后传递给浏览器引擎，浏览器在界面渲染引擎中呈现界面渲染引擎有Mozilla和webkit两种，熟悉css的同学可能会觉得这两个外来词很眼熟，对css的兼容性属性会加前缀这两个前缀。渲染引擎是将请求的资源呈现在浏览器中。渲染的主要过程首先是获取请求的文档。文件由8kb的数据块组成，8kb的大小是tcp默认的buffer，取决于区域的大小。构建dom树->构建渲染树->布局渲染树->绘制渲染树。(1)渲染引擎从浏览器引擎获取到html文档后开始解析，进行词法分析（将输入分成可以理解的词）和语法分析（对应语言的语义规则，描述文档的内容），最后构建DOM树（可以理解为c++的数据结构），如果解析过程遇到inline、inline、outlinecss，相应的子流程开始构建cssom树（可以理解为数据结构ofc++，描述Style规则），因为有两个进程，所以不存在阻塞问题。如果在解析过程中遇到了javascript，那么DOM和javascript的执行需要等到cssom构建完成。下一步是构建渲染树。两棵树都需要完成构建的状态。(2)至此，就到了构建渲染树的时候了。首先从DOM树的根节点开始逐层遍历，然后在cssom中找到对应的样式并合并到渲染树中。如果遇到隐藏样式，直接在渲染树中忽略即可。(3)“布局”渲染树。前面的所有操作都不涉及浏览器窗口。它们在这个阶段被连接起来，使得渲染树可以适应不同大小的窗口。这时候所有的位置和尺寸都设置好了。转换为像素(px)(4)最后将布局树转换格式传递给浏览器引擎，绘制在浏览器窗口中。2.CSS阻塞从上面我们知道CSS既有阻塞的也有非阻塞的。它会阻塞渲染树的构建，但不会阻塞dom树的构建。如果在构建rendertree的时候是非阻塞的会怎么样，我们会看到没有任何样式的'purehtml'，这很不友好，但是有时候我们确实希望它是非阻塞的，比如当涉及到打印样式时，特定大屏幕上的样式，因为它们对渲染的影响相对较小，这时候可以使用媒体属性（media）
