高性能的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 相关文章推荐
extjs 列表框(multiselect)的动态添加列表项的方法
Jul 31 Javascript
jQuery函数的等价原生函数代码示例
May 27 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
JavaScript实现页面5秒后自动跳转的方法
Apr 16 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
js实现二级导航功能
Mar 03 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 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
咖啡知识大全
2021/03/03 新手入门
PHP脚本数据库功能详解(中)
2006/10/09 PHP
JS实现php的伪分页
2008/05/25 PHP
php 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
通过隐藏option实现select的联动效果
2009/11/10 Javascript
JavaScript中的prototype使用说明
2010/04/13 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
在Python中实现字典反转案例
2020/12/05 Python
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
Currentbody西班牙:美容仪专家
2019/09/28 全球购物
中式餐厅创业计划书范文
2014/01/23 职场文书
消防工作实施方案
2014/06/09 职场文书
会计求职自荐信
2015/03/26 职场文书