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. 2. vsCode 安装GoCode

    1)安装gocode 打开命令提示符(以管理员身份打开),输入: go get -u -v github.com/nsf/gocode 开始下载: 下载完毕: 下载完成,查看D:\GoWorks目录, ...

  2. JAVA连接MYSQL8.0问题

    title: java连接mysql8.0问题 date: 2018-07-08 19:27:38 updated: tags: description: keywords: comments: im ...

  3. 6,id 小数据池,编码and解码。

    asscii :8位(数字,英文,特殊字符)表示一个字符. A:0000 0001 unicode :(万国码)初期:16位,两个字节,表示两个字符. A:0000 0001 0000 0001 中: ...

  4. 九度oj 题目1111:单词替换

    题目描述: 输入一个字符串,以回车结束(字符串长度<=100).该字符串由若干个单词组成,单词之间用一个空格隔开,所有单词区分大小写.现需要将其中的某个单词替换成另一个单词,并输出替换之后的字符 ...

  5. 让Sublime Text成为静态WEB服务器:SublimeServer

    如果你使用Sublime Text作为你的编辑器,那么在进行HTML和Java开发的时候有一个很有用的功能,帮你完成前端的联调测试,那就是Sublime Text的服务器插件:SublimeServe ...

  6. AVPlayerViewController视频播放器

    前言 iOS8之后系统自带使用AVPlayerViewController播放视频 AVPlayerViewController AVPlayerViewController和导航控制器差不多,需要将 ...

  7. iOS学习笔记07-运动事件和远程控制

    之前我们已经学习了触摸处理和手势识别,其实这两个同属于iOS事件的触摸事件,今天我们来学习下iOS事件的另外两个事件: 一.运动事件 运动事件,是通过加速器进行触发,和触摸事件一样,继承UIRespo ...

  8. POJ 1502 MPI Maelstrom【floyd】

    题目大意:求点1到所有点最短路径的最大值 思路:水题,单源最短路,网上解题清一色dijkstra,但是点数小于100显然floyd更简洁嘛 #include<cstdio> #includ ...

  9. P3694 邦邦的大合唱站队 (状压DP)

    题目背景 BanG Dream!里的所有偶像乐队要一起大合唱,不过在排队上出了一些问题. 题目描述 N个偶像排成一列,他们来自M个不同的乐队.每个团队至少有一个偶像. 现在要求重新安排队列,使来自同一 ...

  10. cf396B On Sum of Fractions

    Let's assume that v(n) is the largest prime number, that does not exceed n; u(n) is the smallest pri ...