网页性能优化之异步加载js文件
一个网页的有很多地方可以进行性能优化,比较常见的一种方式就是异步加载js脚本文件。在谈异步加载之前,先来看看浏览器加载js文件的原理。
浏览器加载 JavaScript 脚本,主要通过
<script>
元素完成。正常的网页加载流程是这样的。
- 浏览器一边下载 HTML 网页,一边开始解析。也就是说,不等到下载完,就开始解析。
- 解析过程中,浏览器发现
<script>
元素,就暂停解析,把网页渲染的控制权转交给 JavaScript 引擎。- 如果
<script>
元素引用了外部脚本,就下载该脚本再执行,否则就直接执行代码。- JavaScript 引擎执行完毕,控制权交还渲染引擎,恢复解析 HTML 网页。
加载外部脚本时,浏览器会暂停页面渲染,等待脚本下载并执行完成后,再继续渲染。原因是 JavaScript 代码可以修改 DOM,所以必须把控制权让给它,否则会导致复杂的线程竞赛的问题。
上面所说的,就是我们平时最常见到的,将<script>
标签放到<head>
中的做法,这样的加载方式叫做同步加载,或者叫阻塞加载,因为在加载js脚本文件时,会阻塞浏览器解析HTML文档,等到下载并执行完毕之后,才会接着解析HTML文档。如果加载时间过长(比如下载时间太长),就会造成浏览器“假死”,页面一片空白。而且,放在<head>
中同步加载的js文件中不能对DOM进行操作,否则会产生错误,因为这个时候HTML还没有进行解析,DOM还没有生成。由此看来,同步加载带来的体验往往并不好。
下面我们来看几种异步加载的方式。
将
<script>
标签放到<body>
底部严格来说,这并不算是异步加载,但是这也是常见的通过改变js加载方式来提升页面性能的一种方式,所以也就放到这里来说。
将
<script>
放到<body>
底部,解决上上面说到的几个问题,一是不会造成页面解析的阻塞,就算加载时间过长用户也可以看到页面而不是一片空白,而且这时候可以在脚本中操作DOM。defer
属性通过给
<script>
标签设置defer
属性,将脚本文件设置为延迟加载,当浏览器遇到带有defer
属性的<script>
标签时,会再开启一个线程去下载js文件,同时继续解析HTML文档,等等HTML全部解析完毕DOM加载完成之后,再去执行加载好的js文件。这种方式只适用于引用外部js文件的
<script>
标签,可以保证多个js文件的执行顺序就是它们在页面中出现的顺序,但是要注意,添加defer
属性的js文件不应该使用document.write方法。async
属性async
属性和defer
属性类似,也是会开启一个线程去下载js文件,但和defer
不同的时,它会在下载完成后立刻执行,而不是会等到DOM加载完成之后再执行,所以还是有可能会造成阻塞。同样的,
async
也是只适用于外部js文件,也不能在js中使用document.write方法,但是对多个带有async
的js文件,它不能像defer那样保证按顺序执行,它是哪个js文件先下载完就先执行哪个。动态创建
<script>
标签可以通过动态地创建
<script>
标签来实现异步加载js文件,例如下面代码:(function(){var scriptEle = document.createElement("script");scriptEle.type = "text/javasctipt";scriptEle.async = true;scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js";var x = document.getElementsByTagName("head")[0];x.insertBefore(scriptEle, x.firstChild); })(); 复制代码
或者
(function(){if(window.attachEvent){window.attachEvent("load", asyncLoad);}else{window.addEventListener("load", asyncLoad);}var asyncLoad = function(){var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);} })(); 复制代码
上面两种方法中,第一种方式执行完之前会阻止onload事件的触发,而现在很多页面的代码都在onload时还执行额外的渲染工作,所以还是会阻塞部分页面的初始化处理。第二种则不会阻止onload事件的触发。
这里要简要说明一下
window.DOMContentLoaded
和window.onload
这两个事件的区别,前者是在DOM解析完毕之后触发,这时候DOM解析完毕,JavaScript可以获取到DOM引用,但是页面中的一些资源比如图片、视频等还没有加载完,作用同jQuery中的ready事件。后者则是页面完全加载完毕,包括各种资源。
说完了这几种常见的异步加载js脚本的方式,再来看最后一个问题,什么时候用defer
,什么时候用async
呢?一般来说,两者之间的选择则是看脚本之间是否有依赖关系,有依赖的话应当要保证执行顺序,应当使用defer
没有依赖的话使用async
,同时使用的话defer
失效。要注意的是两者都不应该使用document.write,这个导致整个页面被清除。
下面一幅图表明了同步加载以及defer
、async
加载时的区别,其中绿色线代表 HTML 解析,蓝色线代表网络读取js脚本,红色线代表js脚本执行时间:
网页性能优化之异步加载js文件相关推荐
- 异步加载js文件并执行js方法:实现异步处理网页的复杂效果
异步加载js文件并执行js方法:实现异步处理网页的复杂效果 有这么一个场景,当你的网页页面效果过多就会造成了打开页面的速度变得缓慢,长时间处于加载的状态,这样的效果通常会让用户感到不友好,通常的处理方 ...
- 异步加载js文件的方法总结
方法一,jQuery.getScript HTML 代码: 代码如下 复制代码 <button id="go">Run</button> <div c ...
- 异步加载js的三种方法
js加载时间线 : 它是根据js出生的那一刻开始记录的一系列浏览器按照顺序做的事,形容的就是加载顺序,可以用来优化什么东西,理论基础,背下来. 1.创建Document对象,开始解析web页面.解析H ...
- yepnope.js 异步加载资源文件
yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本,可以在页面上仅加载用户需要的js/css. yepnope的优点: 可以同时处理javascript以及css 能够按条件 ...
- phoneGap异步加载JS失败
现在正在做一个phoneGap项目,安卓平台,有个异步加载JS总是失败,phoneGap也不好调试,一个问题纠结了一下午 最后找了半天,找到了原因,因此写本文记录一下,也顺便帮帮遇到同样问题的人 原因 ...
- angularjs 路由 异步加载js
angularjs 异步加载js 有两种方法 第一种 使用$q 和 requireJS 加载 这个问题 首要出现 在 当我 把require 引入 项目中是,希望做到 点击路由时加载相应的页面htm ...
- 请给出异步加载js方案
请给出异步加载js方案,不少于两种 默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很 ...
- 利用jQuery的deferred异步按顺序加载JS文件
前段时间看了阮一峰的jQuery的deferred对象详解一文,对jQuery中的deferred的用法了一些了解,今天看到园子里的一篇文章:关于重构JS前端框架的失败经验(顺便怀念那些死去的代码), ...
- yepnope.js – 异步加载资源文件
yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本,可以在页面上仅加载用户需要的js/css. 典型代码示例 yepnope({test : Modernizr.geoloc ...
最新文章
- 从言行合一到知行合一
- 暗通道优先的图像去雾算法(下)
- syslog可能引起得问题_牙齿经常有问题?可能是这4个坏习惯引起的,要改正
- java创建链表成绩管理系统_成绩管理系统 链表版
- SpringMVC注解驱动开发
- Nodejs 批量检测 Excel 中url链接是否可访问
- javascript将页面设为首页代码大全
- 临湘东经子午线经度_经纬度与中央子午线查询表(精确到县级)
- 用asp.net写的一个购物网站
- 使用flask从零构建自动化运维平台系列三
- Linux下使用crontab来执行定时任务计划----执行每晚12点多执行移动log日志文件操作
- apm软件仿真+QGC地面站 环境搭建
- day25 Scala编cala编译器安装 3.1.	安装JDK 因为Scala是运行在JVM平台上的,所以安装Scala之前要安装JDK 3.2.	安装Scala 3.2.1.	Windows基础
- [信息论与编码]离散信源及其信息测度(2)
- Git | 登录验证失效问题
- 风丘科技为您提供电动汽车高压测试方案
- 什么是 NFT 洗盘交易:洗盘交易背后的原理
- Python之CSV文件操作
- 浪潮超融合服务器虚拟机管理,浪潮联合VMware发布新一代超融合一体机
- 2021年广东专插本计算机专业学校,2021年广东省专插本学校名单和专业,广东专插本有哪些学校和那些专业...