1.起因:  

  每次遇到<script> 标签时,页面必须停下来等待代码下载并执行完,然后再继续处理其他部分。

2.减少JavaScript对性能的影响

  1.将所有的JavaScript文件放在</body>前,这能确保脚本执行前页面已经完成了渲染。

  2.合并脚本。页面中的<script>标签越少,加载也就越快,响应也就更迅速。无论外链脚本还是内嵌脚本。

  3.有多种无阻塞下载JavaScript方法:

    1.使用<script>的defer属性,async属性(IE)

    2.使用动态创建的<script>元素来下载并执行代码

    

function loadScript(url, callback){
var script = document.createElement('script');
script.type = "text/javascript";
if(script.readyState){ //IE9以下
script.onreadystatechange = function(){
if(script.readyState=='complete'||script.readyState=='loaded'){
callback();
}
}
}else{
script.onload = function () {
//firefox chrome safair opera
callback();
}
}
script.src = url;
document.head.appendChild(script);
}

    3.使用XHR对象下载JavaScript代码并注入页面中

  

加载和执行 --《高性能JavaScript》的更多相关文章

  1. [转]JavaScript 的性能优化:加载和执行

    原文链接:http://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/index.html?ca=drs- JavaScript 的性能优化: ...

  2. 【转】js JavaScript 的性能优化:加载和执行

    JavaScript 的性能优化:加载和执行 转自:https://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/ 随着 Web2.0 技术的 ...

  3. JavaScript 的性能优化:加载和执行

    随着 Web2.0 技术的不断推广,越来越多的应用使用 javascript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 ...

  4. 浏览器中Javascript的加载和执行

    在刚学习Javascript时曾对该问题在小组内做个一次StudyReport,发现其中的基础还是值得分析的. 从标题分析,可以加个Javascript的加载和执行分为两个阶段:加载.执行.而加载即浏 ...

  5. 高性能JavaScript-JS脚本加载与执行对性能的影响

    在web产品优化准则中,很重要的一条是针对js脚本的加载和执行方式的优化.本篇文章简单描述一下其中的优化准则. 1. 脚本加载优化 1.1 脚本位置对性能的影响 优化页面加载性能的原则之一是将scri ...

  6. 怎么样加快JavaScript加载和执行效率

    概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载 ...

  7. 浏览器环境下Javascript脚本加载与执行探析之DOMContentLoaded

    在”浏览器环境下Javascript脚本加载与执行探析“系列文章的前几篇,分别针对浏览器环境下JavaScript加载与执行相关的知识点或者属性进行了探究,感兴趣的同学可以先行阅读前几篇文章,了解相关 ...

  8. 浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入

    在<浏览器环境下JavaScript脚本加载与执行探析之defer与async特性>中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机.浏览器支持情况.浏览器bug以及 ...

  9. 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性

    defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异 ...

  10. 如何正确的加载和执行 JavaScript 代码

    无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载和执行 ...

随机推荐

  1. List<T> List<?> 区别用法

    List<T>是泛型方法,List<?>是限制通配符 List<T>一般有两种用途:1.定义一个通用的泛型方法.伪代码: public interface Dao{ ...

  2. node.js中的http.request方法使用说明

    http.get(options, callback) 由于该方法属于http模块,使用前需要引入http模块(var http= require(“http”) ) 接收参数: option   数 ...

  3. 学习笔记6——插件 API,“过滤器”(Filters)和“动作”(Actions)

    WordPress 中有一种叫执行挂勾的机制,允许插件把一些功能“挂载”到 WordPress 当中.也就是说,在系统运行至某一个环节时,去调用插件内的一些函数.执行挂勾分为两种: 动作 (Actio ...

  4. Leetcode 331.验证二叉树的前序序列化

    验证二叉树的前序序列化 序列化二叉树的一种方法是使用前序遍历.当我们遇到一个非空节点时,我们可以记录下这个节点的值.如果它是一个空节点,我们可以使用一个标记值记录,例如#. 例如,上面的二叉树可以被序 ...

  5. 九度oj 题目1335:闯迷宫

    题目描述: sun所在学校每年都要举行电脑节,今年电脑节有一个新的趣味比赛项目叫做闯迷宫.sun的室友在帮电脑节设计迷宫,所以室友就请sun帮忙计算下走出迷宫的最少步数. 知道了最少步数就可以辅助控制 ...

  6. P3146 [USACO16OPEN]248 (区间DP)

    题目描述  给定一个1*n的地图,在里面玩2048,每次可以合并相邻两个(数值范围1-40),问最大能合出多少.注意合并后的数值并非加倍而是+1,例如2与2合并后的数值为3. 这道题的思路: 状态: ...

  7. Office 中的各种小tips(更新中)

    1.Word 中打字输入会擦掉之后原有字符,出现“吃字”的情况? 要将“改写”切换为“插入”,最简单的方法就是点击键盘上小键盘旁边的“insert”键. 其实仔细观察的话,在word文档下方,会看到如 ...

  8. Elixir与编辑器安装

    安装 Elixir 每个操作系统的安装说明可以在 elixir-lang.org 网站上 Installing Elixir 部分找到. 安装后你可以很轻松地确认所安装的版本. ~$:elixir - ...

  9. 输出重定向、cat、系统别名、查看指定行、时间戳

    1.touch命令:如果文件不存在则创建,如存在则更新时间戳;2.除了echo有向文件写入内容的功能,cat也可以; cat > hehe # 输出重定向 cat >> hehe # ...

  10. Windows Phone 8.1 开发实例 网络编程 天气预报

    首先感谢林政老师的博客,给了我很大的指导. 准备工作 我的开发环境: - Visual Studio 2013(With Update 4) - Windows Phone 8.1 - Windows ...