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. 向php数组添加元素的方法哪种更高效

    $arr = array(); // 第一种 array_push($arr, 'test'); // 第二种 $arr[] = 'test'; 参考PHP官方文档:http://php.net/ma ...

  2. 【java 基础 9】原来我从没有了解过String类

    导读:这两天没有做项目,然后就想着把之前在项目中用到过的东西总结总结.记得之前做今日开讲项目时,在比较学生学号的时候,我最开始用的是"==",但是,实践证明,这个玩意儿吧,总是很奇 ...

  3. HDU 4417 Super Mario(划分树问题求不大于k的数有多少)

    Super Mario Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  4. POJ-1200 Crazy Search,人生第一道hash题!

                                                        Crazy Search 真是不容易啊,人生第一道hash题竟然是搜博客看题解来的. 题意:给你 ...

  5. Python之窗口操作之find_window,set_foreground等

    在自动化测试过程中,常常需要模拟按键的操作,比如像窗口发送一个按键,实现鼠标点击的功能,在上一篇文章中,我和大家讨论了python文件生成为不依赖与python库的exe文件的方式(需要了解的朋友戳这 ...

  6. 雅礼培训 Problem A 【线段树】

    题意 维护一段区间,支持求区间最大值,区间且,区间或 \(n,q<=2*10^5\) 题解 我们用线段树维护区间最大值 对于and和or运算, and实质就是强行把一些位改为0 or实质就是强行 ...

  7. Sql Server 中的 @@ERROR

    @@ERROR:当前一个语句遇到错误,则返回错误号,否则返回0.需要注意的是@ERROR在每一条语句执行后会被立刻重置,因此应该在要验证的语句执行后检查数值或者是将它保存到局部变量中以备将来使用. D ...

  8. linux 安装软件出现/tmp 磁盘不足时 解决方案

    1.解决办法 mkdir  文件夹——你可以使用的文件夹 比如说 mkdir /mnt/tmp 然后只要export TMPDIR=/mnt/tmp 这样就不会出现 tmp文件夹不够用的情况

  9. C# 判断上传图片是否被PS修改过的方法

    今天在网上发现一个判断图片是否被Photoshop修改过的方法.发现还不错,呵呵.摘录下来. 讲下基本的原理:其实每张被photoshop修改过的图片都会有Adobe Photoshop这样的字样在图 ...

  10. java中执行JS脚本

    package 测试包; import javax.script.*; public class SSSSSSSSS { public SSSSSSSSS() { // TODO Auto-gener ...