浏览器加载js的阻塞与非阻塞
这几天因项目需求,要实现一系列的js文件加载的问题,于是,就按照常规思路写了一通,悲催的是测试后发现问题重重;
为什么会有这么多问题,仔细想来还是对浏览器加载js的原理理解不透,于是我翻阅了大量的资料和自己的一些实践,总结出来以下的内容;
1、js在浏览器中的阻塞
常规理解就是浏览器在加载js时候会阻塞浏览器的渲染操作,但页面性能决定不希望我们在加载js的时候影响页面的渲染,所以我们经常会把js文件放到body之前去加载。而不会把它放在head里去阻塞页面的渲染。那么问题来了,如果我们把js放在head里,浏览器是怎么去执行它的呢,是按顺序加载还是并行加载呢?
其实在旧的浏览器下,都是按照先后顺序来加载的,这就保证了加载的js依赖不会发生问题。但是新的浏览器已经开始允许并行加载js了,也就是说我可以同时下载js文件,但是还是先后顺序执行文件的。
2、document.write 使用
我们一般会用document.write来生成一段广告,经常这样操作:document.write('<script id="posAD" type="text/javascript" src="http://192.168.3.107:888/control.js?platformcode=tcy&postioncode=A1&filecode=10030"><\/script>');
这样操作也是阻塞的;有同学就问了,你这是外联js,那么内链的呢,我也做过测试,一样的,同样会阻塞。
这样使用的时候一定要记住,要确保他是在dom ready之前去执行,否则它将会重新渲染整个页面。
3、那么如何实现非阻塞呢,那么就需要动态加载js了,通过appendChild(script)这种方式去异步加载js了,其实还可以用xhr对象来处理,但是这样只能解决非跨域问题,跨域xhr就无能为力了。还有一种办法就是新浏览器的defer 和 async 属性了,这样你把它写到head里也不会阻塞浏览器的渲染了。
于是在我明白上述的这样东东之后,我简单的实现一个动态加载js模块:
//loadJS模块(function () {var loadJS = function (deps, callback) {if(typeof deps == 'string') {deps = [deps];}var len = deps.length;var j = 0 ;var fn = function (){j++;if(j == len) {callback.apply(window);}};for(var i = 0 ; i < deps.length ; i++) {_loadMod(deps[i],fn); };};var _loadMod = function(url,fn) {var head = document.head || document.getElementsByTagName('head')[0] || document.documentElement;var script = document.createElement('script');script.type = 'text/javascript';script.charset = 'utf-8';script.async = true;script.src = url;script.onload = script.onreadystatechange = function() {if (!script.readyState || script.readyState in {'loaded': 1, 'complete': 1}) {script.onload = script.onreadystatechange = null;fn();head.removeChild(script);script = null;}}head.insertBefore(script, head.firstChild);} window.loadJS = loadJS;})();
以上内容也是我这两天初步终结出来的,有不对的地方还希望各位童鞋指正。
有兴趣的还可以参考这两篇博客:http://www.w3cfuns.com/blog-5443287-5401014.html 或则 http://www.cnblogs.com/hongcaomao/archive/2012/03/27/javascript_loadad.html
转载于:https://www.cnblogs.com/haohaoday/p/4195669.html
浏览器加载js的阻塞与非阻塞相关推荐
- 网页性能优化之异步加载js文件
一个网页的有很多地方可以进行性能优化,比较常见的一种方式就是异步加载js脚本文件.在谈异步加载之前,先来看看浏览器加载js文件的原理. 浏览器加载 JavaScript 脚本,主要通过<scri ...
- 经验总结:按需加载JS和css
项目中做过这样的事情:所有页面都通过SSI指令 include这样一份public-js.shtml, 用来引入涉及到的js(包括公共的脚本 验证插件 自定义组件等),但是一些没有交互效果的页面根本不 ...
- html5 js阻塞加载,js无阻塞加载和defer、async详解_白峰_前端开发者
无阻塞加载 把 下载是异步的没问题,但是每个javascript执行的时候还是同步的,就是先出现的script标签一定是先执行,即使是并行下载它是最后一个下载完成的,除非标有defer的script标 ...
- 浏览器是怎样加载js代码的?
作者:第七星尘 链接:https://www.zhihu.com/question/263866883/answer/276139578 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商 ...
- 解决浏览器加载缓存js文件不能及时获取服务器更新后js文件问题
当服务器修改js文件后,需要用户重新获取修改后的js文件,而不是访问之前浏览器中缓存的js文件.下面记录一个现在最常用的方法: 页面中访问js的链接如下: <script src="/ ...
- 创业笔记-Node.js入门之阻塞与非阻塞
阻塞与非阻塞 正如此前所提到的,当在请求处理程序中包括非阻塞操作时就会出问题.但是,在说这之前,我们先来看看什么是阻塞操作. 我不想去解释"阻塞"和"非阻塞"的 ...
- 浏览器加载和渲染html的顺序
1.浏览器加载和渲染html的顺序 浏览器加载和渲染html的顺序 IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成 ...
- 加载如下html 写出输出顺序,浏览器加载和渲染html的顺序-结论篇
我只转载觉得可以使用的. 1.浏览器加载和渲染html的顺序 1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的. 2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完 ...
- 异步加载js的三种方法
js加载时间线 : 它是根据js出生的那一刻开始记录的一系列浏览器按照顺序做的事,形容的就是加载顺序,可以用来优化什么东西,理论基础,背下来. 1.创建Document对象,开始解析web页面.解析H ...
最新文章
- 【bzoj3924】[Zjoi2015]幻想乡战略游戏 动态点分治
- 美团一面,看看你能否回答上来?
- py2exe——.py文件转换成exe
- pmp每日三题(2022年3月4日)
- 《C champion》 为什么要学习C语言
- 图像处理的傅里叶变换理解
- YbtOJ#20068-[NOIP2020模拟赛B组Day5]连通子图【构造】
- python 多条件 选择 算法_python部署python算法 - 快速寻找满足条件的两个数
- js中构造函数与普通函数的区别
- 【数据结构的魅力】005.链表问题专项
- MindFusion教程:如何构建Java Swing中的区域图
- Linux rpm 命令使用详解
- 安卓变苹果12系统永久,安卓系统变苹果系统2020
- 虎虎生威—新年版本(鼠标超人、烟花、浮动会闪的星星以及闪避值拉满的老虎)
- MircoPython 的组件扩展方法
- 云服务器挖矿病毒解毒方案
- CSDN20181218博客黑板报
- keras导入VGG16下载太慢解决办法
- 用Go构建Teamwork项目的9条教训
- Quantopian Risk Model (QRM)