前端雅虎23条理解

一. CONTENT

1. 减少使用HTTP请求(Minimize HTTP Requests)
   通常打开一个页面的时候,大部分的时间都是在下载该页面的图片,css样式,js脚本,flash等等资源,减少这些资源的组件数,能够减少http请求,所以可以导致页面的访问速度变快.
2. 减少DNS查找(Reduce DNS Lookups)
   通常在访问一个页面的时候,都是通过属于页面的主机名来访问,但是实际上访问页面是要访问对应的IP地址的,所以在访问域名到查找对应的IP地址的时候,会先通过DNS域名系统,将对应的IP地址找到并返回浏览器,而DNS本身也有时间成本,所以减少DNS查找,直接访问IP地址的话,可以提高访问速度.
3. 避免URL重定向(Avoid Redirects)
   如果在页面HTML里面有重定向的URL的话,在下载HTML文档的时候,会先跳转到重定向的地址,将重定向地址的内容下载后再返回到原页面的HTML下载,那这时候就会存在延迟,使得排在重定向URL后面的一些内容无法下载,造成打开页面慢.
4. 使用AJAX缓存(Make AJAX Cacheable)
   使用AJAX的好处在于它是从后端web服务器异步请求信息的,就是对于一些不需要立刻展示的资源先不下载到本地,等用户请求的时候再下载,就会减少下载资源过多导致的通道堵塞.优化AJAX响应对提高性能也非常重要,同时也可以优化将响应形成可缓存,不需要每次都是从后端下载资源.
5. 减少DOM元素的数量(Reduce the Number of DOM Elements)
   访问页面的时候要下载资源,越复杂的页面下载的字节就会越多,那么对于JavaScript中DOM访问速度就会更慢,那么减少页面上DOM元素数可以提高页面的性能.
6. 避免HTTP 404错误(No 404s)
   下载页面资源的时候,对于一些资源访问时404的话,就有可能会导致服务器多次的访问这类资源,使得其他资源在等待服务器下载,那么就有可能会导致页面访问速度变慢,所以下载页面资源的时候要避免产生HTTP 404找不到资源的情况.

二. COOKIE

1. 减少cookie大小(Reduce Cookie Size)
   HTTP cookie主要是用户身份认证,个性化设置等用户,通常情况下是会自动的在请求后端的时候也把cookie发送到后端,所以如果cookie越大的话,发送到后端的数据就越多,就会使得响应时间可能变慢的情况,所以相应的减少cookie大小,能够提高响应时间.
2. 使用无cookie域(Use Cookie-Free Domains for Components)
   当浏览器向服务端发送请求的时候通过会自动的发送cookie到服务端,当时如果只是请求一些静态资源的时候,不需要发送cookie来请求,可以通过创建子域并将其驻留在那里,确保使用无cookie请求青苔组件来减少请求时间.

三. CSS

1. 将CSS放在顶部(Put StyleSheets at the Top)
   访问页面的时候,下载页面资源是从上到下下载并且渲染的,将CSS等样式放在顶部的话,可以首先先下载CSS资源进行逐步渲染,以免其他资源都渲染成功了,然后页面没样式显示.
2. 避免CSS表达式(Avoid CSS Expressions)
   CSS表达式的问题在于比预期的计算要频繁,不仅在页面载入和调整大小时要重新计算,在滚动页面或者在页面移动鼠标的时候也要计算,所以避免CSS表达式计算太多次,可以减少页面渲染CSS的时间,
3. 避免使用过滤器(Avoid Filters)
   IE专有的过滤器用户修复IE7一下版本的半透明真彩色PNG的问题,但是它阻止了渲染,并在图片下载时冻结了浏览器,并且还会引起内存消耗,所以避免使用过滤器会能够使得页面正常的渲染,能够有效访问页面.

四. SERVER

1. 使用CDN(Use a Content Delivery Network)
   前端页面花费的响应时间大部分是在下载图片,样式,脚本,flash等,如果将这些内容都放在同一个服务器上面,那么在下载资源的时候,其他资源就要排队等待,所以就会造成响应时间加长,如果将这些资源分布到不同的服务器上面,那么在下载的时候就可以减少等待的时间,即减少响应时间,而CDN是一群不同地点的服务器,可以更高效地分发内容到用户,所以使用CDN可以有效的减少响应时间,获得更好的页面体验效果.
2. 加Expires或Cache-Control头部(Add an Expires or a Cache-Control Header)
   页面越复杂的时候,包含的样式,脚本等资源会越多,那么在第一次瞎子的时候可能会发送多个请求,但是再之后重新访问这个页面的时候,就可以使用Expires将这些组件缓存起来,后续直接读取缓存,避免重复的访问服务器下载同样的资源,可以减少http请求数,加快页面加载速度,Cache-Control也是同样的效果.
3. 传输使用gzip等压缩组件(Gzip Components)
   服务器在响应浏览器的请求时候,浏览器从服务器下载前端的资源,如果这些资源首先经过压缩之后再下载,那么就能减少传输时资源的大小,就能减少下载的时间,所以在发送请求到服务器的时候,在http请求的头部加上Accept-Encoding,表示支持压缩,那么服务器看到这个头部,就会将资源压缩后,并且在响应中返回Content-Encoding:gzip表明内容是压缩过的.会大大减少响应时间.
4. 配置ETags(Configure ETags)
   实体标记是服务器和浏览器之间判断浏览器缓存中某个组件是否匹配服务器端原组件的一种机制,实体就是组件:图片,脚本,样式等,ETag被当成验证实体的比最后更改日期更有效的机制.浏览器要验证组件是否有更新,当组件没有更新的时候,通过ETag匹配,服务器返回304没有修改的时候,那么就可以从缓存中直接下载资源减少响应时间.
5. AJAX请求用get(Use GET for AJAX Requests)
   XMLHttpRequest在POST请求的时候浏览器会分成两步:首先发送头部,然后发送数据.所以用GET请求,只用一个TCP来发送到服务器,所以如果不是提交数据到服务器的话,就用GET来请求,提交数据到服务器就用POST请求.
6. 避免空src或href的图片(Avoid empty src or href)
   页面中含有空src属性的图片的时候,浏览器会想服务器发送请求,这回导致发送大量意外之外的流量,会削弱服务器.同时也会浪费服务器计算周期取生成不会被浏览的页面,也会有可能破坏用户数据.这种行为的根源是由于url解析发生在浏览器,RFC 3986定义了这种行为,空字符串被当作相对路径来正确解析,所以会导致有不必要的流量产生.

五. JAVASCRIPT

1. 将脚本放到底部(Put Scripts at the Bottom)
   在下载组件的时候可能会阻塞了并行下载,如果图片,脚本等资源分散在不同服务器,那么可以并行下载多个图片,但当脚本在下载,浏览器不会再下载其他组件,即使在不同于域名下,所以将脚本放到底部可以减少阻塞.提高下载效率.
2. 使用外部JS和CSS(Make JavaScript and CSS External)
   一般情况下,使用外部文件会加快页面,因为JS和CSS文件会被浏览器缓存,如果是内连的JS和CSS的话每次HTML文档下载的时候都被下载.对多个页面的首页来说,可以通过技术减少http请求.在首页用内连,初始化后动态加载外部文件,接下来的页面如果可以用到这些文件,就可以使用缓存了,减少http文档的大小.
3. 压缩JS和CSS(Minify JavaScript and CSS)
   压缩就是删除代码中不必要的字符来减少文件的大小,提高下载的速度,所以使用压缩JS和CSS,页面在下载的时候就会比原文件下载的少,访问速度回加快.
4. 删除重复的脚本(Remove Duplicate Scripts)
   同一个页面中如果有重复的脚本,会发出不必要的http请求和浪费js执行时间,所以页面中将重复的脚本删除,在执行http请求时,就不会多次执行童谣的脚本,就会减少时间的浪费.

六. IMAGES

1. 不要在html中缩放图片(Do Not Scale Images in HTML)
   不要在图片中设置宽高来用比需要大很多的图片,如果需要就直接从服务器中请求,或者就用需要图片自身的宽高.避免在请求的时候以大于需要的图片来请求,影响下载资源的大小.
2. favicon.ico小且缓存(Make favicon.ico Small and Cacheable)
   favicon.ico是服务器根路径的图片,即使本身不想请求它,浏览器仍然会请求它,所以根据之前的规则,最好就是在请求它的时候不要响应404,还有就是每次请求favicon.ico都会带上cookie,并且它也会影响下载顺序,可以通过设置Expires头部,使得每次都是直接从缓存中读取,不必要每次都是请求.