微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

《高性能 JavaScript》读书笔记(一)

2016-01-12 20:03 前端大全

(点击上方,可快速关注)


来源:clearbug

网址:http://www.cnblogs.com/craftsman-gao/p/5087111.html


一. 加载和执行——优化JavaScript规则:


1. 将脚本放在底部;

2. 减少页面中外链脚本文件的数量:

  

比如,下载单个100kb的文件将比下载4个25kb的文件更快。这个可以通过离线打包工具或者类似Yahoo!combo handler的实时在线服务来实现;

3. HTML4为标签定义了一个扩展属性:defer:

 

指明本元素所含的脚本不会修改DOM,因此代码能安全的延迟执行,例如:


<script type="text/javascript" src="file1.js" defer></script>

  

带有defer属性的标签可以放置在文档任何位置,对应的js文件将在页面解析到标签时开始下载,但并不会执行,直到DOM加载完成(onload事件被触发之前)。当一个带有defer属性的JavaScript文件下载时,它不会阻塞浏览器的其他进程,因此这类文件可以与页面中的其他资源并行下载。

  

世界每天在变化,前端也不例外。关于defer,还有async,最新情况请看:https://html.spec.whatwg.org/mul … l#attr-script-defer。简单总结如下:

    

①defer、async只能用于外链文件;

②既没有设置defer,也没有设置async时,脚本文件按在页面中出现的位置加载执行,并且阻塞页面解析; 

③若设置了defer,脚本文件按在页面中出现的位置加载,并且不会阻塞页面解析,等页面解析完onload事件被触发前执行; 

④若设置了async,脚本文件按在页面中出现的位置加载执行,加载过程不会阻塞页面解析,执行过程会阻塞页面解析;  

⑤既设置async,也设置了defer,因为各浏览器的效果不同,请自行检测。


4. 动态脚本元素:


var script = document.getElement("script");

script.type = "text/javascript";

script.src = "file1.js";

document.getElementsByTagName("head")[0].appendChild(script);


进一步封装:


function loadScript(url, callback){

var script = document.createElement("script");

script.type = "text/javascript";

if(script.readyState){//使用特征检测(Feature detection)IE

script.onreadystatechange = function(){

if(script.readyState == "loaded" || script.readyState == "complete"){

script.onreadystatechange = null;

callback();

}

};

}else{//其他浏览器

script.onload = function(){

callback();

};

}

script.src = url;

document.getElementsByTagName("head")[0].appendChild(script);

}


5. XMLHttpRequest 脚本注入:


var xhr = new XMLHttpRequest();

xhr.open('get', 'file1.js', true);

xhr.onreadystatechange = function(){

if(xhr.readyState === 4){

if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){

var script = document.createElement('script');

script.type = 'text/javascript';

script.text = xhr.responseText;

document.body.appendChild(script);

}

}

};



【今日微信公号推荐↓】

 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 Java 设计模式——外观模式 Web系统架构:巴黎城市化所带来的启示 如何实现移动端和电脑端共屏?方法其实很简单。 我都出镜了,你还有啥不敢看的!羞射 Google Java编程风格指南