JavaScript-javascript加载方面的优化

JavaScript-javascript加载方面的优化

灵芸 发布于 2017-05-05 字数 179 浏览 1253 回复 8

很多浏览器都会使用单一的线程来做界面UI的更新和JS脚本的处理,加载的顺序以及数量影响着页面的方方面面,所以想向大家请教一下,在前端开发中,如何最大化的提高javascript的加载效率

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(8

夜无邪 2017-09-03 8 楼

另外支一招:把你的JavaScript打包成PNG文件

把你的JS和CSS添加到图片的末尾,然后用CSS来裁切,通过一次HTTP请求来获得应用程序中所需的所有信息。

我最近找到了这个方法。它基本上把你的JavaScript/css数据打包成PNG文件。之后,你可以拆包,只要使用画布API的getImageData()。此外,它非常高效。你可以在不缩小数据的情况下,多压缩35%左右。而且是无损压缩!我得指出,对比较庞大的脚本来说,在图片指向画布、读取像素的过程中,你会觉得有“一段”装入时间。

详情可参考:http://www.1stwebdesigner.com/design/load-JavaScript-faster/

虐人心 2017-09-03 7 楼

俺也来补充一下

尽量合并<script></script>标签。
文件尽量合并减少HTTP请求的次数。
采用延迟加载,什么时候用了再取加载(例如Jquery)。
采用面向对象技术编程,对象封装到不同文件中,减少加载代码的范围,因为JS是解释执行的。

归属感 2017-08-11 6 楼

我来补充几条:
1.压缩js文件
2.采用cdn或专门的静态资源服来存放js文件
3.利用ajax下载JavaScript代码并注入到页面中。

偏爱自由 2017-08-10 5 楼

我也来补充一点
一般加载js我们是这样做的

<script type="text/javascript" src="./resources/scripts/ext/ext-base.js">

说是这样快一点

document.write("<scr"+ipt src="XXX.js"></scri"+"pt>");

具体原因我也不是很清楚,希望大家可以指导一下
js加载加速

泛泛之交 2017-06-22 4 楼

使用Closure Tools改进JS代码。

偏爱自由 2017-05-30 3 楼

减少JS的Reflow/paint
这是JS引擎工作的原理流程图,希望对你有作用

浮生未歇 2017-05-30 2 楼

1:建议把与网站功能不太相关的<script>放在<body>底部。
2:合并js文件,减少文件下载数量。即使http1.1的持久化连接,每个http请求仍然会有一个RTT延时,所以一个100k文件要比4个25k文件下载速度快。
3:采用<script>defer属性,文件下载完毕以后不会立即执行js,直到整个页面document创建完毕以后,才开始执行。
4:动态创建script 节点,会立即下载js文件并执行,这样会有一个问题,如果动态创建多个节点,有引用关系。由于无法保证加载执行的顺序,可能会导致文件执行错误。

比较流行的非阻塞加载模式:
YUI3http://developer.yahoo.com/yui/3/
LazyLoadhttp://github.com/rgrove/lazyload/
LABjshttp://labjs.com/
ControlJShttp://stevesouders.com/controljs/

ControlJS介绍:用ControlJS优化JavaScript加载速度

浮生未歇 2017-05-07 1 楼

带宽
使用CDN
压缩js、css,图片优化
HTTP优化
减少转向
减少请求数
缓存
尽早Flush
使用gzip
减少cookie
使用GET
DNS优化
减少域名解析时间
增多域名提高并发
JavaScript
放页面底部
defer/async
CSS
放页面头部
避免@import
其它
预加载

为了应对DNS查询的延迟问题,一些新的浏览器会缓存或预解析DNS,如当Chrome访问google页面的搜索结果时,它会取出链接中的域名进行预解析

当然,Chrome并不是每次都将页面中的所有链接的域名都拿来预解析,为了既提升用户体验又不会对DNS造成太大负担,Chrome做了很多细节的优化,Chrome在启动时还会预先解析用户常去的网站,,当前Chrome中的DNS缓存情况可以通过net-internals页面来察看。
为了帮助浏览器更好地进行DNS的预解析,可以在html中加上以下这句标签来提示浏览器
<link rel="dns-prefetch" href="//HOSTNAME.com">
除此之外还可以使用HTTP header中的X-DNS-Prefetch-Control来控制浏览器是否进行预解析,它有on和off两个值。

由于Web页面加载是同步模型,这意味着浏览器在执行js操作时需要将后续html的加载和解析暂停,因为js中有可能会调用document.write来改变dom节点,很多浏览器除了html之外还会将css的加载暂停,因为js可能会获取dom节点的样式信息,这个暂停会导致页面展现速度变慢,为了应对这个问题,Mozilla等浏览器会在执行js的同时简单解析后面的html,提取出链接地址提前下载,注意这里仅是先下载内容,并不会开始解析和执行
这一行为还可以通过在页面中加入以下标签来提示浏览器
<link rel="prefetch" href="http://">
只有Mozilla真正实现了该功能,可以看看Link prefetching
WebKit也在尝试该功能,具体实现是在HTMLLinkElement的process成员函数中,它会调用ResourceHandle::prepareForURL()函数,目前从实现看它是仅仅用做DNS预解析的,和Mozilla对这个属性的处理不一致
对于不在当前页面中的链接,如果需要预下载后续内容可以用js来实现

预下载后续内容还能做很多细致的优化,如在Velocity China
2010中,来自腾讯的黄希彤介绍了腾讯产品中使用的交叉预下载方案,利用空闲时间段的流量来预加载,这样即提升了用户访问后续页面的速度,又不会影响到高峰期的流量,值得借鉴 。

使用get请求来提高性能

首先性能因素不应该是考虑使用get还是post的主要原因,首先关注的应该是否符合HTTP中标准中的约定,get应该用做数据的获取而不是提交
之所以用get性能更好的原因是有测试表明,即使数据很小,大部分浏览器(除了Firefox)在使用post时也会发送两个TCP的packet,所以性能上会有损失

frame
从实现上看,frame类(包括iframe和frameset)的标签是最耗时的,而且会导致多一个请求,所以最好减少frame数量

resticted
如果要嵌入不信任的网站,可以使用这个属性值来禁止页面中js、ActiveX的执行,可以参考msdn的文档
<iframe security="restricted" src=""></iframe>

javascript加载
对于html的script标签,如果是外链的情况,如:
<script src="a.js"></script>
浏览器对它的处理主要有2部分:下载和执行
下载在有些浏览器中是并行的,有些浏览器中是串行的,如IE8、Firefox3、Chrome2都是串行下载的
执行在所有浏览器中默认都是阻塞的,当js在执行时不会进行html解析等其它操作,所以页面顶部的js不宜过大,因为那样将导致页面长时间空白,对于这些外链js,有2个属性可以减少它们对页面加载的影响,分别是:

 async
标识js是否异步执行,当有这个属性时则不阻塞当前页面的加载,并在js下载完后立刻执行
不能保证多个script标签的执行顺序
defer
标示js是否延迟执行,当有这个属性时js的执行会推迟到页面解析完成之后
可以保证多个script标签的执行顺序

document.write

document.write是不推荐的api,对于标示有async或defer属性的script标签,使用它会导致不可预料的结果,除此之外还有以下场景是不应该使用它的:

 使用document.createElement创建的script
事件触发的函数中,如onclick
setTimeout/setInterval

简单来说,document.write只适合用在外链的script标签中,它最常见的场景是在广告中,由于广告可能包含大量html,这时需要注意标签的闭合,如果写入的内容很多,为了避免受到页面的影响,可以使用类似Google AdSense的方式,通过创建iframe来放置广告,这样做还能减少广告中的js执行对当前页面性能的影响