当浏览器遇到 <script> 标签时，它是没办法知道 JavaScript 是否会向DOM中添加内容或引入其他元素，甚至关闭某一个标签。因此这个时候浏览器就会停止处理页面，先执行JavaScript代码，然后再继续解析和渲染页面。

改善

将<script>标签放到 <body>的底部，尽量减少对整个页面下载的影响。

减少<script>标签的数量，不仅仅是外链脚本，内嵌的脚本数量同样也要限制。（合并）

无阻塞脚本

无阻塞脚本的秘诀在于，在页面加载完成后才加载<script>代码，这意味着在 window 对象的 load 事件触发后再下载脚本

实现方式

在HTML 4 中为 <script> 标签定义了一个扩展属性：defer。这个属性在之前是只有IE4+ 和 Firefox3.5+的浏览器支持。不过现在已被所有主流浏览器支持。在HTML 5规范中引入了 async 属性，用于异步加载脚本，async 和 defer 的相同点是采用并行下载，在下载过程中不会产生阻塞，区别在于执行时间，async 是加载完成后自动执行，而 defer 需要等待页面完成后执行。

其中蓝色代表js脚本网络加载时间，红色代表js脚本执行时间，绿色代表html解析。

另一种无阻塞加载脚本的方式是使用 XMLHttpRequest(XHR)对象，用get请求一个文件，请求好了。然后创建动态脚本，最后添加进去。缺陷：文件要再请求页面的同一个域。不能从cdn下载。

开源无阻塞脚本加载工具：LazyLoad，LABjs

小结：

界面绘制的时候，每次遇到<script>标签，页面都会停下来等待代码的下载（外链）并执行然后继续往下处理

优化：

</body>闭合标签之前，将所有的<script>标签放到页面底部，确保在脚本纸行前页面已经完成了渲染。

合并脚本文件，<script>标签越少，加载越快，相应也更迅速。不管是外链还是内嵌。

多种无阻塞下载JavaScript的方法

  • 使用<script> defer，async属性
  • 动态创建<script>元素下载并执行代码
  • 使用 XHR 对象下载 JavaScript 代码并注入代码。

高性能JavaScript（加载和执行）的更多相关文章

  1. 高性能JavaScript 加载和执行

    前言 本章主要讲述如何加载脚本使得用户能有良好的用户体验,而核心内容就是JavaScript的异步加载.之前写过一篇不得不说的JavaScript异步加载,相似的内容就不多加描述,讲些不同的东西,主要 ...

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

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

  3. 加快JavaScript加载和执行效率

    JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其 ...

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

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

  5. [转]JavaScript 的性能优化：加载和执行

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

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

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

  7. JavaScript 的性能优化：加载和执行

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

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

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

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

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

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

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

随机推荐

  1. 主成分分析（PCA）原理详解（转载）

    一.PCA简介 1. 相关背景 上完陈恩红老师的<机器学习与知识发现>和季海波老师的<矩阵代数>两门课之后,颇有体会.最近在做主成分分析和奇异值分解方面的项目,所以记录一下心得 ...

  2. (转)Linux 系统监控、诊断工具之 top命令详解

    原文:https://www.linuxidc.com/Linux/2014-12/110563.htm 目录 (1)系统.任务统计信息:(2)进程. cpu 统计信息:(3)最后两行为内存信息:3. ...

  3. C++：运算符重载

    运算符重载是一种形式的C++多态.运算符重载将重载的概念扩展到运算符上,允许赋予C++运算符多种含义.实际上,很多C++运算符已经被重载.eg:将*运算符用于地址,将得到存储在这个地址中的值,将他用于 ...

  4. 第k大的数

    问题描述:输入一组数,指定一个k,输出这组数里第k大的数. 一般这种题目,第一想法是把整个数组先排序后,再选取第k位的数.但是这样做实际上浪费了大量的时间在排序上,我们只是要求第k大的数,并非要把整个 ...

  5. 对称加密-AES

    假设有一个发送方在向接收方发送消息.如果没有任何加密算法,接收方发送的是一个明文消息:“我是小灰”. 如果消息被中间人截获到,即使中间人无法篡改消息,也可以窥探到消息的内容,从而暴露了通信双方的私密. ...

  6. Unity生成WebService代理类

    普通的.net程序中,如果我们想引用webService,只需在项目中右键选择添加服务引用,然后在地址栏中输入Webservice地址,单击“转到”按钮,找到服务后再单击确定,Visual Studi ...

  7. Java 8 新特性-菜鸟教程 (4) -Java 8 默认方法

    Java 8 默认方法 Java 8 新增了接口的默认方法. 简单说,默认方法就是接口可以有实现方法,而且不需要实现类去实现其方法. 我们只需在方法名前面加个default关键字即可实现默认方法. 为 ...

  8. JavaScript 内存泄露以及如何处理

    一.前言 一直有打算总结一下JS内存泄露的方面的知识的想法,但是总是懒得提笔. 富兰克林曾经说过:懒惰,像生鏽一样,比操劳更能消耗身体,经常用的钥匙总是亮闪闪的.安利一下,先起个头. 二.内存声明周期 ...

  9. UVa 12657 Boxes in a Line（数组模拟双链表）

    题目链接 /* 问题 将一排盒子经过一系列的操作后,计算并输出奇数位置上的盒子标号之和 解题思路 由于数据范围很大,直接数组模拟会超时,所以采用数组模拟的链表,left[i]和right[i]分别表示 ...

  10. 移动端常见bug汇总001

    点击样式闪动 Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景. A:根本原因是-webkit-tap-highlight-color,这个属性 ...