页面重构技能-内容篇

页面重构技能-内容篇

少叙闲言
结合网上大量关于Yahoo的高性能网站构建的黄金守则，说下自己眼中的守则。

守则分为7大类34条，包括内容、服务器、cookie、CSS、Javascript、图片、移动应用。

1、尽量减少HTTP请求
当用户载入你的页面时候，有80%的时间是用来下载页面里各个项目，包括图片、样式、脚本、FLash等。

所以减少HTTP请求就可以提高响应速度。

例如：baidu、google，就一个条条在那里......
像大家都知道的合并文件，CSS Sprite等，我想说的是：并不是一味的追求减少请求，而是要权衡这么做之后，对于其他因素的影响。

合并文件：耦合大，无法一眼辨别各个功能模块。

CSS Sprite：大量整合的图片对于改版这样的维护，难度会几何增长。

　　　　　　另外超大的整合图片下载完之前，用到它的地方都会不显示。

2、减少DNS查找次数
每一个独立域名都会有一个对应的IP地址，也就是说，当你输入www.baidu.com时候，服务器不会知道你要找的是“baidu”，而是解析成对应的IP地址，然后再访问。

类似你查找电话本一样，这个解析的过程，浏览器就在那傻等着，一般会花费20到120毫秒时间。

DNS查找次数也就是你下载CSS、JS、图片等所访问的不同域名的总数，包括子域名。

和主域名不同的外域名会消耗更多的时间。

解决办法：CSS去解决一些图片样式，及JS动画（CSS3的NB地方）。

　　　　　将可移植的外域资源放在子域名下。

3、避免跳转
跳转是使用301和302代码实现的，例如下面的HTTP请求头中：
　  HTTP/1.1 301 Moved Permanently
      Location: http://example.com/newuri
      Content-Type: text/html
浏览器会把用户指向到Location中指定的URL下，其中如需缓存需要指定Expires或Cache-Control
虽然JS可以实现跳转，但是为了保证后退按钮好使，还是老实用3XX状态码这种方式。

这一部分好像对纯前端没啥关系或是接触不太多，但是为了成长成真正NB的前端，早晚这些都得掌握。

4、可缓存AJAX
缓存对于用户来说的意义大家都懂的，所以ajax里必然少不了缓存的功能。

但我想说的是要根据需求来确定是否缓存。

其中IE自动添加缓存，而chrome却不是。

下面罗列一下常用清除缓存的办法：
    在服务器端header("Cache-Control:no-cache,must-revalidate");
    在ajax发送请求前加上xmlhttpObj.setRequestHeader("If-Modified-Since","0");
    在ajax发送请求前加上xmlhttpObj.setRequestHeader("Cache-Control","no-cache");
    再ajax的URL参数后面加上?t="Math.random()";

5、推迟加载内容
网页的表现和行为要分开，先表现，后行为。

所以，第一要务是迅速将页面呈现出来，然后一些必要的功能交互，再然后是一些动画或是提升体验的花哨效果。

6、预加载
预加载的目标：利用异步或是浏览器空闲时间，加载即将使用到的内容，达到迅速响应用户 *** 作的目的。

例如：
页游中，空闲时间加载下一场景的所需图片。

页面中的JS，利用img对象预加载js，然后按需执行。

7、减少DOM元素个数
一个复杂的页面意味着需要下载更多数据，同时也意味着JavaScript遍历DOM的效率越慢。

解决办法：深入理解各个标签的语义，减少为了布局而大量罗列的DIV。

8、根据域名划分页面内容
一个页面加载的时候会下载很多外部资源，例如CSS、JS、IMG等，然而把他们或按分类，分布在不同的子域名下会提高DNS并行的下载效率。

因为浏览器所允许的最多连接数和每个服务器所允许的最大连接数是有一定限制的

9、避免404
HTTP的消耗是巨大，让它来请求一个响应一个404是完全没有必要的。

例外，对站点的SEO也不利，有些网站的rabots.txt即使没有限制，也应该上传一个空文件，如果没有，会让引擎爬虫记录下你站点的一个404，从而降低你站点的权重。