阻塞特性：
       JS 有个很无语的阻塞特性，就是当浏览器在执行JS 代码时，不能同时做其他任何事情，无论其代码是内嵌的还是外部的。

脚本位置：
       浏览器在碰到一个引入外部JS 文件的<script>标签时会停下所有工作来下载并解析执行它，在这个过程中，页面渲染和用户交互完全被阻塞了，为了避免页面加载时的停顿甚至空白页的出现，JS 脚本应尽量放置在页面底部，这点很重要：

  1. <html>
  2. <head>
  3. <title>无标题文档</title>
  4. <link rel="stylesheet" type="text/css" href="styles.css" />
  5. </head>
  6. <body>
  7. <p>页面的内容。。。</p>
  8. <!-- 推荐的位置，页面底部： -->
  9. <script type="text/javascript" src="file1.js"></script>
  10. <script type="text/javascript" src="file2.js"></script>
  11. <script type="text/javascript" src="file3.js"></script>
  12. </body>
  13. </html>

组织脚本：
       为了改善上面的阻塞情况，应尽可能的减少页面中<script>标签的出现次数，这同时也是考虑到HTTP 请求会带来额外的性能开销，也就是说应减少页面中外链脚本的数量。

你可以手动合并你的多个JS 文件，也可采用类似Yahoo! combo handler 这样的实时在线服务来实现，例如下面的这个<script>标签实际上便载入了3个JS 文件：

  1. <html>
  2. <head>
  3. <title>无标题文档</title>
  4. <link rel="stylesheet" type="text/css" href="styles.css" />
  5. </head>
  6. <body>
  7. <p>页面的内容。。。</p>
  8. <!-- 推荐的位置，页面底部： -->
  9. <script type="text/javascript" src="http://yui.yahooapis.com/combo?file1.js&file2.js&file3.js"></script>
  10. </body>
  11. </html>

无阻塞的脚本：
为了阻塞状况，这里提供了几个实现并行下载JS 脚本的方案。

1. 延迟的脚本

HTML4 为<script>标签定义了一个defer 属性，它能使这段代码延迟执行，然而该属性只有IE4+ 和Firefox 3.5+ 支持。声明了defer 属性的<script>会在DOM加载完成，window.onload 事件触发前被解析执行：

  1. <script type="text/javascript" src="file1.js" defer></script>

2. 动态脚本元素
       这是最通用的解决方案，通过DOM 动态地创建<script>元素并插入到文档中，文件在该元素被添加到页面时开始下载，这样 无论在何时启动下载，文件的下载和执行过程不会阻塞页面其他进程。

不过要注意使用这种方式加载的代码会立刻执行，这样需清楚的了解各文件的作用以及合理的执行顺序，此时跟踪并确保脚本下载完成并准备就绪是很有必要的，非IE浏览器会在<script>元素接收完成时触发一个load 事件，而IE 下则会触发一个readystatechange 事件并通过readyState 属性加以判断便可。以下是兼容地动态加载一个JS 脚本的函数:了：

  1. function load_script(url, callback)
  2. {      var script = document.createElement('script');
  3. script.type = 'text/javascript';
  4. if (script.readyState)
  5. {  //IE
  6. script.onreadystatechange = functio()
  7. {
  8. if (script.readyState == 'loaded' || script.readyState == 'complete')
  9. {
  10. script.onreadystatechange = null;
  11. callback();
  12. }
  13. }
  14. }
  15. else
  16. { //others
  17. script.onload = function(){
  18. callback(); }
  19. }
  20. script.src = url;
  21. document.getElementsByTagName('head')[0].appendChild(script);
  22. }

你可以将这个函数保存至一个load_script.js 文件，然后用该函数来加载其他的脚本，当要加载多个脚本时，为了确保正确的加载顺序，可以将load_script() 的执行串联起来，最后如前面说到的放至页面的底部，这便是一个完美的解决方案了。

  1. <script  type="text/javascript"src="load_script.js"></script>
  2. <script type="text/javascript">
  3. load_script('file1.js', function()
  4. {
  5. load_script('file2.js', function()
  6. {
  7. load_script('file3.js', functio()  {
  8. //全部载入后的操作...
  9. } );
  10. } );
  11. } );
  12. </script>

3.XMLHttpRequest 脚本注入

即通过AJAX 方式加载，不过这种方式无法实现跨域加载，不适用于大型网站。

推荐的无阻塞模式
       我们上面做的这些工作当然也已经被那些牛人们完成了，并写成了一些优秀的JS 类库以便我们使用，它们均能很好地解决JS 脚本的阻塞问题，实现并行下载，例如： YUI3、LazyLoad、LABjs 等。

js加载优化的更多相关文章

  1. js加载优化三

    Javascript性能优化之异步加载和执行 Author:小欧2013-09-17 随着科技的发展,如今的网站和五六年前相比,现在的人们对web的要求越来越高了,用户体验,交互效果,视觉效果等等都有 ...

  2. js加载优化-二

    http://www.cnblogs.com/radom/archive/2011/04/26/2028886.html ontrolJS 主要为了是解决网页加载中Js文件的性能问题,ControlJ ...

  3. 优化JS加载时间过长的一种思路

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 去年公司在漳州的一个项目中,现场工程人员反映地图部分出图有点 ...

  4. js资源加载优化

    互联网应用或者访问量大的应用,对js的加载优化是不可少的.下面记录几种优化方法 CDN  + 浏览器缓存 CDN(content delivery network)内容分发网络, 最传统的优化方式.其 ...

  5. (转)JS加载顺序

    原文:http://blog.csdn.net/dannywj1371/article/details/7048076 JS加载顺序 做一名合格的前端开发工程师(12篇)——第一篇 Javascrip ...

  6. vue项目首屏加载优化实战

    问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长.特别在移动端,单页面应用的首屏加载优化更是绕不开的话题.下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步. 我的项目vu ...

  7. vue加载优化策略

    vue.js是一个比较流行的前端框架,与react.js.angular.js相比来说,vue.js入手曲线更加流畅,不管掌握多少都可以快速上手.但是单页面应用也都有其弊病,有时候首屏加载慢的让人捏舌 ...

  8. react 首屏加载优化

    react 首屏加载优化,原本是在入口HTML文件中加载loading动画,但是部署在测试环境上的时候一直无法显示loading的部分,也是奇怪了,我们测试环境的部署一直跟本地的都不太一样,内外网的转 ...

  9. Vue SPA 首屏加载优化实践

    写在前面 本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一些坑及优化方案! 我们以 vue-cli 工具为例,使用 vue-router 搭建SPA应用,UI框架选用 element-ui ...

随机推荐

  1. Blogger支持Mobile行动版网页 - Blog透视镜

    目前几乎人人都使用行动装置像是Pad,智能型手机等,而Blogger也针对此类的使用者,推出支持Mobile行动版网页,提供简单清爽的页面,方便在小屏幕上的阅读,在设定上也相当的简单,同时还可以在计算 ...

  2. ListView 实现分组

    1:FragmentHack4.java /** * Created by y on 15-1-2. */ public class FragmentHack4 extends Fragment{ V ...

  3. 为GridView中的DropDownList赋值

    <Bda:GridView ID="gvMessage" runat="server" Height="70px" Width=&qu ...

  4. Linux 下通过脚本实现远程自动备份

    考虑到在本机上备份数据,一旦该机器硬盘出现故障,数据无法取出.远程手动备份数据费时费力且不及时.最好的方法就是通过脚本实现远程自动互备.但远程无论是通过SSH登陆,还是通过scp拷贝文件都需要输入密码 ...

  5. (heap)239. Sliding Window Maximum

    题目: Given an array nums, there is a sliding window of size k which is moving from the very left of t ...

  6. UESTC_排名表 2015 UESTC Training for Graph Theory<Problem I>

    I - 排名表 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submit S ...

  7. bst 二叉搜索树简单实现

    //数组实现二叉树: // 1.下标为零的元素为根节点,没有父节点 // 2.节点i的左儿子是2*i+1:右儿子2*i+2:父节点(i-1)/2: // 3.下标i为奇数则该节点有有兄弟,否则又左兄弟 ...

  8. linux使用共享内存通信的进程同步退出问题

    两个甚至多个进程使用共享内存(shm)通信,总遇到同步问题.这里的“同步问题”不是说进程读写同步问题,这个用信号量就好了.这里的同步问题说的是同步退出问题,到底谁先退出,怎么知道对方退出了.举个例子: ...

  9. web前端之 HTML标签详细介绍

    html标签的分类 点我查看完整的html标签介绍 在html中,标签一般分为块级标签和行内标签 块级标签:块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签"p& ...

  10. eclipse在ubuntu13.04下崩溃crash

    错误信息: # # A fatal error has been detected by the Java Runtime Environment: # # SIGSEGV (0xb) at pc=0 ...