1、浏览器遇到js代码会暂停页面的下载和渲染，谁晓得js代码会不会把html给强奸（改变）了；

2、延迟脚本加载：defer 属性

<html>

<head>

    <title>Script Defer Example</title>

</head>

<body>

    <script type="text/javascript" defer>

        alert("defer");

    </script>

    <script type="text/javascript">

        alert("script");

    </script>

    <script type="text/javascript">

        window.onload = function(){

            alert("load");

        };

    </script>

</body>

</html>

不支持 defer 属性的浏览器的弹出顺序是：“defer”、“script”、“load”。而在支持 defer 属性的浏览器上，弹出的顺序则是：“script”、“defer”、“load”。请注意，带有 defer 属性的<script>元素不是跟在第二个后面执行，而是在 onload 事件被触发前被调用。

3、动态加载很多 JavaScript 文件，浏览器不保证文件加载的顺序。通过 loadScript()函数加载多个 JavaScript 脚本可以确保加载顺序

loadScript("script1.js", function(){

    loadScript("script2.js", function(){

        loadScript("script3.js", function(){

            alert("All files are loaded!");

        });

    });

});

4、减少 JavaScript 对性能的影响有以下几种方法：

  • 将所有的<script>标签放到页面底部，也就是</body>闭合标签之前，这能确保在脚本执行前页面已经完成了渲染。
  • 尽可能地合并脚本。页面中的<script>标签越少，加载也就越快，响应也越迅速。无论是外链脚本还是内嵌脚本都是如此。
  • 采用无阻塞下载 JavaScript 脚本的方法：
  • 使用<script>标签的 defer 属性（仅适用于 IE 和 Firefox 3.5 以上版本）；
  • 使用动态创建的<script>元素来下载并执行代码；
  • 使用 XHR 对象下载 JavaScript 代码并注入页面中。

详细链接：https://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/

【摘要】JavaScript 的性能优化：加载和执行的更多相关文章

  1. JS性能优化——加载和执行

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

  2. 高性能JavaScript笔记一（加载和执行、数据访问、DOM编程）

    写在前面 好的书,可能你第一遍并不能领会里面的精魂,当再次细细品评的时候,发现领悟的又是一层新的含义 (这段时间,工作上也不会像从前一样做起来毫不费力,开始有了新的挑战,现在的老大让我既佩服又嫉妒,但 ...

  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的性能优化：加载和执行

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

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

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

  7. 前端性能优化：细说JavaScript的加载与执行

    本文主要是从性能优化的角度来探讨JavaScript在加载与执行过程中的优化思路与实践方法,既是细说,文中在涉及原理性的地方,不免会多说几句,还望各位读者保持耐心,仔细理解,请相信,您的耐心付出一定会 ...

  8. 性能优化-css，js的加载与执行

    前端性能优化 css,js的加载与执行 javascript是单线程的 一个网站在浏览器是如何进行渲染的呢? html页面加载渲染的过程 html渲染过程的一些特点 顺序执行,并发加载 词法分析 并发 ...

  9. 基于javascript实现图片懒加载（亲测有效）

    这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...

随机推荐

  1. 【WPF】GridControl的使用

    一.前言 在WPF中我们常常使用DataGrid来显示数据,在Dev中也有一个类似的控件—GridControl. 二.范例 <dxg:GridControl Grid.Row=" I ...

  2. 【BZOJ4828】【HNOI2017】大佬（动态规划）

    [BZOJ4828][HNOI2017]大佬(动态规划) 题面 BZOJ 洛谷 LOJ 人们总是难免会碰到大佬.他们趾高气昂地谈论凡人不能理解的算法和数据结构,走到任何一个地方,大佬的气场 就能让周围 ...

  3. Kerberos的白银票据详解

    0x01白银票据(Silver Tickets)定义 白银票据(Silver Tickets)是伪造Kerberos票证授予服务(TGS)的票也称为服务票据.如下图所示,与域控制器没有AS-REQ 和 ...

  4. Linux 查询命令

    which       查看可执行文件的位置 whereis    查看文件的位置 locate       配合数据库查看文件位置 find          实际搜寻硬盘查询文件名称 (find也 ...

  5. 【learning】洲阁筛

    问题描述 快速求素数处点值比较好求的积性函数前缀和 大致过程 Step1.求出一定范围内的素数处点值之和(\(g\)) Step2.利用上面的\(g\)求出一个\(f\)然后用\(f\)求出前缀和 具 ...

  6. pxp

    Time Limit: 2000 ms Memory Limit: 512 MB Description 给定 \(n\), 求\(\sum\limits_{p,q∈primes}[pq≤n]\) ( ...

  7. spoj694 DISUBSTR - Distinct Substrings

    Given a string, we need to find the total number of its distinct substrings. Input T- number of test ...

  8. iOS APNs实战分享

    序言: 因为App的功能需要,最近一直在调研苹果的APNs推送,开始时觉得超麻烦,现在感觉还是比较easy,“难者不会,会者不难”,自己踩过了这么多的坑终于会了,不出来吐槽(装X)一下对不起自己,23 ...

  9. openstack配置模块

    一.简介 openstack中负责处理配置的模块是oslo.config,它可以处理配置项和配置文件.通常的配置处理都是如下形式: from oslo.config import cfg CONF=c ...

  10. 理解PV操作和信号量

    对于信号量,可以认为是一个仓库,有两个概念,容量和当前的货物个数. P操作从仓库拿货,如果仓库中没有货,线程一直等待,直到V操作,往仓库里添加了货物,为了避免P操作一直等待下去,会有一个超时时间. V ...