Javascript无阻塞加载具体方式
看了《高性能JavaScript》的读书笔记
几个原则：
1、将脚本放在底部
<link>还是在head中，用以保证在js加载前，能加载出正常显示的页面。
<script>放在</body>前。
2、成组脚本
由于每个<script>标签下载时阻塞页面解析过程，所以限制页面的<script>总数也可以改善性能。适用于内联脚本和外部脚本。
3、非阻塞脚本
等页面完成加载后，再加载js代码。也就是，在window.load事件发出后开始下载代码。
（1）defer属性：支持IE4和fierfox3.5更高版本浏览器
<script defer>...</script>
内联和外部文件
带defer属性的<script>可出现在文档的任何位置，对应的js文件将在<script>被解析时启动下载，但代码不会执行，直到DOM加载完毕（在onload事件句柄被调用之前）。所以实现了和也卖弄其他资源一起并行下载。
（2）动态脚本元素
文档对象模型（DOM）允许你使用js动态创建HTML的几乎全部文档内容。
代码如下:
var script=document.createElement("script");
script.type="text/javascript";
script.src="file.js";
document.getElementByTagName_r("head")[0].appendChild(script);
此技术的重点在于：无论在何处启动下载，文件额下载和运行都不会阻塞其他页面处理过程。即使在head里（除了用于下载文件的http链接）。
（3）The YUI3 approach
理念：用一个很小的初始代码，下载其余的功能代码，先引入文件：
代码如下:
<script type="text/javascript src=http://zsrimg.ikafan.com/file_images/article/201306/yuanma/combo.js></script>
此种子文件大约10KB，
YUI().use("dom",function(Y){
Y.Dom.addclass(...)
})
当所有代码可用时，回调函数被调用，YUI实例作为参数传入，就可以立即使用新下载的功能。
The LazyLoad library
使用：先引入：lazyload-min.js
LazyLoad.js("a.js",function(){
Appliction.init();
})
LazyLoad.js(["a.js","b.js"],function(){
Application.init();
})
(5)The LABjs library
$LAB.script("a.js").wait(function(){
Application.init();
})
多个文件，就链式写法
他的独特之处在于能够管理依赖关系。
可以通过wait()函数指定哪些文件应该等待其他文件。
$LAB.script("a.js").wait().script("b.js").wait(function(){
Application.init();
})
这样，虽然两个文件是并行下载的，却能保证a.js能在b.js之前执行
相关推荐
-
js防阻塞加载的实现方法
如下所示: <script type="text/javascript"> function scriptDomElement (u) { var s = document.createElement('script'); h = document.getElementsByTagName('body')[0]; s.src = u; s.async = true; if(h)h.appendChild(s,h.firstChild); } scriptDomElement
-
JavaScript中的无阻塞加载性能优化方案
Javascript在浏览器中的性能,可以说是前端开发者所要面对的最重要的可用性问题. 在Yahoo的Yslow23条规则当中,其中一条是将JS放在底部 .原因是,事实上,大多数浏览器使用单进程处理UI和更新Javascript运行等多个任务,而同一时间只能有一个任务被执行.Javascript运行了多长时间,那么在浏览器空闲下来响应用户交互之前的等待时间就有多长. 从基本层面说,这意味着<script>标签的出现使整个页面因脚本解析.运行而出现等待.不论实际的 JavaScript 代码是内
-
完美解决JS文件页面加载时的阻塞问题
关于页面加载时的时间消费,许多书中都做出了介绍,也提出了很多种方法.本文章就详细介绍XHR注入. 概述:JS分拆的方法 1.XHR注入:就是用ajax异步请求同域包含脚本的文件,然后将返回的字符串转化为脚本使用,该方法不会造成页面渲染和onload事件的阻塞,因为是异步处理,推荐使用. 2.iframe注入:加载一个iframe框架,通过使用iframe框架中的脚本来避免src方式加载脚本的阻塞,但是iframe元素开销较大,不推荐. 3.DOM注入:就是创建script元素,通过制定该元素的s
-
Javascript无阻塞加载具体方式
看了<高性能JavaScript>的读书笔记 几个原则: 1.将脚本放在底部 <link>还是在head中,用以保证在js加载前,能加载出正常显示的页面. <script>放在</body>前. 2.成组脚本 由于每个<script>标签下载时阻塞页面解析过程,所以限制页面的<script>总数也可以改善性能.适用于内联脚本和外部脚本. 3.非阻塞脚本 等页面完成加载后,再加载js代码.也就是,在window.load事件发出后开始下
-
JavaScript无阻塞加载和defer、async详解
无阻塞加载 把js放在head里,浏览器是怎么去执行它的呢,是按顺序加载还是并行加载呢?在旧的浏览器下,都是按照先后顺序来加载的,这就保证了加载的js依赖不会发生问题.但是少部分新的浏览器已经开始允许并行加载js了,也就是说可以同时下载js文件,但是还是按先后顺序执行文件的. 下载是异步的没问题,但是每个javascript执行的时候还是同步的,就是先出现的script标签一定是先执行,即使是并行下载它是最后一个下载完成的,除非标有defer的script标签.任何javascript在执行的时
-
用js的document.write输出的广告无阻塞加载的方法
一.广告代码分析 很多第三方的广告系统都是使用document.write来加载广告,如下面的一个javascript的广告链接. 复制代码 代码如下: <script type="text/javascript" src="http://gg.5173.com/adpolestar/5173/;ap=2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC;ct=js;pu=5173;/?"></script> 这个java
-
无阻塞加载js,防止因js加载不了影响页面显示的问题
浏览器加载静态资源和js的方式都是线性加载,所以一般情况可以将js放到</body>前,防止UI线程的阻塞. 而某些时候我们既希望js在整个网页的头部就加载,又担心js阻塞导致网站加载缓慢,就可以用到无阻塞加载js技术. Dynamic Script Elements 动态脚本元素 DOM允许我们使用Javascript动态创建HTML的几乎所有文档内容,一个新的<script>元素可以非常容易的通过标准DOM创建: var script = document.createElem
-
重写document.write实现无阻塞加载js广告(补充)
无阻塞加载javascript,对于页面性能优化有很大的作用,这样能有效的减少js对页面加载的阻塞.特别是一些广告js文件,由于广告内容有可能是富媒体,更是很可能成为你页面加载提速的瓶颈,高性能javascript告诉我们,同学,提升你的网页速度,就无阻塞地加载JS吧. 于是便有一下代码出现. (function() { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.
-
无阻塞加载脚本分析[全]
由于浏览器是单线程的,因此脚本在载的时候会阻塞下载其它资源:虽然在现在浏览器已经有所改善,但仍然有待改进. 很显然,脚本必须按顺序执行,但没有必要按顺序下载,解决方法: 1.内嵌JS 通常由于页面大小和缓存能带来更多好处,因此外部文件引入JS更好一些: 在少数情况下,比如首页.少量JS情况下尚可接受. 2.XHR Eval 通过XMLHttpRequest从服务器端获取脚本. 主要缺陷是,通过XHR获取的脚本必须部署在和主页面相同的域中. 复制代码 代码如下: Ajax.get("test.js
-
5种JavaScript脚本加载的方式
javaScript文件(下面简称脚本文件)需要被HTML文件引用才能在浏览器中运行.在HTML文件中可以通过不同的方式来引用脚本文件,我们需要关注的是,这些方式的具体实现和这些方式可能会带来的性能问题. 当浏览器遇到(内嵌)<script>标签时,当前浏览器无从获知javaScript是否会修改页面内容.因此,这时浏览器会停止处理页面,先执行javaScript代码,然后再继续解析和渲染页面.同样的情况也发生在使用 src 属性加在javaScript的过程中(即外链 javaScript)
-
让浏览器非阻塞加载javascript的几种方法小结
浏览器为了确保正确执行脚本和呈现布局在浏览器加载和执行完成它之前会完全阻塞页面后续内容的呈现和其他资源的加载. 在页面的加载过程中如果可以做到内容的逐步呈现,对于良好的用户体验来说是非常重要的.通常我们也会在wondow对象的onload事件处理函数中做一些事情,但由于脚本阻塞加载和呈现的特性这一方面增加了页面载入时间推迟了onload事件的触发,另一方面也延迟了用户所期待的反馈.这就需要我们使用一些方法来让浏览器以非阻塞的方式加载外部脚本. 一 使用XMLHttpRequest对象异步方式
-
理解Javascript图片预加载
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效.