无阻塞加载

成都创新互联公司是一家业务范围包括IDC托管业务,虚拟主机、主机租用、主机托管，四川、重庆、广东电信服务器租用,成都西云数据中心，成都网通服务器托管,成都服务器租用,业务范围遍及中国大陆、港澳台以及欧美等多个国家及地区的互联网数据服务公司。

把js放在head里，浏览器是怎么去执行它的呢，是按顺序加载还是并行加载呢？在旧的浏览器下，都是按照先后顺序来加载的，这就保证了加载的js依赖不会发生问题。但是少部分新的浏览器已经开始允许并行加载js了，也就是说可以同时下载js文件，但是还是按先后顺序执行文件的。

下载是异步的没问题，但是每个javascript执行的时候还是同步的，就是先出现的script标签一定是先执行，即使是并行下载它是最后一个下载完成的，除非标有defer的script标签。任何javascript在执行的时候都会中断当前html文档解析，自然会阻止页面渲染。

javascript加载是不会影响已经渲染的页面，但是会中断html文档解析，浏览器会在javascript执行以后决定当前文档是否需要进行重新渲染或者文档重排。所以即使javascript放到最后面也会使浏览器暂停，但不影响之前已经解析出来的dom文档，此时对于用户来说是可操作的。

javascript下载完毕之后会立即执行，所有的javascript执行都会阻塞浏览器的其他行为，例如阻塞其他javascript的执行、其他的http请求的执行以及页面的解析和渲染。（html文档中外部js的下载也会阻塞浏览器的行为，但通过创建script元素动态js的下载不会，可能是认为动态的js不会改变页面效果，所以允许资源并行下载。）

图示动态脚本的下载

UI线程会根据页面里资源（资源是指css文件，图片等等）书写的先后顺序来加载资源，加载资源也就是使用http请求获取资源，像css外部文件，html文件以及图片等资源http请求处理完毕也就意味着资源加载结束，但是像外部的javascript文件的加载则不同，它的加载过程被分为两步，第一步和加载css文件和图片一样，就是执行一个http请求下载外部的js文件，但是javascript完成http操作后并不意味操作完毕，UI线程接着会执行它。js脚本的下载和执行必须是一个完整的操作，是不能被割裂的。动态js的下载不会阻塞，但执行一定会会。

浏览器为了提升用户体验，加快UI线程的执行是一个无法回避的问题，但是拆分js的下载和执行是不可行的，如是乎浏览器换了种方式，这个方式也就是在同一个时间能下载多个资源。

将常用的，稳定的静态资源统一放在一个静态资源服务器上，由统一的域名对外提供，这个域名要和主体请求的域名不一样，原理是因为浏览器只通过域名来限制连接的个数，如果一个页面里有两个不同的域的，那么并行的http请求个数也会变成两倍。有度，对DNS解析要开销，所以2个最佳。

将所有外部js代码分为UI初始化代码和其他代码，UI初始化代码是在页面加载时候执行的代码。让那些不会用于页面初始化展示的js代码的加载和执行操作通过onload事件在浏览器忙指示结束后触发，即让那些和页面加载无关的js脚本在onload方法里执行

无阻塞加载脚本的核心技术就是动态的创建script的dom节点，而且可以跨域访问。

var script=document.createElement("script");

script.type="text/javascript";

script.src="file.js";

document.getElementsByTagName("head")[0].appendChild(script);

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章标题：JavaScript无阻塞加载和defer、async详解-创新互联
分享链接：http://ybzwz.com/article/giidd.html