js加载优化
阻塞特性:
JS 有个很无语的阻塞特性,就是当浏览器在执行JS 代码时,不能同时做其他任何事情,无论其代码是内嵌的还是外部的。
脚本位置:
浏览器在碰到一个引入外部JS 文件的<script>标签时会停下所有工作来下载并解析执行它,在这个过程中,页面渲染和用户交互完全被阻塞了,为了避免页面加载时的停顿甚至空白页的出现,JS 脚本应尽量放置在页面底部,这点很重要:
- <html>
- <head>
- <title>无标题文档</title>
- <link rel="stylesheet" type="text/css" href="styles.css" />
- </head>
- <body>
- <p>页面的内容。。。</p>
- <!-- 推荐的位置,页面底部: -->
- <script type="text/javascript" src="file1.js"></script>
- <script type="text/javascript" src="file2.js"></script>
- <script type="text/javascript" src="file3.js"></script>
- </body>
- </html>
组织脚本:
为了改善上面的阻塞情况,应尽可能的减少页面中<script>标签的出现次数,这同时也是考虑到HTTP 请求会带来额外的性能开销,也就是说应减少页面中外链脚本的数量。
你可以手动合并你的多个JS 文件,也可采用类似Yahoo! combo handler 这样的实时在线服务来实现,例如下面的这个<script>标签实际上便载入了3个JS 文件:
- <html>
- <head>
- <title>无标题文档</title>
- <link rel="stylesheet" type="text/css" href="styles.css" />
- </head>
- <body>
- <p>页面的内容。。。</p>
- <!-- 推荐的位置,页面底部: -->
- <script type="text/javascript" src="http://yui.yahooapis.com/combo?file1.js&file2.js&file3.js"></script>
- </body>
- </html>
无阻塞的脚本:
为了阻塞状况,这里提供了几个实现并行下载JS 脚本的方案。
1. 延迟的脚本
HTML4 为<script>标签定义了一个defer 属性,它能使这段代码延迟执行,然而该属性只有IE4+ 和Firefox 3.5+ 支持。声明了defer 属性的<script>会在DOM加载完成,window.onload 事件触发前被解析执行:
- <script type="text/javascript" src="file1.js" defer></script>
2. 动态脚本元素
这是最通用的解决方案,通过DOM 动态地创建<script>元素并插入到文档中,文件在该元素被添加到页面时开始下载,这样 无论在何时启动下载,文件的下载和执行过程不会阻塞页面其他进程。
不过要注意使用这种方式加载的代码会立刻执行,这样需清楚的了解各文件的作用以及合理的执行顺序,此时跟踪并确保脚本下载完成并准备就绪是很有必要的,非IE浏览器会在<script>元素接收完成时触发一个load 事件,而IE 下则会触发一个readystatechange 事件并通过readyState 属性加以判断便可。以下是兼容地动态加载一个JS 脚本的函数:了:
- function load_script(url, callback)
- { var script = document.createElement('script');
- script.type = 'text/javascript';
- if (script.readyState)
- { //IE
- script.onreadystatechange = functio()
- {
- if (script.readyState == 'loaded' || script.readyState == 'complete')
- {
- script.onreadystatechange = null;
- callback();
- }
- }
- }
- else
- { //others
- script.onload = function(){
- callback(); }
- }
- script.src = url;
- document.getElementsByTagName('head')[0].appendChild(script);
- }
你可以将这个函数保存至一个load_script.js 文件,然后用该函数来加载其他的脚本,当要加载多个脚本时,为了确保正确的加载顺序,可以将load_script() 的执行串联起来,最后如前面说到的放至页面的底部,这便是一个完美的解决方案了。
- <script type="text/javascript"src="load_script.js"></script>
- <script type="text/javascript">
- load_script('file1.js', function()
- {
- load_script('file2.js', function()
- {
- load_script('file3.js', functio() {
- //全部载入后的操作...
- } );
- } );
- } );
- </script>
3.XMLHttpRequest 脚本注入
即通过AJAX 方式加载,不过这种方式无法实现跨域加载,不适用于大型网站。
推荐的无阻塞模式
我们上面做的这些工作当然也已经被那些牛人们完成了,并写成了一些优秀的JS 类库以便我们使用,它们均能很好地解决JS 脚本的阻塞问题,实现并行下载,例如: YUI3、LazyLoad、LABjs 等。
js加载优化的更多相关文章
- js加载优化三
Javascript性能优化之异步加载和执行 Author:小欧2013-09-17 随着科技的发展,如今的网站和五六年前相比,现在的人们对web的要求越来越高了,用户体验,交互效果,视觉效果等等都有 ...
- js加载优化-二
http://www.cnblogs.com/radom/archive/2011/04/26/2028886.html ontrolJS 主要为了是解决网页加载中Js文件的性能问题,ControlJ ...
- 优化JS加载时间过长的一种思路
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 去年公司在漳州的一个项目中,现场工程人员反映地图部分出图有点 ...
- js资源加载优化
互联网应用或者访问量大的应用,对js的加载优化是不可少的.下面记录几种优化方法 CDN + 浏览器缓存 CDN(content delivery network)内容分发网络, 最传统的优化方式.其 ...
- (转)JS加载顺序
原文:http://blog.csdn.net/dannywj1371/article/details/7048076 JS加载顺序 做一名合格的前端开发工程师(12篇)——第一篇 Javascrip ...
- vue项目首屏加载优化实战
问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长.特别在移动端,单页面应用的首屏加载优化更是绕不开的话题.下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步. 我的项目vu ...
- vue加载优化策略
vue.js是一个比较流行的前端框架,与react.js.angular.js相比来说,vue.js入手曲线更加流畅,不管掌握多少都可以快速上手.但是单页面应用也都有其弊病,有时候首屏加载慢的让人捏舌 ...
- react 首屏加载优化
react 首屏加载优化,原本是在入口HTML文件中加载loading动画,但是部署在测试环境上的时候一直无法显示loading的部分,也是奇怪了,我们测试环境的部署一直跟本地的都不太一样,内外网的转 ...
- Vue SPA 首屏加载优化实践
写在前面 本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一些坑及优化方案! 我们以 vue-cli 工具为例,使用 vue-router 搭建SPA应用,UI框架选用 element-ui ...
随机推荐
- EF 一对一,一对多,多对多 Flunt API 配置
一对一 就拿后台用户权限相关的实体来说明吧,用户表,用户详细表,是一对一的关系: /// <summary> /// 用户信息类 /// </summary> publi ...
- cf B. Fixed Points
http://codeforces.com/contest/347/problem/B #include <cstdio> #include <cstring> #includ ...
- 《Programming WPF》翻译 第7章 5.可视化层编程
原文:<Programming WPF>翻译 第7章 5.可视化层编程 形状元素能提供一种便利的方式与图形一起工作,在一些情形中,添加表示绘图的元素到UI树中,可能是比它的价值更加麻烦.你 ...
- Qt编程之实现在QFileDialog上添加自定义的widget
上网搜索找到的方法如下: http://www.qtforum.org/article/20841/how-to-add-a-qwidget-in-qfiledialog.html#post78422 ...
- Gray Code 解答
Question The gray code is a binary numeral system where two successive values differ in only one bit ...
- 《Algorithms 4th Edition》读书笔记——2.4 优先队列(priority queue)-Ⅲ
2.4.3 堆的定义 数据结构二叉堆能够很好地实现优先队列的基本操作.在二叉堆的数组中,每个元素都要保证大于等于另两个特定位置的元素.相应地,这些位置的元素又至少要大于等于数组中的两个元素,以此类推. ...
- IDX爱定客 | 氪加
IDX爱定客 | 氪加 个性化定制鞋网站,在线定制只需三分钟
- Spark常用函数讲解之键值RDD转换
摘要: RDD:弹性分布式数据集,是一种特殊集合 ‚ 支持多种来源 ‚ 有容错机制 ‚ 可以被缓存 ‚ 支持并行操作,一个RDD代表一个分区里的数据集RDD有两种操作算子: Trans ...
- eclipse在ubuntu13.04下崩溃crash
错误信息: # # A fatal error has been detected by the Java Runtime Environment: # # SIGSEGV (0xb) at pc=0 ...
- vs连接mysql出错解决方法
vs连接mysql出错解决方法 先按以下的步骤配置一下: **- (1)打开VC6.0 工具栏Tools菜单下的Options选项.在Directories的标签页中右边的"Show dir ...