zoukankan      html  css  js  c++  java
  • 如何正确的加载和执行 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

  • 相关阅读:
    精选 TOP 面试题
    leecode100热题 HOT 100(2)
    leecode100热题 HOT 100
    leetcode题库
    LeetCode All in One 题目讲解汇总(持续更新中...)
    LVS负载均衡(LVS简介、三种工作模式、十种调度算法)
    Smart/400开发上手3: 练习实践
    Smart/400开发上手2: COBOL批处理程序处理过程
    Smart/400开发上手1:入门
    一步步Cobol 400上手自学入门教程06
  • 原文地址:https://www.cnblogs.com/houxiaohang/p/4602456.html
Copyright © 2011-2022 走看看