首页 > 代码库 > web开发性能优化---界面篇
web开发性能优化---界面篇
1、尽量采用div+css布局
DIV+CSS相比较与表格布局的优势：
a.代码精简
由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套，那样将整个页面圈在一个大表格里，使得加载速度很慢。
2、img标签合理使用
a、限制图片大小 20-100k即可，尽量不影响展现的时候去最小化
b、title、alt属性写完整
c、不要为了在HTML 中设置长宽而使用比实际需要大的图片。如果你需要：
<img width=”100″ height=”100″ src=http://www.mamicode.com/”mycat.jpg” alt=”My Cat” />
那么你的图片（mycat.jpg ）就应该是100×100 像素而不是把一个500×500 像素的图片缩小使用。
3、少用js特效展示，避免瞎用js特效，影响加载
主要还是Js调用，直接页面中使用JavaScript语句，还是很占网页体积的,不要全部把js堆积在页面；比如当你增加一个事件句柄时在500 和5000 个DOM 元素中循环效果肯定是不一样的。
4、js、css动态压缩
web系统中免不了要使用大量的javascript和css文件，如开源的javascript框架prototype、jquery、extjs-core等等，这些js框架，少都有几百K，我曾经做过不少项目，都用了
大量的js。特别是extjs，功能实在是强大，却也是体积最大的一个js框架。使用中稍不留神很容易导致你的系统反映缓慢。为了提高js、css文件的下载速度，从而提高页面的响应速度，减小文件的大小才是终极之道。
我之前写到的文章：js、css动态压缩页面代码 可以根据此方法进行代码动态压缩。
5、避免使用死链接
6、为文件头指定Expires 或Cache-Control
这条守则包括两方面的内容：
对于静态内容：设置文件头过期时间Expires 的值为“Never expire” （永不过期）
对于动态内容：使用恰当的Cache-Control 文件头来帮助浏览器进行有条件的请求
11、根据域名划分页面内容
把页面内容划分成若干部分可以使你最大限度地实现平行下载。由于DNS 查找带来的影响你首先要确保你使用的域名数量在2 个到4 个之间。例如，你可以把用到的HTML 内容和动态内容放在www.example.org上，而把页面各种组件（图片、脚本、CSS) 分别存放在statics1.example.org 和statics.example.org 上。
12、使iframe 的数量最小
<iframe> 优点：解决加载缓慢的第三方内容如图标和广告等的加载问题 ；Security sandbox ；并行加载脚本 。
<iframe> 的缺点：即时内容为空，加载也需要时间；会阻止页面加载 ；没有语意 。
13、把样式表置于顶部
在研究Yahoo! 的性能表现时，我们发现把样式表放到文档的<head /> 内部似乎会加快页面的下载速度。这是因为把样式表放到<head /> 内会使页面有步骤的加载显示。
14、使用外部JavaScript 和CSS
很多性能规则都是关于如何处理外部文件的。但是，在你采取这些措施前你可能会问到一个更基本的问题：JavaScript 和CSS 是应该放在外部文件中呢还是把它们放在页面本身之内呢？
在实际应用中使用外部文件可以提高页面速度，因为JavaScript 和CSS 文件都能在浏览器中产生缓存。内置在HTML 文档中的JavaScript 和CSS 则会在每次请求中随HTML 文档重新下载。这虽然减少了HTTP 请求的次数，却增加了HTML 文档的大小。从另一方面来说，如果外部文件中的 JavaScript 和CSS 被浏览器缓存，在没有增加HTTP 请求次数的同时可以减少HTML 文档的大小。
关键问题是，外部JavaScript 和CSS 文件缓存的频率和请求HTML 文档的次数有关。虽然有一定的难度，但是仍然有一些指标可以一测量它。如果一 个会话中用户会浏览你网站中的多个页面，并且这些页面中会重复使用相同的脚本和样式表，缓存外部文件就会带来更大的益处。
许多网站没有功能建立这些指标。对于这些网站来说，最好的坚决方法就是把JavaScript 和CSS 作为外部文件引用。比较适合使用内置代码的例外就是 网站的主页，如Yahoo! 主页和My Yahoo! 。主页在一次会话中拥有较少（可能只有一次）的浏览量，你可以发现内置JavaScript 和CSS 对于终端用户来说会加快响应时 间。
对于拥有较大浏览量的首页来说，有一种技术可以平衡内置代码带来的HTTP 请求减少与通过使用外部文件进行缓存带来的好处。其中一个就是在首页中内置 JavaScript 和CSS ，但是在页面下载完成后动态下载外部文件，在子页面中使用到这些文件时，它们已经缓存到浏览器了。
15、避免使用滤镜
IE 独有属性AlphaImageLoader 用于修正7.0 以下版本中显示PNG 图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支，因此它的问题是多方面的。
完全避免使用AlphaImageLoader 的最好方法就是使用PNG8 格式来代替，这种格式能在IE 中很好地工作。如果你确实需要使用AlphaImageLoader ，请使用下划线_filter 又使之对IE7 以上版本的用户无效。
16、把脚本置于页面底部
脚本带来的问题就是它阻止了页面的平行下载。HTTP/1.1 规范建议，浏览器每个主机名的并行下载内容不超过两个。如果你的图片放在多个主机名上，你可以在每个并行下载中同时下载2 个以上的文件。但是当下载脚本 时，浏览器就不会同时下载其它文件了，即便是主机名不相同。
在某些情况下把脚本移到页面底部可能不太容易。比如说，如果脚本中使用了document.write 来插入页面内容，它就不能被往下移动了。这里可能还会有作用域的问题。很多情况下，都会遇到这方面的问题。
一个经常用到的替代方法就是使用延迟脚本。DEFER 属性表明脚本中没有包含document.write ，它告诉浏览器继续显示。不幸的 是，Firefox 并不支持DEFER 属性。在Internet Explorer 中，脚本可能会被延迟但效果也不会像我们所期望的那样。如果脚本可以被延迟，那么它就可以移到页面的底部。这会让你的页面加载的快一点。
17、减小Cookie 体积
18、对于页面内容使用无coockie 域名
当浏览器在请求中同时请求一张静态的图片和发送coockie 时，服务器对于这些coockie 不会做任何地使用。因此他们只是因为某些负面因素而创建的网络传输。所有你应该确定对于静态内容的请求是无coockie 的请求。创建一个子域名并用他来存放所有静态内容。
如果你的域名是www.example.org，你可以在static.example.org 上存在静态内容。但是，如果你不是在www.example.org上 而是在顶级域名example.org 设置了coockie ，那么所有对于static.example.org 的请求都包含coockie 。在这种情况下，你可以再重新购买一个新的域名来存在静态内容，并且要保持这个域名是无coockie 的。Yahoo! 使用的是ymig.com ，YouTube 使用的是ytimg.com ，Amazon 使用的是images-anazon.com 等等。
使用无coockie 域名存在静态内容的另外一个好处就是一些代理（服务器）可能会拒绝对coockie 的内容请求进行缓存。一个相关的建议就是，如果你想确定应该使用example.org 还是www.example.org作 为你的一主页，你要考虑到coockie 带来的影响。忽略掉www 会使你除了把coockie 设置到*.example.org （* 是泛域名解析，代表了 所有子域名译者dudo 注）外没有其它选择，因此出于性能方面的考虑最好是使用带有www 的子域名并且在它上面设置coockie 。
19、favicon.ico 要小而且可缓存
favicon.ico 是位于服务器根目录下的一个图片文件。它是必定存在的，因为即使你不关心它是否有用，浏览器也会对它发出请求，因此最好不要返回一个404 Not Found 的响应
。由于是在同一台服务器上，它每被请求一次coockie 就会被发送一次。这个图片文件还会影响下载顺序，例如在IE 中当你在 onl oad 中请求额外的文件时，favicon 会在这些额
外内容被加载前下载。
20、保持单个内容小于25K
DIV+CSS相比较与表格布局的优势：
a.代码精简
使用DIV+CSS布局，页面代码精简，这一点对XHTML有所了解的都知道。代码精简所带来的直接好处有两点：一是提高蜘蛛爬行效率，能在最短的时间内爬完整个页面，这样对收录质量有一定好处;二是由于能高效的爬行，就会受到蜘蛛喜欢，这样对收录数量有一定好处。
使用一般的Table表格架构，为了达到一定的视觉效果，不得不套用多个表格。如果嵌套的表格中是核心内容，spider爬行时跳过了这一段没有抓取到页面的核心，这个页面就成了相似页面。网站中过多的相似页面会影响排名及域名信任度。而DIV+CSS布局基本上不会存在这样的问题，从技术角度来说，XHTML在控制样式时也不需要过多的嵌套。
由于使用了DIV+CSS制作方法，在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。
由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套，那样将整个页面圈在一个大表格里，使得加载速度很慢。
2、img标签合理使用
a、限制图片大小 20-100k即可，尽量不影响展现的时候去最小化
b、title、alt属性写完整
c、不要为了在HTML 中设置长宽而使用比实际需要大的图片。如果你需要：
<img width=”100″ height=”100″ src=http://www.mamicode.com/”mycat.jpg” alt=”My Cat” />
那么你的图片（mycat.jpg ）就应该是100×100 像素而不是把一个500×500 像素的图片缩小使用。
3、少用js特效展示，避免瞎用js特效，影响加载
主要还是Js调用，直接页面中使用JavaScript语句，还是很占网页体积的,不要全部把js堆积在页面；比如当你增加一个事件句柄时在500 和5000 个DOM 元素中循环效果肯定是不一样的。
4、js、css动态压缩
web系统中免不了要使用大量的javascript和css文件，如开源的javascript框架prototype、jquery、extjs-core等等，这些js框架，少都有几百K，我曾经做过不少项目，都用了
大量的js。特别是extjs，功能实在是强大，却也是体积最大的一个js框架。使用中稍不留神很容易导致你的系统反映缓慢。为了提高js、css文件的下载速度，从而提高页面的响应速度，减小文件的大小才是终极之道。
我之前写到的文章：js、css动态压缩页面代码 可以根据此方法进行代码动态压缩。
5、避免使用死链接
6、为文件头指定Expires 或Cache-Control
这条守则包括两方面的内容：
对于静态内容：设置文件头过期时间Expires 的值为“Never expire” （永不过期）
对于动态内容：使用恰当的Cache-Control 文件头来帮助浏览器进行有条件的请求
7、生成静态页面
8、二级站点域名，图片域名
我之前写到的文章：jquery.lazyload.js实现图片懒加载 可以根据此方法进行图片局部延时加载。
11、根据域名划分页面内容
把页面内容划分成若干部分可以使你最大限度地实现平行下载。由于DNS 查找带来的影响你首先要确保你使用的域名数量在2 个到4 个之间。例如，你可以把用到的HTML 内容和动态内容放在www.example.org上，而把页面各种组件（图片、脚本、CSS) 分别存放在statics1.example.org 和statics.example.org 上。
12、使iframe 的数量最小
<iframe> 优点：解决加载缓慢的第三方内容如图标和广告等的加载问题 ；Security sandbox ；并行加载脚本 。
<iframe> 的缺点：即时内容为空，加载也需要时间；会阻止页面加载 ；没有语意 。
13、把样式表置于顶部
在研究Yahoo! 的性能表现时，我们发现把样式表放到文档的<head /> 内部似乎会加快页面的下载速度。这是因为把样式表放到<head /> 内会使页面有步骤的加载显示。
14、使用外部JavaScript 和CSS
很多性能规则都是关于如何处理外部文件的。但是，在你采取这些措施前你可能会问到一个更基本的问题：JavaScript 和CSS 是应该放在外部文件中呢还是把它们放在页面本身之内呢？
在实际应用中使用外部文件可以提高页面速度，因为JavaScript 和CSS 文件都能在浏览器中产生缓存。内置在HTML 文档中的JavaScript 和CSS 则会在每次请求中随HTML 文档重新下载。这虽然减少了HTTP 请求的次数，却增加了HTML 文档的大小。从另一方面来说，如果外部文件中的 JavaScript 和CSS 被浏览器缓存，在没有增加HTTP 请求次数的同时可以减少HTML 文档的大小。
关键问题是，外部JavaScript 和CSS 文件缓存的频率和请求HTML 文档的次数有关。虽然有一定的难度，但是仍然有一些指标可以一测量它。如果一 个会话中用户会浏览你网站中的多个页面，并且这些页面中会重复使用相同的脚本和样式表，缓存外部文件就会带来更大的益处。
许多网站没有功能建立这些指标。对于这些网站来说，最好的坚决方法就是把JavaScript 和CSS 作为外部文件引用。比较适合使用内置代码的例外就是 网站的主页，如Yahoo! 主页和My Yahoo! 。主页在一次会话中拥有较少（可能只有一次）的浏览量，你可以发现内置JavaScript 和CSS 对于终端用户来说会加快响应时 间。
对于拥有较大浏览量的首页来说，有一种技术可以平衡内置代码带来的HTTP 请求减少与通过使用外部文件进行缓存带来的好处。其中一个就是在首页中内置 JavaScript 和CSS ，但是在页面下载完成后动态下载外部文件，在子页面中使用到这些文件时，它们已经缓存到浏览器了。
15、避免使用滤镜
IE 独有属性AlphaImageLoader 用于修正7.0 以下版本中显示PNG 图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支，因此它的问题是多方面的。
完全避免使用AlphaImageLoader 的最好方法就是使用PNG8 格式来代替，这种格式能在IE 中很好地工作。如果你确实需要使用AlphaImageLoader ，请使用下划线_filter 又使之对IE7 以上版本的用户无效。
16、把脚本置于页面底部
脚本带来的问题就是它阻止了页面的平行下载。HTTP/1.1 规范建议，浏览器每个主机名的并行下载内容不超过两个。如果你的图片放在多个主机名上，你可以在每个并行下载中同时下载2 个以上的文件。但是当下载脚本 时，浏览器就不会同时下载其它文件了，即便是主机名不相同。
在某些情况下把脚本移到页面底部可能不太容易。比如说，如果脚本中使用了document.write 来插入页面内容，它就不能被往下移动了。这里可能还会有作用域的问题。很多情况下，都会遇到这方面的问题。
一个经常用到的替代方法就是使用延迟脚本。DEFER 属性表明脚本中没有包含document.write ，它告诉浏览器继续显示。不幸的 是，Firefox 并不支持DEFER 属性。在Internet Explorer 中，脚本可能会被延迟但效果也不会像我们所期望的那样。如果脚本可以被延迟，那么它就可以移到页面的底部。这会让你的页面加载的快一点。
17、减小Cookie 体积
18、对于页面内容使用无coockie 域名
当浏览器在请求中同时请求一张静态的图片和发送coockie 时，服务器对于这些coockie 不会做任何地使用。因此他们只是因为某些负面因素而创建的网络传输。所有你应该确定对于静态内容的请求是无coockie 的请求。创建一个子域名并用他来存放所有静态内容。
如果你的域名是www.example.org，你可以在static.example.org 上存在静态内容。但是，如果你不是在www.example.org上 而是在顶级域名example.org 设置了coockie ，那么所有对于static.example.org 的请求都包含coockie 。在这种情况下，你可以再重新购买一个新的域名来存在静态内容，并且要保持这个域名是无coockie 的。Yahoo! 使用的是ymig.com ，YouTube 使用的是ytimg.com ，Amazon 使用的是images-anazon.com 等等。
使用无coockie 域名存在静态内容的另外一个好处就是一些代理（服务器）可能会拒绝对coockie 的内容请求进行缓存。一个相关的建议就是，如果你想确定应该使用example.org 还是www.example.org作 为你的一主页，你要考虑到coockie 带来的影响。忽略掉www 会使你除了把coockie 设置到*.example.org （* 是泛域名解析，代表了 所有子域名译者dudo 注）外没有其它选择，因此出于性能方面的考虑最好是使用带有www 的子域名并且在它上面设置coockie 。
19、favicon.ico 要小而且可缓存
favicon.ico 是位于服务器根目录下的一个图片文件。它是必定存在的，因为即使你不关心它是否有用，浏览器也会对它发出请求，因此最好不要返回一个404 Not Found 的响应
。由于是在同一台服务器上，它每被请求一次coockie 就会被发送一次。这个图片文件还会影响下载顺序，例如在IE 中当你在 onl oad 中请求额外的文件时，favicon 会在这些额
外内容被加载前下载。
20、保持单个内容小于25K
这条限制主要是因为iPhone 不能缓存大于25K 的文件。注意这里指的是解压缩后的大小。由于单纯gizp 压缩可能达不要求，因此精简文件就显得十分重要。
本文为个人经验和实际工作经历总结整理，写得不到之处请给出宝贵意见，谢谢。
web开发性能优化---界面篇
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。