- 浏览: 818369 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
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 3133有时我们需要程序动态生成jsp文件,采取系统默认的编码操作的文 ... -
was6.0发布struts2项目异常
2010-11-18 18:39 2016[10-11-18 18:31:33:609 CST] 000 ... -
利用spring提供的字符编码过滤器
2010-11-14 11:55 2052<!-- spring的字符集过滤器 --> ... -
简单的几句CSS布局口诀
2010-11-10 16:41 1058简单的几句CSS布局口诀,就可以写出精简,标准的样式。 ... -
commons-email笔记
2010-11-10 14:38 1402import java.io.UnsupportedE ... -
如何解决 调用jar程序时出现 outofMemory的问题
2010-10-29 12:02 1277我们在调用 打包好的java程序时,如果程序要加载大量数据的话 ... -
GC策略的调优
2010-09-30 22:30 1656GC 策略在 G1 还没成熟的情况下,目前主要有串行、并 ... -
关于Spring和WebLogic版本兼容的一点小提示
2010-09-30 16:31 2100首先 WebLogic 的各个版本和 JDK 绑定的很紧, 或 ... -
删除WebLogic 10的缓存
2010-09-30 16:07 4672在WebLogic 10上部署了一个应用,最近作了更新并重新部 ... -
weblogic如何强制先加载web-inf/lib下的jar
2010-09-30 16:05 4832方法1: 修改WEB-INF\weblogic.xml (如 ... -
用Log4j自动生成日志
2010-09-27 13:28 1678Log4j是Apache基金会的一 ... -
java smslib发送短信
2010-09-10 10:02 1656public class SendMessage { ... -
Spring定时器的两种实现方式
2010-09-01 21:07 1532有两种流行Spring定时 ... -
使用 Commons-Email 在邮件内容中直接嵌入图片
2010-08-31 20:25 1361我们在发送邮件的时候,如果使用HTML在邮件内容中嵌入图片,& ... -
Struts2中转换Date类型的问题
2010-08-29 09:43 1396Web开发会涉及到很多类型转换的情况。我们知道,页面中的一切值 ... -
java smslib 发送短信错误信息
2010-08-25 15:02 4274org.smslib.GatewayException: GS ... -
rxtx取代javax.comm实现Java跨平台设备端口通信
2010-08-24 08:53 2189From Rxtx <!-- start conte ... -
javascript汉字转拼音代码
2010-08-22 08:21 4612使用方法(1):pinyin.go('汉字'); //例:张家 ... -
关于IE等浏览器在下载JAR文件时的,将后缀更改为zip等问题及解决方案
2010-08-03 12:19 1238httpd.conf这个文件中的mime.types上面,打开 ...
相关推荐
在进行高性能Web开发时,加载JavaScript(JS)文件是构建快速响应网站的关键环节。JavaScript作为一种广泛使用的脚本语言,能够为网页添加交互性和动态效果,但其加载方式直接影响着页面的性能。下面详细介绍在Web...
《高性能JavaScript》揭示的技术和策略能帮助你在开发过程中消除性能瓶颈。你将会了解如何提升各方面的性能,包括代码的加载、运行、DOM交互、页面生存周期等。雅虎的前端工程师Nicholas C. Zakas和其他五位...
Cocos2d-JS是Cocos2d-x项目的一部分,是一个跨平台的游戏开发框架,它将JavaScript和C++的优势结合在一起,使得开发者可以用JavaScript编写代码,同时享受到高性能的原生应用体验。该框架支持创建2D游戏、教育应用、...
在JavaScript环境下,Web-IFC-Three库为开发人员提供了能力,可以在浏览器或Node.js服务器端解析IFC模型,并将其转换为可供Three.js渲染的几何图形。Three.js是一个广泛使用的JavaScript库,用于创建和展示3D计算机...
1. **跨平台**:Cocos2d-JS 允许开发者使用 JavaScript 语言编写一次代码,可以部署在 iOS、Android、Web 浏览器等多个平台上,极大地提高了开发效率和代码的复用性。 2. **渲染引擎**:Cocos2d-JS 基于 ...
- 使用`async`或`defer`属性加载JavaScript文件,或者将加载等待特效的代码放在`window.onload`或`DOMContentLoaded`事件中,可以避免阻塞页面的初始渲染。 5. **响应式设计**: - 加载等待效果应适应各种屏幕...
`asset-pipe-js-writer`能帮助开发者实现智能的JavaScript馈送策略,比如按需加载(lazy loading)、异步加载(async loading)等,从而提高页面性能。 ### 功能特性 1. **代码预处理**:支持ES6+语法转换,让...
5. **高性能Web应用的构建** - 性能优化技术,包括资源加载管理、缓存策略等。 - 网络通信优化策略,如WebSocket、Server-Sent Events等。 6. **JavaScript框架与库的选择与使用** - 常见的JavaScript框架(如...
页面延迟加载技术是一种优化网页性能的方法,它允许我们推迟非关键资源的加载,直到它们真正需要时才进行加载。在给定的标题和描述中提到的"lazyload.js"和"scrollloading.js"就是实现这一功能的JavaScript库。 1. ...
延迟加载(Lazy Load)是一种...7. **总结**:延迟加载JS和CSS是现代Web开发中的重要优化手段,它通过按需加载策略,平衡了用户体验、性能和资源消耗。理解并掌握这种技术,对于创建高性能、响应迅速的网站至关重要。
webgl-heatmap, 高性能的web/js显示库 Heatmapwebgl-heatmap.js 是一个用于高性能热图显示的JavaScript库。演示在 codeflow.org 现场演示。如何使用它实例化新的热图,错误可以是以下之一:不支持 Webgl无浮点纹理...
JavaScript,作为全球最广泛使用的编程语言之一,是Web开发的核心组成部分。它赋予了网页动态交互的能力,使得用户可以在浏览器端与网页进行实时互动。本资源库包含了JavaScript开发的全面知识,从基础语法到高级...
《高性能JavaScript》揭示的技术和策略能帮助你在开发过程中消除性能瓶颈。你将会了解如何提升各方面的性能,包括代码的加载、运行、DOM交互、页面生存周期等。雅虎的前端工程师Nicholas C. Zakas和其他五位...
Node.js Web开发-第四版 ... Node.js的主要重点是开发高性能,高可伸缩性的Web应用程序,并且在其他领域也得到了广泛的应用。 Electron是基于Chrome引擎的基于Node.js的包装器,是流行的桌面应用程序(例如Atom和Visua
Rosid Handler JS 提供了智能加载机制,能够根据需求动态加载JavaScript文件。这种按需加载的方式有助于减少首屏加载时间,改善用户体验。通过延迟加载非关键路径的脚本,开发者可以确保主要功能先被加载,从而提高...
, 读者将学会使用Node.js 和MongoDB来建立更具可扩展性的高性能网站,并利用AngularJS 创新的MVC 方法构建更有效的网页和应用程序,以及把这三者结合在一起使用,从而提供卓越的下一代Web解决方案。, 《Node.js+...
1. **高性能**:JSTree通过延迟加载和分页策略,确保在处理大数据集时保持流畅的用户体验。它仅在需要时加载节点,降低了内存占用和计算需求。 2. **交互性**:提供了丰富的API和事件系统,允许开发者自定义各种...
- **WKWebView**:Apple推出的高性能WebView组件,支持更现代的Web标准。 - **使用方式**:通过加载本地HTML文件或远程URL来展示Web内容。 #### 四、高级技术点 **4.1 HybridWebView架构设计** - **核心思路**:...