WEB开发编码原则:优化Javascript文件,并将其放到页面底部

在这篇博文中指出:

1、整个页面文档家在结束才开始加载css和js以及其他的数据

2、当顶部的所有js都家在结束之后才可以加载页面中的图片

3、顶部的common.css和common.js几乎是同时开始加载

4、底部的loader-min.js和离他最近的footer.jpg也是同时开始加载

从这里面可以得出的结论是

1、尽量减少整个document的大小和顶部css的大小,加快他们的加载,甚至在整个页面比较小的情况下可以将css放在底部。

2、javascript放在底部,这样就可以和图片几乎同时下载,让图片尽快的下载下来



回复感觉也很有道理:

22 楼 fighter_Jon 2010-11-01

优化应该是个权衡的过程 
js放在底部是防止js对之后资源造成阻塞 
但是如果是web app应用部分js也需要放在head部分 保证页面功能完整 而不是页面先行

13 楼 smildlzj 2010-10-30

PS... 
LZ知识没学好.. 
每一个读取js,css,图片什么都是一个http连接,关长连接啥事...

CSS尽量放头部, 
js尽量放最后(不过一般还是会放头部) 
css,图片会并行下载

10 楼 Saito 2010-10-29

嗯.hoooooooooopo说的没错.

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

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

根据yahoo YUI团队总结的网站前端优化14条原则,是将脚本放在底部,将样式表放在顶部。

原因: 
浏览器在下载js的时候不能并行下载,会阻塞其他资源的下载,这样导致整体响应时间变长

2 楼 zhxing 2010-10-28

据我所知,这个是由于解析hmtl的解析器有关。。
把js (不关键服务)放在底部--因为解析html 是顺序解析的,可以放到最后解析
把css 放在最头部--因为css早点加载有利于页面的展示,css后加载,页面排版不全都乱了。

时间: 2024-11-06 07:33:36

WEB开发编码原则:优化Javascript文件,并将其放到页面底部的相关文章

移动web开发问题和优化小结

1.前言 到目前为止,互联网行业里,手机越来越智能化,移动端占有的比例越来越高,尤其实在电商,新闻,广告,游戏领域.用户要求越来越高,网站功能越来越好,效果越来越炫酷,这就要求我们产品质量越来越高,web前端开发而言是一个挑战,是一个难题,也是一个机遇.如何让我们所开发的手机页面能有更好的交互体验,就是这篇文章的主旨:移动web开发问题和优化小结.这个只是我自己在开发的时候知道的坑,如果大家有遇到什么别的坑,欢迎补充,或者觉得我哪里写错了,欢迎指点! 2.Meta标签 页面在手机上显示时,增加这

(转)web.config详解之在文件中配置网站默认页面

在<configuration></configuration>中添加下面的配置 <system.webServer>        <defaultDocument>            <files>                <clear />                <add value="index.aspx" />                <add value=&qu

解析WEB开发编码问题

URL: http://tcking.javaeye.com/blog/726643 在进行web开发的时候经常会遇到乱码的问题,乱码一般出现在: 1.写在jsp文件中的中文变成乱码 2.页面的中文都变成乱码 3.后台通过request.getParameter()乱码 编码的基础知识 计算机只能以字节为单位存储和传输信息,而人需要看的是字符串,字节和字符串之间的对应关系就是字符集,例如字符“中”使用UTF-8字符集映射的字节为:E4 B8 AD 三个字节,同样反过来,这三个字节通过UTF-8字

web开发中,前端javascript代码的组织结构

网页包含三个层次: 结构(HTML) 表现(CSS) 行为(javascript) web标准中,三者要分离,网页源代码由三部分组成:.html文件..css文件和.js文件.就是说html文件中不应该含有CSS样式和javascript代码. 这里讨论一下javascript的一种组织结构. //fw.jsvar fw = { page: { index:{}, user:{} }, common: { dialog: {}, table:{} }, } 首先定义一个顶级的变量fw,fw是一个

web开发常见性能优化方式

经常使用的高并发. 高性能web,数据库server. 1.html 静态化 : 如新闻频道更新的非常快,都是通过cms静态生成(门户,信息公布类型的站点,交互性高的如猫扑的大杂烩也是静态化,实时静态化.假设有更新就实时又一次静态化) 更新频率小的 2.图片server分离 3.数据库集群 和库表散列 有web速度缓慢.数据库缓慢. 数据库能够通过 主从数据库,受到成本影响 4. 缓存 站点开发中用到缓存 和 站点架构缓存 5.镜像 6.负载均衡 :解决高负荷和大量并发请求採用的终极解决的方法

python web开发-flask中读取txt文件内容

某些情况下,需要读取flask网站要目录下的txt文件.但是直接在flask网站的目录下创建一个文件是无法访问的.从网站找了一些资料,最终发现通过写一个方法返回txt内容比较简单方便,不过此方法适用于简单的文件读取以及读取量比较小的时候.详细代码如下: @app.route('/<path>')def today(path):base_dir = os.path.dirname(__file__)resp = make_response(open(os.path.join(base_dir,

Web开发者不可不知的15条编码原则

HTML已经走过了近20的发展历程.从HTML4到XHTML,再到最近十分火热的HTML5,它几乎见证了整个互联网的发展.但是,即便到现在,有很多基础的概念和原则依然需要开发者高度注意.下面,向大家介绍这些应该遵循的开发原则. 1.善用DIV来布局 当开发一个Web页面时,要考虑第一件事就是区分页面重点.将这些内容用DIV标签包含起来,页面的代码会呈现出整洁.缩进良好的风格. <div id="header"></div> <div id="bo

web前端之MVC的JavaScript Web富应用开发一:MVC和类

web前端之MVC的JavaScript Web富应用开发一:MVC和类 开篇: 本书以 assert() 和 assertEqual() 函数来展示变量的值或者函数调用的结果. assert() 是一种快捷表述方式, 用来表示一个特定的变量( revolves to true). 这在自动化测试中是一种非常常见的模式. assert() 可以接收两个参数 : 一个值和一个可选的消息. 如果运行结果不是真值, 这个函数将抛出一个异常 : var assert = function(value,

对于Web开发来说 8 个最好的跨平台编辑器

1) Best Cross Platform IDE - Brackets Brackets是一个在前端Web开发和设计人员中最流行的开放源码IDE/代码编辑器之一.它拥有一些实用工具能够将HTML 和CSS推送至浏览,而不需要保存或重新加载页面.这是一个强大的工具,你将会爱上在Bracket中编写代码. 2) Best Cross Platform IDE - Light Table Light Table是由Microsoft Visual Studio部门项目经理Chris  Grange