如何正确的加载和执行 JavaScript 代码
无论当前 JavaScript 代码是内嵌还是在外链文件中，页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript 执行过程耗时越久，浏览器等待响应用户输入的时间就越长。浏览器在下载和执行脚本时出现阻塞的原因在于，脚本可能会改变页面或 JavaScript 的命名空间，它们对后面页面内容造成影响。
在 <head> 中加载外链的 JavaScript的缺点：，当浏览器解析到 <script> 标签时，浏览器会停止解析其后的内容，而优先下载脚本文件，并执行其中的代码，这意味着，其后的 styles.css 样式文件和<body>标签都无法被加载，由于<body>标签无法被加载，那么页面自然就无法渲染了。因此在该 JavaScript 代码完全执行完之前，页面都是一片空白。
推荐的代码放置位置：将脚本放在底部，这也是优化 JavaScript 的首要规则。
减少 JavaScript 对性能的影响有以下几种方法：
- 将所有的
<script>标签放到页面底部，也就是</body>闭合标签之前，这能确保在脚本执行前页面已经完成了渲染。 - 尽可能地合并脚本。页面中的
<script>标签越少，加载也就越快，响应也越迅速。无论是外链脚本还是内嵌脚本都是如此。 - 采用无阻塞下载 JavaScript 脚本的方法：
- 使用
<script>标签的 defer 属性（仅适用于 IE 和 Firefox 3.5 以上版本）； - 使用动态创建的
<script>元素来下载并执行代码； - 使用 XHR 对象下载 JavaScript 代码并注入页面中。
具体方法及示例见http://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/index.html
如何正确的加载和执行 JavaScript 代码的更多相关文章
- 页面加载时执行JQ代码
$(function () { //jq加载时执行的这里面是 $("#ss").append("<strong>这是新加的</strong>&qu ...
- WebView点击加载的页面中的按钮时不弹出新窗口以及在加载后执行javascript
mWebView.setWebViewClient(new WebViewClient() { //点击网页中按钮时,在原页面打开 public boolean shouldOverrideUrlLo ...
- JavaScript 的性能优化：加载和执行
随着 Web2.0 技术的不断推广,越来越多的应用使用 javascript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 ...
- [转]JavaScript 的性能优化：加载和执行
原文链接:http://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/index.html?ca=drs- JavaScript 的性能优化: ...
- 怎么样加快JavaScript加载和执行效率
概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载 ...
- JavaScript的性能优化：加载和执行
随着 Web2.0 技术的不断推广,越来越多的应用使用 javascript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 ...
- 【转】js JavaScript 的性能优化：加载和执行
JavaScript 的性能优化:加载和执行 转自:https://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/ 随着 Web2.0 技术的 ...
- 加快JavaScript加载和执行效率
JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其 ...
- JS的加载和执行
从JS的加载和执行谈性能优化 ---高性能JS读后感(第一章) 从脚本的"霸道"说起,随着浏览器的进步,js越来越听话了,所以,我们先说说以前的浏览器是怎么加载js的,以及js如何 ...
随机推荐
- JavaScript的异步运行机制
----异步运行机制如下: 1.左右同步任务都在主线程上执行,形成一个执行栈 2.主线程值外,还存在一个任务队列,只要异步任务有了运行结果,就在任务队列中放置一个事件 3.一旦执行栈中的所有同步任务执 ...
- hdu-1877（大数+进制转换）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1877 思路:注意考虑0,0的情况. #include<iostream> #include ...
- int最大值+1为什么是-2147483648最小值-1为什么是2147483647
今天一个新手学编程就问到这个问题,很多人第一次学编程肯定会遇到这个问题,大部分都知道是溢出之类的,用源码和补码就很容易说明 int i = -2147483648 ;这是不允许的 VS里报的错 err ...
- modelsim读写TXT文件
//open the file Initial Begin step_file = $fopen("F:/Company/Src/txt/step.v","r" ...
- （二）swagger-springmvc
如何入门 1. 我在 http://mvnrepository.com/ 上搜索 swagger-springmvc 2. 我找到一个具体版本 http://mvnrepository.com/art ...
- Java多线程-并发协作(生产者消费者模型)
对于多线程程序来说,不管任何编程语言,生产者和消费者模型都是最经典的.就像学习每一门编程语言一样,Hello World!都是最经典的例子. 实际上,准确说应该是“生产者-消费者-仓储”模型,离开了仓 ...
- 20155209 2016-2017-2 《Java程序设计》第八周学习总结
20155209 2016-2017-2 <Java程序设计>第八周学习总结 教材学习内容总结 Java NIO(New IO)是一个可以替代标准Java IO API的IO API(从J ...
- B样条参数曲线学习（1）
B样条参数曲线学习 Bezier曲线有许多优越性,但有两点不足: (1) 特征多边形的顶点个数决定了Bezier曲线的阶次,并且在阶次较大时,特征多边形对曲线的控制将会减弱: (2) Bezier曲线 ...
- nodejs 获取文件的编码方式
使用nodejs获取文件夹内文件的编码方式:使用jschardet模块. 下面的代码还有问题,没有添加结束的语句,没有判断应该在哪执行res.send(). res.send()不能放在forEach ...
- 面向对象编程思想(前传)--你必须知道的javascript（转载）
原文地址:http://www.cnblogs.com/zhaopei/p/6623460.html阅读目录 什么是鸭子类型 javascript的面向对象 封装 继承 多态 原型 this指向 ...