李俊良
- 浏览: 142242 次
- 性别:
- 来自: 北京
-
文章分类
- 全部博客 (104)
- Javascript For XML (3)
- Ajax (4)
- JS 地图API 学习 (0)
- DIV+CSS (10)
- javascript兼容性 (6)
- javascript对象讨论 (3)
- 前端优化思考 (7)
- 遐想 (2)
- 一些小函数 (10)
- cheat sheets (0)
- YUI3分析 (3)
- nodejs (2)
- 数据恢复 (1)
- Javascript 等于号的研究 (1)
- Javascript操作符理解 (1)
- javascript原始数据类型 (1)
- javascript (2)
- erlang nitrogen (7)
- Erlang (6)
- yii (1)
最新评论
-
46311875：
SB。 搞得那么复杂。哈哈
html5单页面应用程序之历史记录控制 -
李俊良：
正准备处理移动版本的兼容，貌似移动端的用纯web做的比较少
瀑布流网站记录 -
wolf199103：
花瓣网：http://huaban.com/鼻祖Pintere ...
瀑布流网站记录 -
firstfall：
BuN_Ny 写道最近很不喜欢这种只贴代码的帖子。总觉得是想表 ...
前端js也能写算法 -
Sky_YiBai：
楼主，可不可以把帖子重新编辑下，别光写代码呢。。。写点思路之类 ...
前端js也能写算法
在很多优化法则中都提到，尽量将javascript放到页面底部，这是为什么呢
我通过firebug进行了下简单的分析
看下图
本页面首尾都存在javascript代码
我们分析得出
1、整个页面文档家在结束才开始加载css和js以及其他的数据
2、当顶部的所有js都家在结束之后才可以加载页面中的图片
3、顶部的common.css和common.js几乎是同时开始加载
4、底部的loader-min.js和离他最近的footer.jpg也是同时开始加载
由此，我们可以分析出，至少在这个版本的firefox中
从http的角度看，整个document是使用的一个HTTP连接，并且必须将这个HTTP连接结束后才会创建新的连接。
css和js可以共用一个HTTP连接，他们不能和img图片使用同一个连接
css和js可以同时进行加载，但不能和图片同时加载。
从这里面可以得出的结论是
1、尽量减少整个document的大小和顶部css的大小，加快他们的加载，甚至在整个页面比较小的情况下可以将css放在底部。
2、javascript放在底部，这样就可以和图片几乎同时下载，让图片尽快的下载下来
- 大小: 79.7 KB
分享到：
评论
25 楼
ufoqhmdt
2011-10-07
kjj 写道
根据大牛们检验，js等资源一般放在<head>中加载时最好的方案，具体原因就不说了
哪些大牛?莫非你就是那些"大牛们"的头?
24 楼
cwy534363081
2011-09-03
23 楼
wang3065
2011-05-27
路过。。。
22 楼
fighter_Jon
2010-11-01
优化应该是个权衡的过程
js放在底部是防止js对之后资源造成阻塞
但是如果是web app应用部分js也需要放在head部分 保证页面功能完整 而不是页面先行
js放在底部是防止js对之后资源造成阻塞
但是如果是web app应用部分js也需要放在head部分 保证页面功能完整 而不是页面先行
21 楼
qchong
2010-11-01
kjj 写道
根据大牛们检验，js等资源一般放在<head>中加载时最好的方案，具体原因就不说了
根据雅虎的前端优化14条法则，js是要放在底部</body>前的。
20 楼
xiaoyu
2010-10-30
明显大家应该再看看《Even Faster Web Sites》 这本书。 国内现在中文版应该出来了。
这个书会有进一步的优化（主要是对ajax》
这个书会有进一步的优化（主要是对ajax》
19 楼
smildlzj
2010-10-30
罗卜头 写道
给你们展示下我新公司的一个公用JSP页面,这个JSP被我54掉了
<script language="javascript" type="text/javascript" src="<c:url value='/scripts/jquery-1.3.2.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/i18n/grid.locale-en.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/i18n/grid.locale-cn.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/jquery.jqGrid.min.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/json2.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/jquery.tree.min.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/jquery.tree.checkbox.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/jquery.firstebox.pack.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/jquery.validate.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/i18n/jquery.validate.messages_cn.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/framework.ui.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/jquery.datepick.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/jquery.scroll-follow.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/jquery.datepick-zh-CN.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/jquery.tooltip.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/jquery.scroll-follow.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/select-option-disabled-emulation.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/jmessagebox-1.0.0.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/jquery-ui-1.7.2.custom.min.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/timepicker.js'/>"></script> <link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/styles/portal-style.css' />" /> <link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/styles/messagebox.css' />" /> <link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/styles/jquery-ui-1.7.2.custom.css'/>" /> <link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/styles/jquery-ui-1.7.2.c3.css'/>" /> <link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/styles/ui.jqgrid.css'/>" /> <link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/styles/jquery.searchFilter.css'/>" /> <link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/styles/jstree.default.style.css'/>" /> <link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/styles/jstree.chechbox.style.css'/>" /> <link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/styles/firstebox.css'/>" /> <link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/styles/jquery.datepick.css' />" /> <link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/styles/jquery.tooltip.css' />" /> <link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/styles/background.screen.css'/>" /> <link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/styles/validate-error-style.css' />" />
比我公司还厉害....
不过我有个东西....在线合并js和css...只不过还没正式使用..
18 楼
罗卜头
2010-10-30
给你们展示下我新公司的一个公用JSP页面,这个JSP被我54掉了
<script language="javascript" type="text/javascript" src="<c:url value='/scripts/jquery-1.3.2.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/i18n/grid.locale-en.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/i18n/grid.locale-cn.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/jquery.jqGrid.min.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/json2.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/jquery.tree.min.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/jquery.tree.checkbox.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/jquery.firstebox.pack.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/jquery.validate.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/i18n/jquery.validate.messages_cn.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/framework.ui.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/jquery.datepick.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/jquery.scroll-follow.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/jquery.datepick-zh-CN.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/jquery.tooltip.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/jquery.scroll-follow.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/select-option-disabled-emulation.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/jmessagebox-1.0.0.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/jquery-ui-1.7.2.custom.min.js'/>"></script> <script language="javascript" type="text/javascript" src="<c:url value='/scripts/timepicker.js'/>"></script> <link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/styles/portal-style.css' />" /> <link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/styles/messagebox.css' />" /> <link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/styles/jquery-ui-1.7.2.custom.css'/>" /> <link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/styles/jquery-ui-1.7.2.c3.css'/>" /> <link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/styles/ui.jqgrid.css'/>" /> <link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/styles/jquery.searchFilter.css'/>" /> <link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/styles/jstree.default.style.css'/>" /> <link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/styles/jstree.chechbox.style.css'/>" /> <link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/styles/firstebox.css'/>" /> <link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/styles/jquery.datepick.css' />" /> <link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/styles/jquery.tooltip.css' />" /> <link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/styles/background.screen.css'/>" /> <link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/styles/validate-error-style.css' />" />
17 楼
罗卜头
2010-10-30
kjj 写道
根据大牛们检验，js等资源一般放在<head>中加载时最好的方案，具体原因就不说了
我只想知道是哪位大牛,或者你说的是反语？！？！
16 楼
罗卜头
2010-10-30
JS如果没有页面加载完成前就要执行的必要,都放下面吧
如果实在是太多,要考虑延迟加载了
关于下载,其实可以搞个同域名的iframe进行下载,不会跟主页面发生 下载并发冲突
下载完成后,回调主页面的方法
不过创建iframe有点慢,能不用就最好不用,纠结啊
如果实在是太多,要考虑延迟加载了
关于下载,其实可以搞个同域名的iframe进行下载,不会跟主页面发生 下载并发冲突
下载完成后,回调主页面的方法
不过创建iframe有点慢,能不用就最好不用,纠结啊
15 楼
罗卜头
2010-10-30
kjj 写道
jsdit 写道
我之前是放在head里面，然后经常遇到DOM没有加载完，然后JS就调用，报出空的错误。没有使用JQuery，所以也没有ready()方法，后来就把JS放在底部了。
汗，ready ~= window.onload;
if (document.getElmentById && document.getElementByTagNames)
好像是这样吧,jQuery应该还有别的判断...
乃觉得这种判断跟你 window.onload是一回事吗?
14 楼
fantasyla5
2010-10-30
这个嘛，也不一定了，有些js代码好像只能放在head中加载。
13 楼
smildlzj
2010-10-30
PS...
LZ知识没学好..
每一个读取js,css,图片什么都是一个http连接,关长连接啥事...
CSS尽量放头部,
js尽量放最后(不过一般还是会放头部)
css,图片会并行下载
LZ知识没学好..
每一个读取js,css,图片什么都是一个http连接,关长连接啥事...
CSS尽量放头部,
js尽量放最后(不过一般还是会放头部)
css,图片会并行下载
12 楼
smildlzj
2010-10-30
kjj 写道
jsdit 写道
我之前是放在head里面，然后经常遇到DOM没有加载完，然后JS就调用，报出空的错误。没有使用JQuery，所以也没有ready()方法，后来就把JS放在底部了。
汗，ready ~= window.onload;
汗....差很多好不好...
ready=domLoadedComplete
11 楼
kjj
2010-10-29
jsdit 写道
我之前是放在head里面，然后经常遇到DOM没有加载完，然后JS就调用，报出空的错误。没有使用JQuery，所以也没有ready()方法，后来就把JS放在底部了。
汗，ready ~= window.onload;
10 楼
Saito
2010-10-29
嗯.hoooooooooopo说的没错.
http1.1规范里面建议每个domain两个连接并行下载.所以可以把图片什么的分域名.
脚本会阻塞的原因是: 浏览器不知道脚本会不会修改DOM. 比如脚本里面可能会call document.write.
好吧.全是抄上面的.
ps: Yslow就是根据这本书进行评分的. (具体不知道现在情况怎么样了.
http1.1规范里面建议每个domain两个连接并行下载.所以可以把图片什么的分域名.
脚本会阻塞的原因是: 浏览器不知道脚本会不会修改DOM. 比如脚本里面可能会call document.write.
好吧.全是抄上面的.
ps: Yslow就是根据这本书进行评分的. (具体不知道现在情况怎么样了.
9 楼
orcl_zhang
2010-10-29
Hooopo 写道
hyj1254 写道
kjj 写道
根据大牛们检验，js等资源一般放在<head>中加载时最好的方案，具体原因就不说了
这个不说还真不知道原因~~
另外lz的图片可以合并下
具体原因是啥？哪位大牛的经验？
根据yahoo YUI团队总结的网站前端优化14条原则，是将脚本放在底部，将样式表放在顶部。
原因：
浏览器在下载js的时候不能并行下载，会阻塞其他资源的下载，这样导致整体响应时间变长。
ps：lz这图里面外部域名很多，看得很乱，不便于分析，最好换个简单的测试下
Yslow写的很清楚啊
你的Yslow白装了...
顺着左边,put javascript at button..
8 楼
Hooopo
2010-10-29
hyj1254 写道
kjj 写道
根据大牛们检验，js等资源一般放在<head>中加载时最好的方案，具体原因就不说了
这个不说还真不知道原因~~
另外lz的图片可以合并下
具体原因是啥？哪位大牛的经验？
根据yahoo YUI团队总结的网站前端优化14条原则，是将脚本放在底部，将样式表放在顶部。
原因：
浏览器在下载js的时候不能并行下载，会阻塞其他资源的下载，这样导致整体响应时间变长。
ps：lz这图里面外部域名很多，看得很乱，不便于分析，最好换个简单的测试下
7 楼
paranoid945
2010-10-29
不要管别人的事，管好你自己的事...
6 楼
jsdit
2010-10-29
我之前是放在head里面，然后经常遇到DOM没有加载完，然后JS就调用，报出空的错误。没有使用JQuery，所以也没有ready()方法，后来就把JS放在底部了。
发表评论
-
移动版和PC网站兼容的做法研究
2013-09-18 12:19 892现在兼容做移动版 ... -
排序算法
2011-10-26 20:31 507// ---------- 一些排序算法 // ... -
高效js
2011-01-08 15:28 5834/** 高效 Javascript 编码 Fas ... -
web前端优化
2010-07-19 10:06 864JavaScript方面 put script at bot ... -
从长连接推送技术发出的一些思考
2010-01-13 11:55 3080服务器推送技术，经过考虑，其实发现说白了，就是通过某种手段让服 ... -
从tab选项卡发出的一个性能思考和延升
2010-01-11 16:07 1593tab选项卡为什么如此流行，很多js框架基本上都有选项卡这个组 ...
相关推荐
近年来网站客户端开发规模越来越大并且有很多由AJAX开发的复杂页面， 系统中的客户端脚本大量增加，前端开发就产生了诸如代码量大、组织困难、难 ...把前端优化技术 应用到项目实现中，具体分析了各自的性能优化效果。
web前端笔试题面试题汇总+前端优化总结 web前端笔试题面试题汇总+前端优化总结 web前端笔试题面试题汇总+前端优化总结 web前端笔试题面试题汇总+前端优化总结 web前端笔试题面试题汇总+前端优化总结 web前端笔试题...
1500个前端开发常用JavaScript特效1500个前端开发常用JavaScript特效1500个前端开发常用JavaScript特效1500个前端开发常用JavaScript特效1500个前端开发常用JavaScript特效1500个前端开发常用JavaScript特效1500个...
javascript实现前端成语点击验证优化.docx
JavaScript网上答疑系统-前端毕业设计JavaScript网上答疑系统-前端毕业设计JavaScript网上答疑系统-前端毕业设计JavaScript网上答疑系统-前端毕业设计JavaScript网上答疑系统-前端毕业设计JavaScript网上答疑系统-...
网盘资源_前端JavaScript面试技巧，百度网盘资源直接下载，下载直接视频观看。
JavaScript前端开发案例教程，包含本书中所有实例源代码
《单页Web应用：JavaScript从前端到后端》大约三分之二的内容专门讲解单页Web应用的客户端开发，先定义何为JavaScript单页应用，接着介绍书中使用的单页Web应用的架构，然后依次讲解Shell模块、功能模块、Model模块...
前端学习笔记整理：HTML, CSS, JavaScript, Web 性能优化, 工具, 框架, 资源 前端学习笔记整理：HTML, CSS, JavaScript, Web 性能优化, 工具, 框架, 资源 前端学习笔记整理：HTML, CSS, JavaScript, Web 性能优化, ...
Web前端之JavaScript框架学习总结.docx
Web 前端性能优化思路与学习方法Web 前端性能优化思路与学习方法Web 前端性能优化思路与学习方法
html5前端基础之JavaScript基础
代码级别的优化，例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等来讲述前端性能优化的多个方式。 目录结构如下： 一、WEB性能优化相关理论 二、前端性能优化的目的 三、前端性能...
本项目是基于Javascript的前端代码设计源码，包含161个文件，其中包括81个PNG图像文件、30个JavaScript文件、20个CSS样式文件、19个HTML文件、6个GIF图像文件、1个DS_Store文件、1个Project文件、1个JSON配置文件和1...
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十：正则表达式。源码txt格式。
2022前端笔试题 - javascript.pdf
2023前端最新面试题之JavaScript
前端编码规范-JavaScript.pdf