高性能的javascript之加载顺序与执行原理篇


Posted in Javascript onJanuary 14, 2018

前言

javascript在浏览器中的性能,可以认为是开发者所面临的最严重的可用性问题,今天,自己看完高性能的javascript的加载和执行这一章,聊聊怎么解决js的加载顺序和执行的原理,下面话不多说了,来一起看看详细的介绍:

高性能的javascript之加载顺序与执行原理篇

当浏览器遇到<script>标签的时候,浏览器必须先话时间下载外链的文件然后并执行,在这过程中,页面渲染和用户交互是完全被阻塞的。

脚本放在哪里比较好?

高性能的javascript之加载顺序与执行原理篇

这种情况无疑是存在严重的性能问题的,由于脚本会阻塞页面的渲染,直到它们全部下载并执行完成后,页面渲染才会继续,下面的图就是代码的执行顺序

高性能的javascript之加载顺序与执行原理篇

第一个js文件下载,要等到第一个js文件下载完全才会执行第二个js文件,不过现在IE8,Firefox3.5,Safari4和Chrome2都允许并行下载js文件,遗憾的是,js下载过程还是会阻塞其他资源的下载,例如:图片

所以提高性能的方法之一:将脚本放在body底部

高性能的javascript之加载顺序与执行原理篇

组织脚本

由于每个<script>标签下载时都会阻塞页面的渲染,所以减少页面包含的<script>标签数量是必不可少的,解决方法:可以把多个js文件合并打包成一个js文件,这样子做的好处就是可以最小化延迟时间将会明显的改善页面的总体性能,除此之外,还可以减少HTTP的请求。

一般来说下载单个100KB的文件比下载4个25KB的文件快。

如果有多个外链的js文件,可以合并成一个js文件

高性能的javascript之加载顺序与执行原理篇

无阻塞的脚本

尽管下载单个较大的js文件只产生一次HTTP的请求,但是会假死浏览器一大段时间,为了避免这种情况,你需要向页面中逐步加载js文件。

延迟的脚本

defer属性指明本元素所含的脚本可以延迟执行,但是只有IE4+和Firefox3.5+的浏览器支持

高性能的javascript之加载顺序与执行原理篇

简单来说defer的机制就是知道DOM加载完成前才去下载js文件,不会阻塞浏览器的其他进程

高性能的javascript之加载顺序与执行原理篇

在不支持defer属性的浏览器弹出的顺序是:defer,script,load

支持defer属性的浏览器弹出的顺序是:script,defer,load

所以说defer是在onload事件执行之前被调用

动态脚本

动态脚本的注入有两种方式,第一就是动态创建script标签,第二就是通过XMLHttpRequest注入页面

先说说第一种怎么使用:

高性能的javascript之加载顺序与执行原理篇

这种技术的重点在于:无论在何时启动下载,文件的下载和执行过程不会阻塞页面其他进程,但是使用动态脚本节点下载js文件时,返回的代码会立即执行(除了Firefox和Opera,它们会等待此前所有动态脚本节点执行完毕)

在主流的浏览器会在<script>标签接收完成时触发一个load事件,但是ie浏览器没有,所以我们必须封装一个兼容所有的浏览器都可以使用的方法

高性能的javascript之加载顺序与执行原理篇

这种方式的缺点就是要清楚文件的加载顺序,当js文件多了,依赖关系复杂的时候,很难管理加载的依赖顺序

高性能的javascript之加载顺序与执行原理篇

就像这样子写的代码很难维护

第二种动态创建脚本方式

高性能的javascript之加载顺序与执行原理篇

实际上相当于创建一个带有内联脚本的<script>标签,一旦新创建的<script>元素被添加到页面,代码就会立即执行然后准备就绪。

优点:就是下载的js代码但是不立即执行,这样子可以把脚本的执行推迟到你准备好的时候执行,这种方法还可以兼容所有的浏览器

缺点:js文件必须与所请求的页面处于相同的域,js文件不能从CDN下载,一般大型web应用都不会使用这种方式

推荐使用无阻塞模式:

先添加动态所需的代码,然后假装初始化页面的剩下的代码

[图片上传失败...(image-dd3f9-1515902024710)]

上面介绍了那么多,给大家推荐一些动态延迟加载的库

有YUI3,LazyLoad和LABjs等这些库,个人觉得LABjs库比较好用,但是没有用过,大家可以去了解一下,使用方法就不在这里说了。

总结:

提高js性能的几个方面

      1.</body>闭合标签之前,将所有的<script>标签放到页面底部。这能确保在脚本执行前页面已经完成了渲染

      2.合并脚本。页面中的<script>标签越少,加载也就越快,响应也更快。无论外链文件还是内嵌脚本都是如此

      3.有多种无阻塞下载js的方法

            3.1使用<script>标签的defer属性

            3.2使用动态创建的<script>元素来下载并执行代码

            3.3使用XHR对象下载js代码并注入页面中

通过以上策略,可以极大提高那些需要使用大量js的web应用的实际性能

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
IE的fireEvent方法概述及应用
Feb 22 Javascript
javascript中定义私有方法说明(private method)
Jan 27 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
JS隐藏号码中间4位代码实例
Apr 09 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
js实现聊天对话框
Feb 08 Javascript
关于axios如何全局注册浅析
Jan 14 #Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 #Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 #Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 #Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 #Javascript
vuejs实现递归树型菜单组件
Jan 13 #Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 #Javascript
You might like
使用php实现截取指定长度
2013/08/06 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
jQuery事件用法详解
2016/10/06 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
React简单介绍
2017/05/24 Javascript
Angular实现响应式表单
2017/08/04 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
Python程序退出方式小结
2017/12/09 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
Python制作豆瓣图片的爬虫
2017/12/28 Python
django query模块
2019/04/20 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
Python3 assert断言实现原理解析
2020/03/02 Python
如何将json数据转换为python数据
2020/09/04 Python
python os.listdir()乱码解决方案
2021/01/31 Python
捷克汽车配件和工具销售网站:TorriaCars
2018/02/26 全球购物
家得宝官网:The Home Depot(全球最大的家居装饰专业零售商)
2018/12/17 全球购物
东方通信股份有限公司VC面试题
2014/08/27 面试题
物业管理专业自荐信
2014/07/01 职场文书