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

1. 将脚本放在底部;
2. 减少页面中外链脚本文件的数量:

  比如,下载单个100kb的文件将比下载4个25kb的文件更快。这个可以通过离线打包工具或者类似Yahoo!combo handler的实时在线服务来实现;
3. HTML4为<script>标签定义了一个扩展属性:defer:

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

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

  带有defer属性的<script>标签可以放置在文档任何位置,对应的js文件将在页面解析到<script>标签时开始下载,但并不会执行,直到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);
}
}
};

《高性能 JavaScript》读书笔记(一)的更多相关文章

  1. 《html5 从入门到精通》读书笔记(一)

    今天看了<html5 从入门到精通>这本书,感觉阅读下来很舒心,不像阅读其他书籍很揪心.html增加的知识点,我觉得非常有价值,看完几章记录了一些内容,不但能巩固,也为下次遗忘知识点做好准 ...

  2. HTML5从入门到精通(明日科技) 中文pdf扫描版

    HTML5从入门到精通(明日科技) 中文pdf扫描版

  3. HTML5从入门到精通(千锋教育)免费电子版+PDF下载

    本书是HTML5初学者极好的入门教材之一,内容通俗易懂.由浅入深.循序渐进.本书内容覆盖全面.讲解详细,其中包括标签语义化.标签使用规范.选择器类型.盒模型.标签分类.样式重置.CSS优化.Photo ...

  4. Unity Shader入门精要读书笔记(一)序章

    本系列的博文是笔者读<Unity Shader入门精要>的读书笔记,这本书的章节框架是: 第一章:着手准备. 第二章:GPU流水线. 第三章:Shader基本语法. 第四章:Shader数 ...

  5. Oracle从入门到精通----学习笔记

    书名:<Oracle从入门到精通:视频实战版>秦靖.刘存勇等编著 第4章 SQL基础 1.SQL语言分类 数据定义语言 --- DDL,Data Definition Language 数 ...

  6. MySQL数据库应用 从入门到精通 学习笔记

    以下内容是学习<MySQL数据库应用 从入门到精通>过程中总结的一些内容提要,供以后自己复现使用. 一:数据库查看所有数据库: SHOW DATABASES创建数据库: CREATE DA ...

  7. Unity Shader入门精要读书笔记(二)UnityShader概述

    第三章<UnityShader概述>的读书笔记: 1.Unity Shader模板提供了几种选择: 标准光照模型(新添加的基于物理的渲染方法) 不含光照的基本的顶点.片元着色器 屏幕后处理 ...

  8. 《html5 从入门到精通》读书笔记(二)

    接着上面继续记录笔记,这次要记的知识点比较多...记录下我认为比较重要的东西. 一.表单属性 1.autocomplete属性 该属性规定form或input域应该拥有自动完成功能. <form ...

  9. 《html5 从入门到精通》读书笔记(三)

    二.标签详解 标签 描述 4 5 <form> 定义表单. 4 5 <h1> to <h6> 定义标题1到标题6. 4 5 <head> 定义关于文档的 ...

  10. 《HTML5 CANVAS基础教程》读书笔记

    一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...

随机推荐

  1. iOS 在TabViewController中的一个ViewController跳转到另一种ViewController

    第一步: #import "AppDelegate.h" 步骤二: 在须要跳转的地方: AppDelegate *appDelegate = (AppDelegate *)[[UI ...

  2. => 朗姆达表达式带入符号

    => 是朗姆达表达式中的用法,是指向的意思具体就是是把=>左边声明的变量带入到=>右边的表达式或者代码段里.

  3. OpenCV在MFC图像控件内显示图像

    1.依照文章<OpenCV+MFC显示图像>,完毕配置. 2.创建对应的图像控件,button控件. 3.进行类型转换. 在当前OpenCV2版本号内,图像格式为cv::Mat ,而该格式 ...

  4. 使用dfs实现1至n全阵列

    使用dfs实现1至n全阵列. 我的方法是从所述第一位置开始,使用dfs看上去就像每个头号位置, 当某个位置.从小到大枚举1至n所有号码,打假说 尚未使用之前在这个位置上的几个选择这个号码.然后搜索下 ...

  5. WPF技术触屏上的应用系列(三): 视频播放器的使用及视频播放、播放、暂停、可拖动播放进度效果实现

    原文:WPF技术触屏上的应用系列(三): 视频播放器的使用及视频播放.播放.暂停.可拖动播放进度效果实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统,5 ...

  6. Java 对象的生命周期

    Java对象的生命周期 在Java中,对象的生命周期包含下面几个阶段: 1.      创建阶段(Created) 2.      应用阶段(In Use) 3.      不可见阶段(Invisib ...

  7. ubuntu下一个jboss-seam-2.2.2.Final/examples/build.xml:754: warning: &#39;includeantruntime&#39; was not set

    [javac] /home/huihui/app/jboss-seam-2.2.2.Final/examples/build.xml:754: warning: 'includeantruntime' ...

  8. redmine 出口中国的乱码

    pdf 这是redmine的bug.必须在个人账户更改将设立中国语文,足够的人才来解决. 顺便说一下,提示.以下更改文件的方法是无效的 /home/redmine/redmine-2.5.1/lib/ ...

  9. windows-install-python-and-sphinx(*.rst file)

    http://sphinx-doc.org/install.html#windows-install-python-and-sphinx

  10. Server SAN:弄潮儿云计算时代

    最初发表于<程序猿>2014年7每月一次. 4月30日本.Redhat公布1.71十亿收购Ceph开发商Inktank公司,加上之前2011年10月1.36十亿收购Gluster,Redh ...