- 浏览: 799275 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
yuhanwm910731:
我现在需要实现复选(非级联选择)的树形下拉菜单,麻烦发给我一份 ...
extjs3.X支持树型的下拉控件 -
shine1200:
“所以咱们现在设置的虚拟路径“/message/upload/ ...
weblogic虚拟路径的配置和使用(2) -
icefireforest:
Fangrn 写道jx_dream 写道楼主,我最近在做树形下 ...
extjs3.X支持树型的下拉控件 -
cloudfile:
谢谢分享!
c++库c#调用开发时需要注意的一点 -
xuweilinbegin:
我也要一份哦:xuweilin15353@163.com,谢谢 ...
extjs3.X支持树型的下拉控件
外部JS的阻塞下载
所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。至到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈
现内容。
有人会问:为什么JS不能像CSS、image一样并行下载了?这里需要简单介绍一下浏览器构造页面的原理,
当浏览器从服务器接收到了HTML文档,并把HTML在内存中转换成DOM树,在转换的过程中如果发现某个节点(node)上引用了CSS或者
IMAGE,就会再发1个request去请求CSS或image,然后继续执行下面的转换,而不需要等待request的返回,当request返回
后,只需要把返回的内容放入到DOM树中对应的位置就OK。但当引用了JS的时候,浏览器发送1个js
request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构,而JS中很有可能有代码直接改变了DOM树结构,比如使用
document.write 或
appendChild,甚至是直接使用的location.href进行跳转,浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以
就会阻塞其他的下载和呈现.
阻塞下载图:下图是访问blogjava首页的时间瀑布图,可以看出来开始的2个image都是并行下载的,而后面的2个JS都是阻塞下载的(1个1个下
载)。
嵌入JS的阻塞下载
嵌入JS是指直接写在HTML文档中的JS代码。上面说了引用外部的JS会阻塞其后的资源下载和其后的内容呈现,哪嵌入的JS又会是怎样阻塞的了,看下面
的列2个代码:
代码1:
<</span>div
>
li
>
blogjava
span style="color: #800000;">li
>
li
>
CSDN
span style="color: #800000;">li
>
li
>
博客园
span style="color: #800000;">li
>
li
>
ABC
span style="color: #800000;">li
>
li
>
AAA
span style="color: #800000;">li
>
ul
>
span style="color:
#800000;">div
>
script
type
="text/javascript"
>
// 循环5秒钟
var
n
=
Number(
new
Date());
var
n2
=
Number(
new
Date());
while
((n2
-
n)
(
6
*
1000
)){
n2
=
Number(
new
Date());
}
span style="color:
#800000;">script
>
div
>
ul
>
li
>
MSN
span style="color: #800000;">li
>
li
>
GOOGLE
span style="color: #800000;">li
>
li
>
YAHOO
span style="color: #800000;">li
>
ul
>
span style="color:
#800000;">div
>
代码2(test.zip里面的代码与代码1的JS代码一模一样):
ul
>
li
>
blogjava
span style="color: #800000;">li
>
li
>
CSDN
span style="color: #800000;">li
>
li
>
博客园
span style="color: #800000;">li
>
li
>
ABC
span style="color: #800000;">li
>
li
>
AAA
span style="color: #800000;">li
>
ul
>
span style="color:
#800000;">div
>
script
type
="text/javascript"
src
="http://www.blogjava.net/Files/BearRui/test.zip"
>span style="color:
#800000;">script
>
div
>
ul
>
li
>
MSN
span style="color: #800000;">li
>
li
>
GOOGLE
span style="color: #800000;">li
>
li
>
YAHOO
span style="color: #800000;">li
>
ul
>
span style="color:
#800000;">div
>
运行后,会发现代码1中,在前5秒中页面上是一篇空白,5秒中后页面全部显示。
代码2中,前5秒中blogjava,csdn等先显示出来,5秒后MSN才显示出来。
可以看出嵌入JS会阻塞所有内容的呈现,而外部JS只会阻塞其后内容的显示,2种方式都会阻塞其后资源的下载。嵌入JS
导致CSS阻塞加载的问题
CSS怎么会阻塞加载了?CSS本来是可以并行下载的,在什么情况下会出现阻塞加载了(在测试观察中,IE6下CSS都是阻塞加载,下面的测试在非IE6
下进行):
代码1(为了效果,这里选择了1个国外服务器的CSS):
head
>
title
>
js test
span style="color: #800000;">title
>
meta
http-equiv
="Content-Type"
content
="text/html; charset=UTF-8"
/>
link
type
="text/css"
rel
="stylesheet"
href
="http://69.64.92.205/Css/Home3.css"
/>
span
style="color: #800000;">head
>
body
>
img
src
="http://www.blogjava.net/images/logo.gif"
/><</span>br
/>
img
src
="http://csdnimg.cn/www/images/csdnindex_piclogo.gif"
/>
span
style="color: #800000;">body
>
span
style="color: #800000;">html
>
代码2(只加了1个空的嵌入JS):
title
>
js test
span style="color: #800000;">title
>
meta
http-equiv
="Content-Type"
content
="text/html; charset=UTF-8"
/>
link
type
="text/css"
rel
="stylesheet"
href
="http://69.64.92.205/Css/Home3.css"
/>
script
type
="text/javascript"
>
function
a(){}
span style="color:
#800000;">script
>
span style="color:
#800000;">head
>
body
>
img
src
="http://www.blogjava.net/images/logo.gif"
/><</span>br
/>
img
src
="http://csdnimg.cn/www/images/csdnindex_piclogo.gif"
/>
span style="color:
#800000;">body
>
从时间瀑布图中可以看出,代码2中,CSS和图片并没有并行下载,而是等待CSS下载完毕后才去并行下载后面的2个图片,当CSS后面跟着嵌入的JS的时
候,该CSS就会出现阻塞后面资源下载的情况。
有人可能会问,这里为什么不说说嵌入的JS阻塞了后面的资源,而是说CSS阻塞了?
想想我们现在用的是1个空函数,解析这个空函数1ms就够,而后面2个图片是等CSS下载完1.3s后才开始下载。大家还可以试试把嵌入JS放到CSS前
面,就不会出现阻塞的情况了。
根本原因:因为浏览器会维持html中css和js的顺序,样式表必须在嵌入的JS执行前先加载、解析完。而嵌入的JS会阻塞后面的资源加载,所以就会出
现上面CSS阻塞下载的情况。
嵌入JS应该放在什么位置
1、放在底部,虽然放在底部照样会阻塞所有呈现,但不会阻塞资源下载。
2、如果嵌入JS放在head中,请把嵌入JS放在CSS头部。
3、使用defer
4、不要在嵌入的JS中调用运行时间较长的函数,如果一定要用,可以用setTimeout来调用
发表评论
-
提供IT系统运维支持、系统优化方案
2012-10-26 14:46 6提供IT系统运维支持、系统优化方案,有多个运维实施经验。 ... -
Java指定编码读写文件(UTF-8)
2010-11-30 14:00 3098有时我们需要程序动态生成jsp文件,采取系统默认的编码操作的文 ... -
was6.0发布struts2项目异常
2010-11-18 18:39 1975[10-11-18 18:31:33:609 CST] 000 ... -
利用spring提供的字符编码过滤器
2010-11-14 11:55 1961<!-- spring的字符集过滤器 --> ... -
简单的几句CSS布局口诀
2010-11-10 16:41 955简单的几句CSS布局口诀,就可以写出精简,标准的样式。 ... -
commons-email笔记
2010-11-10 14:38 1365import java.io.UnsupportedE ... -
如何解决 调用jar程序时出现 outofMemory的问题
2010-10-29 12:02 1193我们在调用 打包好的java程序时,如果程序要加载大量数据的话 ... -
GC策略的调优
2010-09-30 22:30 1613GC 策略在 G1 还没成熟的情况下,目前主要有串行、并 ... -
关于Spring和WebLogic版本兼容的一点小提示
2010-09-30 16:31 2058首先 WebLogic 的各个版本和 JDK 绑定的很紧, 或 ... -
删除WebLogic 10的缓存
2010-09-30 16:07 4632在WebLogic 10上部署了一个应用,最近作了更新并重新部 ... -
weblogic如何强制先加载web-inf/lib下的jar
2010-09-30 16:05 4775方法1: 修改WEB-INF\weblogic.xml (如 ... -
用Log4j自动生成日志
2010-09-27 13:28 1629Log4j是Apache基金会的一 ... -
java smslib发送短信
2010-09-10 10:02 1624public class SendMessage { ... -
Spring定时器的两种实现方式
2010-09-01 21:07 1450有两种流行Spring定时 ... -
使用 Commons-Email 在邮件内容中直接嵌入图片
2010-08-31 20:25 1317我们在发送邮件的时候,如果使用HTML在邮件内容中嵌入图片,& ... -
Struts2中转换Date类型的问题
2010-08-29 09:43 1329Web开发会涉及到很多类型转换的情况。我们知道,页面中的一切值 ... -
java smslib 发送短信错误信息
2010-08-25 15:02 4238org.smslib.GatewayException: GS ... -
rxtx取代javax.comm实现Java跨平台设备端口通信
2010-08-24 08:53 2155From Rxtx <!-- start conte ... -
javascript汉字转拼音代码
2010-08-22 08:21 4568使用方法(1):pinyin.go('汉字'); //例:张家 ... -
关于IE等浏览器在下载JAR文件时的,将后缀更改为zip等问题及解决方案
2010-08-03 12:19 1200httpd.conf这个文件中的mime.types上面,打开 ...
相关推荐
有人会问:为什么JS不能像CSS、image一样并行下载了?这里需要简单介绍一下浏览器构造页面的原理, 当浏览器从服务器接收到了HTML文档,并把HTML在内存中转换成DOM树,在转换的过程中如果发现某个节点(node)上引用...
《高性能JavaScript》揭示的技术和策略能帮助你在开发过程中消除性能瓶颈。你将会了解如何提升各方面的性能,包括代码的加载、运行、DOM交互、页面生存周期等。雅虎的前端工程师Nicholas C. Zakas和其他五位...
《高性能JavaScript》揭示的技术和策略能帮助你在开发过程中消除性能瓶颈。你将会了解如何提升各方面的性能,包括代码的加载、运行、DOM交互、页面生存周期等。雅虎的前端工程师Nicholas C. Zakas和其他五位...
webgl-heatmap, 高性能的web/js显示库 Heatmapwebgl-heatmap.js 是一个用于高性能热图显示的JavaScript库。演示在 codeflow.org 现场演示。如何使用它实例化新的热图,错误可以是以下之一:不支持 Webgl无浮点纹理...
《高性能JavaScript》揭示的技术和策略能帮助你在开发过程中消除性能瓶颈。你将会了解如何提升各方面的性能,包括代码的加载、运行、DOM交互、页面生存周期等。雅虎的前端工程师Nicholas C. Zakas和其他五位...
Node.js Web开发-第四版 ... Node.js的主要重点是开发高性能,高可伸缩性的Web应用程序,并且在其他领域也得到了广泛的应用。 Electron是基于Chrome引擎的基于Node.js的包装器,是流行的桌面应用程序(例如Atom和Visua
, 读者将学会使用Node.js 和MongoDB来建立更具可扩展性的高性能网站,并利用AngularJS 创新的MVC 方法构建更有效的网页和应用程序,以及把这三者结合在一起使用,从而提供卓越的下一代Web解决方案。, 《Node.js+...
汇总前端知识分享,各类书籍打包奉上,满足当前环境下前端知识技能学习,该系列包括用AngularJS开发下一代Web...高性能JavaScript;网站重构—应用Web标准进行设计[中文版];悟透JavaScript;用AngularJS开发下一代Web应用
《高性能JavaScript》揭示的技术和策略能帮助你在开发过程中消除性能瓶颈。你将会了解如何提升各方面的性能,包括代码的加载、运行、DOM交互、页面生存周期等。雅虎的前端工程师Nicholas C. Zakas和其他五位...
第5章 使用Node.js进行Web开发 79 5.1 准备工作 80 5.1.1 使用http模块 82 5.1.2 Express框架 83 5.2 快速开始 84 5.2.1 安装Express 84 5.2.2 建立工程 85 5.2.3 启动服务器 86 5.2.4 工程的结构...
Vue.js 2个Web开发项目这是发布的的代码存储库。 它包含从头到尾完成本书所必需的所有支持项目文件。关于这本书您想让您的Web应用程序具有出色的响应能力吗? 您是否对应用程序的性能感到不满意,并期待尝试使应用...
Node.js 框架可以帮助你开发出更友好的 web 应用。Node.js 框架的许多特性和功能也能开发出大型的 web 应用。下面我们来介绍 21 款最好的 Node.js 框架,帮助开发者快速开发 web 应用。 Express Total total.js ...
是一个高性能、功能丰富的库,用于在 Web 上创建交互式地图。它可以显示从任何来源加载的地图图块、矢量数据和标记。
您是否要构建可扩展的高性能Web应用程序? 利用JavaScript生态系统的功能来运行,构建和测试全栈应用程序。 本课程将指导您使用同构JavaScript框架构建全栈应用程序。 您将使用JavaScript中的MEVN堆栈来构建Web应用...
作为一个高性能、事件驱动的非阻塞I/O模型,Node.js在web开发领域受到了广泛关注和应用。以下是关于七天学会Node.js的一些介绍: 第一天:了解Node.js及其特点 首先需要了解Node.js的背景、特点和优势。它使用...
骨干公告板 使用身份验证演示backbone.js。 介绍 此演示旨在说明如何将身份验证添加到基于 Backbone.js 和 Node 构建的多用户... - 用于 node.js 的高性能、高级 Web 开发。 - 受 Haml 影响很大的高性能模板引擎,并使
Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非...
JavaScript代码在web应用程序中经常用到,但是很多开发者忽视了一些性能方面的知识,如何编写高性能javascript代码呢?接下来,小编跟大家一起学习