前几日写了一篇文章，介绍了js阻塞页面加载的问题。当时是通过例子来验证的。今天，我介绍一下浏览器内核，从原理上介绍一下js阻塞页面加载的原因。

浏览器的内核是多线程的，它们在内核制控下相互配合以保持同步，一个浏览器至少实现三个常驻线程：javascript引擎线程，GUI渲染线程，浏览器事件触发线程。

1.        javascript引擎是基于事件驱动单线程执行的，JS引擎一直等待着任务队列中任务的到来，然后加以处理，浏览器无论什么时候都只有一个JS线程在运行JS程序。

2.        GUI渲染线程负责渲染浏览器界面，当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时,该线程就会执行。但需要注意 GUI渲染线程与JS引擎是互斥的，当JS引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。

3.        事件触发线程，当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等，但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。

由上文蓝色标注的文字可以知道，当浏览器在执行JS程序的时候，GUI渲染线程会被保存在一个队列中，直到JS程序执行完成。这样就造成了页面的渲染，就是所说的JS阻塞页面加载问题。

很多同学朋友搞不清楚,既然说JavaScript是单线程运行的,那么XMLHttpRequest在连接后是否真的异步?

其实请求确实是异步的,不过这请求是由浏览器新开一个线程请求(参见上图),当请求的状态变更时,如果先前已设置回调,这异步线程就产生状态变更事件放到 JavaScript引擎的处理队列中等待处理,当任务被处理时,JavaScript引擎始终是单线程运行回调函数,具体点即还是单线程运行 onreadystatechange所设置的函数.

转:JS线程和JS阻塞页面加载的问题的更多相关文章

  1. js部署中如何提高页面加载速度

    1.合并js文件,减少http请求数量. 2.对js文件进行压缩 3.以gzip的形式提供js 4.使js文件可缓存 5.使用CDN

  2. js控制某个div在页面加载完成5秒后隐藏

    <div id="k">测试</div><script>setTimeout("document.getElementById('k' ...

  3. angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js

    用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此: 问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所 ...

  4. 页面加载时的div动画

    用@keyframes(动画),实现页面加载时的div动画(不要用js控制,因为当页面加载的时候,js还不一定可以使用) 可以在https://daneden.github.io/animate.cs ...

  5. JS脚本文件的位置对页面加载性能影响以及无阻塞脚本（javascript）模式

    JS的阻塞特性:当<script>出现的时候,页面必须等待脚本文件的加载.解析.执行完毕后才能继续进行页面的渲染.不管脚本文件是以内联形式还是外部引入的形式出现在<script> ...

  6. 解决JS文件页面加载时的阻塞

    关于页面加载时的时间消费,许多书中都做出了介绍,也提出了很多种方法.本文章就详细介绍XHR注入. 概述:JS分拆的方法 1.XHR注入:就是用ajax异步请求同域包含脚本的文件,然后将返回的字符串转化 ...

  7. js jquery 页面加载初始化方法

    js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...

  8. JS实现页面加载完毕之前loading提示效果

    1.获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.docu ...

  9. JS 页面加载触发事件 document.ready和window.onload的区别

    document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ...

随机推荐

  1. 优步uber司机怎么注册不了？注册优步司机问题要点

    第一,可能是你的车型不符全要求,看是不是5年内的车型,同时要求车价8W以上:第二,你的驾驶年限不够,要求驾驶证年限1年以上的,如果不够的怎么办,告诉你个方法,PS啊!优步可查不了车管所的系统,所以这类 ...

  2. 动态调用python类和函数

    类 class test1(object): def __init__(self): print "i am test1" class test2(object): def __i ...

  3. android 数据持久化——I/O操作

    上一节中简单的介绍了File的操作,这一节来说说使用android平台自带对象实现文件的基本操作 主要的两个类:openFileOutput(写)和openFileInput(读) 向文件中写如数据代 ...

  4. getline函数

    在我的印象中,getline函数常常出如今自己的视野里,模糊地记得它常常常使用来读取字符串 .可是又对它的參数不是非常了解,今天又用到了getline函数,如今来细细地总结一下: 首先要明确设计get ...

  5. Android面试题06

    51. 一条最长的短信息约占多少byte? 中文70(包括标点),英文160,160个字节 这个说法不准确, 要跟手机制式运营商等信息有关. 做实验,看源码 ArrayList<String&g ...

  6. 【课程分享】ASP.NET MVC5&amp;微信公众平台整合开发实战(响应式布局、JQuery Mobile,Windows Azure、微信核心开发)

    对这个课程有兴趣的,能够联系我QQ2748165793 基础知识储备 ASP.NET MVC 5基础(6讲) 第一讲-初识ASP.NET MVC并搭建整合开发环境 第二讲-深入MVC开发模式 第三讲- ...

  7. android 视频播放器的INTENT-FILTER属性

    <intent-filter>                   <action android:name="android.intent.action.VIEW&quo ...

  8. linux搭建邮件服务器

    一.概述: 在配置邮件服务器之前,先解释几个概念. 通常使用Email都很容易,但是Internet的邮件系统是通过几个复杂的部分连接而成的,对于最终用户而言,我们熟悉的Outlook,Foxmail ...

  9. Js闭包与循环

    目标:点击任何一个li,提示当前点击位置 <ul> <li>第1个</li> <li>第2个</li> <li>第3个</ ...

  10. javascript函数querySelector

    querySelector用于获得dom节点,可以接受三种类型的参数:id(#),class(.),标签.很像jquery的选择器.不过只能返回一个子孙元素,但是jquery选择器的话,可以返回一组元 ...