了解浏览器线程基础
一个页面的呈现主要是由浏览器渲染进程实现的(render进程),主要作用为页面的渲染,脚本执行,事件处理等。而render进程是多线程的,它主要包含以下主要线程:
1 GUI渲染线程
- 负责渲染浏览器界面,解析HTML,CSS,构建DOM树和RenderObject树,布局和绘制等。
- 当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行
- 注意,GUI渲染线程与JS引擎线程是互斥的,当JS引擎执行时GUI线程会被挂起(相当于被冻 结了),GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。
2 JS引擎线程
- 也称为JS内核,负责处理Javascript脚本程序。(例如V8引擎)
- JS引擎线程负责解析Javascript脚本,运行代码。
- JS引擎一直等待着任务队列中任务的到来,然后加以处理,一个Tab页(renderer进程)中 无论什么时候都只有一个JS线程在运行JS程序
- 同样注意,GUI渲染线程与JS引擎线程是互斥的,所以如果JS执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞。
3 事件触发线程
- 归属于浏览器而不是JS引擎,用来控制事件循环(可以理解,JS引擎自己都忙不过来,需要浏览器另开线程协助)
- 当JS引擎执行代码块如setTimeOut时(也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等),会将对应任务添加到事件线程中
- 当对应的事件符合触发条件被触发时,该线程会把事件添加到待处理队列的队尾,等待JS引擎的处理
- 注意,由于JS的单线程关系,所以这些待处理队列中的事件都得排队等待JS引擎处理(当JS引擎空闲时才会去执行)
4 定时触发器线程
- 传说中的setInterval与setTimeout所在线程
- 浏览器定时计数器并不是由JavaScript引擎计数的,(因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确)
- 因此通过单独线程来计时并触发定时(计时完毕后,添加到事件队列中,等待JS引擎空闲后执行)
5 异步http请求线程
- 在XMLHttpRequest在连接后是通过浏览器新开一个线程请求
- 将检测到状态变更时,如果设置有回调函数,异步线程就产生状态变更事件,将这个回调再放入事件队列中。再由JavaScript引擎执行。
JS阻塞特性
由上述GUI线程和JS引擎互斥的关系,我们也就能更好的理解为什么JS运行会阻塞页面的渲染,也就是常说的JS阻塞特性
。
HTML整体执行步骤
0.加载整体html文件
1.至上而下解析html
2.解析html建立dom树,遇到诸如<script>、<link>等标签时,就会去下载相应内容,并解
析、执行。如果是<link>标签,解析css构建CSSOM树
4.DOM和CSSOM结合生成render树
5.布局render树(Layout/reflow),负责各元素尺寸、位置的计算
6.绘制render树(paint),绘制页面像素信息
7.浏览器会将各层的信息发送给GPU,GPU会将各层合成(composite),显示在屏幕上。
HTML解析过程是至上而下的,当html解析器遇到诸如<script>、<link>等标签时,就会去下载相应内容。且加载、解析、执行JavaScript会阻止解析器往下执行,要强调 渲染
和 下载
是不冲突的,渲染是GUI线程在执行,下载是下载线程在执行,浏览器多线程。
以下为实验:
HTML代码:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>浅谈Html页面内容执行顺序</title>
<link rel="stylesheet" href="red.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="test.js"></script>
<link rel="stylesheet" href="font.css">
<script type="text/javascript" src="test2.js"></script>
</head>
<body>
<p>html顺序测试</p>
<img src="1.png" alt="">
<input value="101" />
<link rel="stylesheet" href="styl.css">
</body>
</html>
Test.js代码:
for(var i=0;i<10000;i++){
console.log("delay");
if(i==9999){
loadStyle('lime.css');
}
}
function loadStyle(url){
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = url;
var head = document.getElementsByTagName('head')[0];
head.appendChild(link);
}
Test2.js代码:
console.log("after blocking script,you will appear");
从图中可以看出:遇到<script>、<link>等标签时,就会下载相应的内容。
从下载
的角度讲:
- <link>标签下载不会阻塞<script>标签,由红色①可看出;
- <script>不会阻塞<script>标签下载,由蓝色②可看出;
- <script>标签也不会阻塞<link>标签,但会阻止<img>标签,因为在HTML文档中,img标签在link标签前面。
-
总结
下就是:当HTML解析器遇到<script>、<link>、<img>标签,开始下载时,只存在一种阻塞情况,就是<script>标签会阻止<img>资源下载,其余<script>、<link>相互之间下载没有影响。
下载完成之后,就会运行解析相应的JS文件或者CSS文件,运行JS文件需要JS引擎线程,前面提到,JS引擎和GUI时互斥的,所以在 解析
的角度讲,JS引擎运行,会阻塞GUI,即阻止页面渲染。从上图可以看出,在test.js下载之后,解析运行时,由于有for循环函数的运行,页面首次渲染时间被推至1100ms才渲染完成。
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="robots" content="noindex">
<title>Hang test</title>
<style>
body { font-family: sans-serif; }
</style>
<script>
console.log('doc state: ' + document.readyState);
document.onreadystatechange = function () {
console.log('doc state change: ' + document.readyState);
};
</script>
<link href="http://hang.nodester.com/hang.css?5000" rel="stylesheet" />
</head>
<body>
<p>Refresh with the console open to see the hanging</p>
<script src="http://static.jsbin.com/js/render/edit.js?4.1.4" async></script>
<script>jsbinShowEdit && jsbinShowEdit({"static":"http://static.jsbin.com","root":"http://jsbin.com"});</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-1656750-34', 'auto');
ga('require', 'linkid', 'linkid.js');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>
由https://blog.csdn.net/gbstack...,我们可以得到:
由图中可以看出:
外部脚本与外部样式是并行加载
(即在 下载
阶段,<script>、<link>互不影响,符合上述结论),但直到外部样式加载完毕,外部脚本才开始执行(即外部样式的下载,虽然不会影响外部脚本的下载,但会影响脚本的运行)
文章参考:
https://segmentfault.com/a/11...
http://www.cnblogs.com/dojo-l...