无论当前 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 代码的更多相关文章

  1. 页面加载时执行JQ代码

    $(function () { //jq加载时执行的这里面是 $("#ss").append("<strong>这是新加的</strong>&qu ...

  2. WebView点击加载的页面中的按钮时不弹出新窗口以及在加载后执行javascript

    mWebView.setWebViewClient(new WebViewClient() { //点击网页中按钮时,在原页面打开 public boolean shouldOverrideUrlLo ...

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

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

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

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

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

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

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

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

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

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

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

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

  9. JS的加载和执行

    从JS的加载和执行谈性能优化 ---高性能JS读后感(第一章) 从脚本的"霸道"说起,随着浏览器的进步,js越来越听话了,所以,我们先说说以前的浏览器是怎么加载js的,以及js如何 ...

随机推荐

  1. display：grid

    <!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8" ...

  2. MYSQL 问题小总结

    mysql 问题小总结 1.MySQL远程连接ERROR 2003(HY000):Can't connect to MySQL server on ‘ip’(111)的问题 通常是mysql配置文件中 ...

  3. KBMMW 4.70.00 发布

    We are happy to announce the release of kbmMW v. 4.70.00 Professional and Enterprise Edition. kbmMW ...

  4. Tomcat中的Web.xml和servlet.xml的学习

    Web.xml文件使用总结 作用: 存储项目相关的配置信息,保护servlet.解耦一些数据对程序的依赖 使用位置: 每个web项目中 Tomcat服务器中(在服务器目录conf目录中) 区别: We ...

  5. java如何实现以数据流的形式下载压缩包到本地?

    先不多说,直接贴代码吧,在服务器的E盘下放一个E:/manual.rar的压缩包 package com.cellstrain.icell.controller; import org.springf ...

  6. 2018.10.18 poj2187Beauty Contest（旋转卡壳）

    传送门 旋转卡壳板子题. 就是求凸包上最远点对. 直接上双指针维护旋转卡壳就行了. 注意要时刻更新最大值. 代码: #include<iostream> #include<cstdi ...

  7. hfs快速搭建HTTP文件服务器

    HFS全称为http file server,他是一个专门实现文件共享的工具,通过WWW服务将要共享的目录或文件发布,从而让需要下载者直接通过IE浏览器访问发布的这个共享站点,然后随意下载共享资源.和 ...

  8. Series转成list

    直接list(series)就可以的 最佳的方式是将列表转换成Python中的科学计算包numpy包的array类型,再进行加减. 1 2 3 4 import numpy as np a = np. ...

  9. HDU1045 Fire Net（DFS枚举||二分图匹配） 2016-07-24 13:23 99人阅读 评论(0) 收藏

    Fire Net Problem Description Suppose that we have a square city with straight streets. A map of a ci ...

  10. Breaseman算法绘制圆形|中点算法绘制圆形_程序片段

    Breaseman算法绘制圆形|中点算法绘制圆形_程序片段 1. Breaseman算法绘制圆形程序 由于算法的特殊性,限制绘制第一象限部分,其他部分通过旋转绘制. void CCGProjectWo ...