衣食父母-浏览器

1

我觉得文章题目起的挺现实,在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)

你可能感兴趣的

载入中...