论坛首页 → Web前端技术论坛 →

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

浏览 13378 次
锁定老帖子 主题：前端优化分析 之 javascript放在底部
精华帖 (0) :: 良好帖 (1) :: 新手帖 (3) :: 隐藏帖 (8)
作者 正文
  • Saito
  • 等级: 四星会员
  • 性别:
  • 文章: 446
  • 积分: 430
  • 来自: 杭州
   发表时间：2010-10-29   最后修改：2010-10-29
嗯.hoooooooooopo说的没错.

http1.1规范里面建议每个domain两个连接并行下载.所以可以把图片什么的分域名.

脚本会阻塞的原因是: 浏览器不知道脚本会不会修改DOM. 比如脚本里面可能会call document.write.



好吧.全是抄上面的.


ps: Yslow就是根据这本书进行评分的. (具体不知道现在情况怎么样了.
返回顶楼
          回帖地址
0 请登录后投票
  • kjj
  • 等级: 二星会员
  • 性别:
  • 文章: 1018
  • 积分: 266
  • 来自: 陕西
   发表时间：2010-10-29  
jsdit 写道
我之前是放在head里面，然后经常遇到DOM没有加载完，然后JS就调用，报出空的错误。没有使用JQuery，所以也没有ready()方法，后来就把JS放在底部了。

汗，ready ~= window.onload;
返回顶楼
          回帖地址
0 请登录后投票
  • smildlzj
  • 等级: 初级会员
  • 文章: 125
  • 积分: 90
  • 来自: ...
   发表时间：2010-10-30  
kjj 写道
jsdit 写道
我之前是放在head里面，然后经常遇到DOM没有加载完，然后JS就调用，报出空的错误。没有使用JQuery，所以也没有ready()方法，后来就把JS放在底部了。

汗，ready ~= window.onload;


汗....差很多好不好...

ready=domLoadedComplete
返回顶楼
          回帖地址
0 请登录后投票
  • smildlzj
  • 等级: 初级会员
  • 文章: 125
  • 积分: 90
  • 来自: ...
   发表时间：2010-10-30  
PS...
LZ知识没学好..
每一个读取js,css,图片什么都是一个http连接,关长连接啥事...

CSS尽量放头部,
js尽量放最后(不过一般还是会放头部)
css,图片会并行下载
返回顶楼
          回帖地址
0 请登录后投票
  • fantasyla5
  • 等级: 初级会员
  • 性别:
  • 文章: 2
  • 积分: 30
  • 来自: 成都
   发表时间：2010-10-30  
这个嘛，也不一定了，有些js代码好像只能放在head中加载。
返回顶楼
          回帖地址
0 请登录后投票
  • 罗卜头
  • 等级: 初级会员
  • 性别:
  • 文章: 200
  • 积分: 0
  • 来自: 北京
   发表时间：2010-10-30  
kjj 写道
jsdit 写道
我之前是放在head里面，然后经常遇到DOM没有加载完，然后JS就调用，报出空的错误。没有使用JQuery，所以也没有ready()方法，后来就把JS放在底部了。

汗，ready ~= window.onload;


if (document.getElmentById && document.getElementByTagNames)
好像是这样吧,jQuery应该还有别的判断...
乃觉得这种判断跟你 window.onload是一回事吗?
返回顶楼
          回帖地址
0 请登录后投票
  • 罗卜头
  • 等级: 初级会员
  • 性别:
  • 文章: 200
  • 积分: 0
  • 来自: 北京
   发表时间：2010-10-30  
JS如果没有页面加载完成前就要执行的必要,都放下面吧
如果实在是太多,要考虑延迟加载了
关于下载,其实可以搞个同域名的iframe进行下载,不会跟主页面发生 下载并发冲突
下载完成后,回调主页面的方法

不过创建iframe有点慢,能不用就最好不用,纠结啊
返回顶楼
          回帖地址
0 请登录后投票
  • 罗卜头
  • 等级: 初级会员
  • 性别:
  • 文章: 200
  • 积分: 0
  • 来自: 北京
   发表时间：2010-10-30  
kjj 写道
根据大牛们检验，js等资源一般放在<head>中加载时最好的方案，具体原因就不说了


我只想知道是哪位大牛,或者你说的是反语？！？！
返回顶楼
          回帖地址
0 请登录后投票
  • 罗卜头
  • 等级: 初级会员
  • 性别:
  • 文章: 200
  • 积分: 0
  • 来自: 北京
   发表时间：2010-10-30   最后修改：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' />" />
返回顶楼
          回帖地址
0 请登录后投票
  • smildlzj
  • 等级: 初级会员
  • 文章: 125
  • 积分: 90
  • 来自: ...
   发表时间：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...只不过还没正式使用..
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics