JavaScript无阻赛加载最常用的就是xhr 注入和script dom element，《高性能JavaScript》一书中有提到，倘若我用script dom element技术，将script动态插入head中，文件的下载和运行都不会阻塞其他页面处理过程。这里百思不得其解，通过动态插入head中，JavaScript文件下载不会阻塞其他页面处理过程，但运行肯定会吧？浏览器不是单进程的么，一旦下载成功后立即执行，其他一切操作肯定会等该JavaScript代码执行完后，才进行啊。那为什么还说无阻塞呢。
我的观点：只能说加载无阻赛，但运行肯定会使其他操作挂起，等待完成后再处理。
疑问：JavaScript无阻赛技术为什么可以毫无顾忌地将JavaScript放到head中，且运行时不会阻塞其他页面处理过程？像这样，页面渲染时，在遇到<body>前执行JavaScript，不同样会出现短时间的白屏么？除开下载改善了外，与将<script>标签放到<head>中有什么区别？
24 回答
白猪掌柜的
TA贡献1893条经验 获得超10个赞
仔细阅读原书的话，是可以得到答案的。
（相对而言的）无阻塞的前提条件是，负责加载js的js本身就放在body后面，整个页面的渲染已经完成。
script标签下载是并行的。
Internet Explorer 8, Firefox 3.5, Safari 4, and Chrome 2 all allow parallel downloads of JavaScript files.
但是并不意味着就不阻塞其它资源的下载。
Unfortunately, JavaScript downloads still block downloading of other resources, such as images. And even though downloading a script doesn’t block other scripts from downloading, the page must still wait for the JavaScript code to be downloaded and executed before continuing. So while the latest browsers have improved performance by allowing parallel downloads, the problem hasn’t been completely solved. Script blocking still remains a problem.
放在body尾部是比较推荐的做法。
Because scripts block downloading of all resource types on the page, it’s recommended to place all <script> tags as close to the bottom of the <body> tag as possible so as not to affect the download of the entire page.
分析
Even though the script downloads will block one another, the rest of the page has already been downloaded and displayed to the user so that the entire page isn’t perceived as slow.
然后提出非阻塞技术的来源——HTTP请求和UI更新是阻塞浏览器进程的两大源头，在js文件大小和请求间作一个平衡，然后逐步加载这些js是防止（一直）阻塞浏览器的方法。
JavaScript’s tendency to block browser processes, both HTTP requests and UI updates, is the most notable performance issue facing developers. Keeping JavaScript files small and limiting the number of HTTP requests are only the first steps in creating a responsive web application. The richer the functionality an application requires, the more JavaScript code is required, and so keeping source code small isn’t always an option. Limiting yourself to downloading a single large JavaScript file will only result in locking the browser out for a long period of time, despite it being just one HTTP request. To get around this situation, you need to incrementally add more JavaScript to the page in a way that doesn’t block the browser.
重点是在页面结束加载后加载js代码。
The secret to nonblocking scripts is to load the JavaScript source code after the page has finished loading. In technical terms, this means downloading the code after the window’s load event has been fired. There are a few techniques for achieving this result.
牛魔王的故事
TA贡献1830条经验 获得超3个赞
@猴子猿: 也就是说这个js在下载和执行的时候，其他的资源可以同步下载
js执行是单线程，html渲染也是这个单线程，但是请求资源可以多个线程一起下载，只不过有些浏览器在同一个域名下只能最多5个一起下载
慕妹3242003
TA贡献1824条经验 获得超6个赞
是针对加载而言？就是说加载后，执行时，还是会阻塞哈？但书上和其他博客上，怎么都说利用无阻赛技术可以放到head中，且运行时不会阻塞其他操作呢？这点让我很费解
添加回答
举报
0/150
提交
取消