高性能的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调用Session的实现代码
Oct 29 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
jquery 选取方法都有哪些
May 18 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
详解webpack3编译兼容IE8的正确姿势
Dec 21 Javascript
ES6顶层对象、global对象实例分析
Jun 14 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 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数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
JavaScript Konami Code 实现代码
2009/07/29 Javascript
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
浅谈django的render函数的参数问题
2018/10/16 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
python操作gitlab API过程解析
2019/12/27 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
同程旅游英文网站:LY.com
2018/11/13 全球购物
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
土木工程专业大学毕业生求职信
2013/10/13 职场文书
优秀生推荐信范文
2013/11/28 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
高中生旷课检讨书
2014/10/08 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
浅析MongoDB之安全认证
2021/06/26 MongoDB
为Centos安装指定版本的Docker
2022/04/01 Servers