`
李俊良
  • 浏览: 143867 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

前端优化分析 之 javascript放在底部

JavaScriptCSSjQueryJSP脚本 
阅读更多

在很多优化法则中都提到，尽量将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
分享到：
| jquery 兼容性问题 IE7出错，IE6，IE8其 ...
评论
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部分 保证页面功能完整 而不是页面先行
21 楼 qchong 2010-11-01  
kjj 写道
根据大牛们检验，js等资源一般放在<head>中加载时最好的方案，具体原因就不说了

根据雅虎的前端优化14条法则，js是要放在底部</body>前的。
20 楼 xiaoyu 2010-10-30  
明显大家应该再看看《Even Faster Web Sites》 这本书。 国内现在中文版应该出来了。

这个书会有进一步的优化（主要是对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有点慢,能不用就最好不用,纠结啊

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,图片会并行下载
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就是根据这本书进行评分的. (具体不知道现在情况怎么样了.
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放在底部了。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    web前端优化方法

    13. **优化样式表和脚本顺序**：将CSS放在头部，JavaScript放在底部，使得页面内容先加载，提高用户体验。 14. **避免JavaScript阻塞渲染**：延迟非首屏内容的JavaScript加载，让页面先呈现出来。 15. **缩小原始...

    web前端性能分析工具导引

    此外，通过将CSS放在文档顶部，JavaScript移至底部，以及避免使用CSS表达式，可以改善页面渲染速度。同时，减少DNS查找次数、合并脚本和样式表，以及对JavaScript和CSS进行最小化处理，也是提高性能的有效手段。另外...

    前端性能优化原理与实践.zip

    9. **JavaScript优化**：避免使用阻塞DOM渲染的同步脚本，使用异步或 defer 属性，或者将脚本放在文档底部。 10. **图片优化**：使用适当的图片格式（如WebP）、压缩图片大小，使用响应式图片（srcset & sizes），...

    WEB应用前端优化技术与手段策略

    前端优化涵盖了多个方面，包括页面加载优化、缓存利用、JavaScript优化以及CSS优化。这些技术有助于加快页面加载速度，减少HTTP请求，提高响应时间，并且能有效地降低服务器压力。 1. **页面加载优化** - **减少...

    前端大厂最新面试题-前端性能优化.docx

    5. 将 CSS 放在文件头部，JavaScript 文件放在底部 将 CSS 文件放在文件头部可以提高前端性能，因为浏览器可以先加载 CSS 文件，然后再加载 HTML 文件和 JavaScript 文件。将 JavaScript 文件放在底部可以减少阻塞 ...

    较试实用--web前端优化知识总结+笔试+面试总结1

    Web前端优化是提升网站性能和用户体验的关键步骤，尤其在JavaScript和HTML、CSS为主的前端开发中。本文主要讨论了两个层面的优化策略：页面级别优化和代码级别优化。 首先，页面级别优化关注的是整个页面的加载速度...

    Web 前端优化最佳实践.rar

    在Web开发领域，前端优化是提升用户体验和网站性能的关键环节。"Web前端优化最佳实践"这一主题涵盖了..."Web前端优化最佳实践.pdf"这份文档可能会详细探讨这些点，深入分析每个优化策略的原理和实现方式，值得一读。

    web前端优化

    3. **JavaScript优化**：将JavaScript放在页面底部，确保HTML内容先加载，提高用户感知速度。使用模块化工具（如CommonJS、ES6模块）管理代码，减少代码冗余。利用Tree Shaking和Dead Code Elimination等技术减少...

    前端工程与性能优化[归纳].pdf

    而将CSS放置在头部和JavaScript放在底部，则是为了确保页面尽快呈现。这些优化措施与并行开发的效率冲突，因此需要在前端工程设计中寻找平衡点。例如，通过构建系统自动化完成资源合并和位置调整，可以在保持优化的...

    前端面试资料（包含web前端优化方法和js面试常见内容以及一些面试常见问题）

    7. **将CSS样式表放在顶部，把JavaScript放在底部** 这是因为浏览器在解析HTML文档时，默认情况下遇到CSS就会停止解析并开始渲染，而遇到JavaScript则会暂停渲染直到脚本执行完毕。因此，将CSS放在顶部可以尽早...

    Web前端开发培训Javascript教程一.doc

    JavaScript，作为Web前端开发的核心技术之一，是一种轻量级的解释型编程语言，主要用于增强网页交互性和动态功能。它能够嵌入HTML文档中，并由所有现代浏览器执行，从而赋予网页活力。JavaScript的主要特点包括其易...

    JavaScript优化以及前段开发小技巧

    【JavaScript优化以及前端开发小技巧】 前端开发中的性能优化至关重要，因为这直接影响到用户体验和网站的加载速度。本文主要探讨了网络优化和JavaScript优化两个方面，以提高网页加载效率。 一、网络优化 1. ...

    Web2.0前端性能优化方案.pdf

    由于大部分用户等待时间主要消耗在前端加载，因此前端优化成为了性能提升的关键。以下是一些针对Web2.0前端性能优化的具体策略： 1. **减少HTTP请求次数**：页面加载时间很大程度上取决于网络请求的数量。每增加一...

    前端性能优化

    本文将基于提供的标签“源码”和“工具”，以及压缩包子文件的文件名称“yuicompressor-2.4.2.jar”和“YUIAnt-zh_CN.jar”，探讨这两个工具在前端优化中的应用。 首先，`yuicompressor-2.4.2.jar` 是 Yahoo! 的一...

    纯前端首屏优化1

    首屏优化是提升网站性能和用户体验的关键步骤，尤其是在前端开发中。在“纯前端首屏优化1”的场景中，我们面对的是一个数据密集型且权限层次丰富的首页，需要通过多种策略来确保快速加载和流畅的交互体验。 首先，...

    yslow前端性能测试工具

    6. **将脚本放在底部**：JavaScript文件的加载会阻止页面渲染，将其放在底部可以避免阻塞用户看到页面内容。 7. **避免使用CSS表达式**：它们会频繁计算，影响页面性能。 8. **减少DOM元素数量**：过多的DOM元素会...

    前端性能优化建议

    JavaScript放在底部，并使用异步加载，以减少页面渲染的延迟。 2. 避免空的src属性：确保img、iframe等标签的src属性正确设置，避免无意义的页面重载。 3. 避免重置图像大小：减少DOM操作，避免频繁改变图像大小...

    浅谈H5前端性能测试实践1

    优化CSS和JavaScript的加载顺序，如将CSS放在头部，JavaScript放在底部，以减少阻塞渲染。 二、白屏问题分析 白屏问题通常是由于页面加载过程中的某个阶段耗时过长导致的。开发者可以利用Chrome Devtools的...

Magicbox
Global site tag (gtag.js) - Google Analytics