高性能JavaScript（加载和执行）
当浏览器遇到 <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（加载和执行）的更多相关文章
- 高性能JavaScript 加载和执行
前言 本章主要讲述如何加载脚本使得用户能有良好的用户体验,而核心内容就是JavaScript的异步加载.之前写过一篇不得不说的JavaScript异步加载,相似的内容就不多加描述,讲些不同的东西,主要 ...
- 怎么样加快JavaScript加载和执行效率
概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载 ...
- 加快JavaScript加载和执行效率
JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其 ...
- 浏览器环境下Javascript脚本加载与执行探析之DOMContentLoaded
在”浏览器环境下Javascript脚本加载与执行探析“系列文章的前几篇,分别针对浏览器环境下JavaScript加载与执行相关的知识点或者属性进行了探究,感兴趣的同学可以先行阅读前几篇文章,了解相关 ...
- [转]JavaScript 的性能优化：加载和执行
原文链接:http://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/index.html?ca=drs- JavaScript 的性能优化: ...
- 【转】js JavaScript 的性能优化：加载和执行
JavaScript 的性能优化:加载和执行 转自:https://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/ 随着 Web2.0 技术的 ...
- JavaScript 的性能优化：加载和执行
随着 Web2.0 技术的不断推广,越来越多的应用使用 javascript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 ...
- 浏览器中Javascript的加载和执行
在刚学习Javascript时曾对该问题在小组内做个一次StudyReport,发现其中的基础还是值得分析的. 从标题分析,可以加个Javascript的加载和执行分为两个阶段:加载.执行.而加载即浏 ...
- 高性能JavaScript-JS脚本加载与执行对性能的影响
在web产品优化准则中,很重要的一条是针对js脚本的加载和执行方式的优化.本篇文章简单描述一下其中的优化准则. 1. 脚本加载优化 1.1 脚本位置对性能的影响 优化页面加载性能的原则之一是将scri ...
- 浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
在<浏览器环境下JavaScript脚本加载与执行探析之defer与async特性>中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机.浏览器支持情况.浏览器bug以及 ...
随机推荐
- D16——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D16 20180927内容纲要: 1.JavaScript介绍 2.JavaScript功能介绍 3.JavaScript变量 4.Dom操作 a.获取标签 b ...
- 让PETSc跑得再快一些
最近做了一个使用PETSc来求解线性方程组(Ax=b)的项目,把其中遇到的一些坑和解决方法记录下来.本文不介绍PETSc如何入门,而是给出一些能让PETSc运行得更快的编程细节.开始我只是简单地修改P ...
- 初印象至Vue路由
初印象系列为快速了解一门技术的内容,后续会推出本人应用这门技术时发现的一些认识. Vue路由和传统路由的区别: Vue路由主要是用来实现单页面应用内各个组件之间的切换,同样支持传递参数等功能.而传统路 ...
- 基础I/O接口与操作
C语言中的文件接口 1 打开文件 FILE * fopen(const char * path,const char * mode) 参数:path:文件路径 mode:打开文件的方式 返回值:成功返 ...
- 【并发】2、AtomicReferenceFieldUpdater初体验
对于volatile对象的原子更新 AtomicReferenceFieldUpdater这个对象进行原子更新的时候,外部操作对象只能是public,因为外部访问不到private对象,但是在内内部确 ...
- HTTP响应状态码 含义
100 客户端可以继续 101 指示服务器正根据 Upgrade 头切换协议 200 请求正常成功 201 指示请求成功并在服务器上创建了一个新资源 202 指示已接受请求进行处理但处理尚未完成 20 ...
- widows下 python环境变量配置
widows下 python环境变量配置 便于cmd命令行操作,例如:直接进入Python解释器环境.使用pip安装模块等.
- (转)详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
原文:https://www.jb51.net/article/138363.htm hasattr()函数 hasattr()函数用于判断是否包含对应的属性 语法: hasattr(object,n ...
- Ruby：线程实现经典的生产者消费者问题
运行结果: ProAndCon 0 produced 1 produced consumed 0 2 produced 3 produced consumed 1 consumed 2 consume ...
- Spring Boot + Spring Cloud 实现权限管理系统 后端篇（十）：接口服务整理
通用操作 通用操作是指一般的增删改查操作,逻辑大体都是一致的,所以统一抽象到CURD接口,需要用到CURD的表直接实现接口就可以了. 通用操作主要有以下几个: 保存操作 /** * 保存操作 * @p ...