代码改变世界

《高性能建站指南》笔记

2013-12-29 23:59  臭小子1983  阅读(222)  评论(0编辑  收藏  举报

一、高性能的重要性

  第二次加载同一个URL时,部分文件已经被缓存到了浏览器中,但浏览器需要重新加载一遍,但加载缓存文件,HTTP的请求为302状态,并且响应头没有缓存信息浏览器不会缓存

 

一、HTTP响应值

  1、302:请求的为缓存文件

  2、200:加载成功

  3、304:未修改,自从上次请求后,请求的网页未修改过,ctrl+f5后加载又变成200

  4、301:永久重定向,告诉客户端以后应从新地址访问

    5、303:对于POST请求,它表示请求已经被处理,客户端可以接着使用GET方法去请求Location里的URI。

  6、307:对于POST请求,表示请求还没有被处理,客户端应该向Location里的URI重新发起POST请求。

 

二、性能的黄金法则

  10%-20%用在加载HTML文件中;

  如果后端响应的时间缩短一半整体响应的时间能缩减5%-10%;

  前端优化在缩减10%这样整体能达到40%-50%;

 

三、HTTP概述

  HTTP是浏览器和服务器通过internet进行相互通信的协议,由请求和响应构成,

  常见请求类型有:GET、POST,GET请求中包括请求的URL,头,HTTP响应的状态码和头的响应体.

 

  1、压缩:

    浏览器和服务器都支持,可以使用文件压缩来减少响应的大小,浏览器可以使用Accept-Encoding并没有来声明他支持压缩,服务器使用Content-EnCoding头确认响应已压缩。

  

  2、Expires:

    GET请求和304响应有助于让页面加载的更快

 

第一章 减少HTTP请求

  性能黄金法则上:10%-20%是HTML页面,80%-90%是引用的图片、脚本、样式表FLash等,减少HTTP请求的数量.

  可以减少HTTP请求的方法:1、图片地图  2、CSS Sprites  3、内联图片和脚本  4、样式表的合并

 

一、图片地图

  一张图片上关联多个URL,其实就是热区,这里就不多说了,用的还是比较少,也可以用css sprites来控制

 

二、CSS Sprites

  将图片合并,通过background-position属性来控制图片显示的位置,减少HTTP请求.

 

三、内联图片和脚本

  在外部样式表中使用background来加载背景图片,

 

四、合并脚本和样式表

  使用外部脚本要比内嵌脚本性能上要快的多,并且好维护,而且外部调用的文件都可以被缓存.

  将多个脚本合并在一起,多个样式表合并在一起,请求的时候是按一次请求而不是多次,这样也是可以减少HTTP请求的一种方式.

 

 

第二章 使用内容发布网络

  当服务器放在同一个地方与服务器分开放到多个地域,响应的速度是不同的

  如果应用程序的服务器离用户近,则一个HTTP请求的响应时间短,

  内容发布网络(CDN):是一组分布在不同地理位置的web服务器,CDN为选择响应时间最短的服务器.

 

  CDN用于发布内容如:图片、脚本、样式表和Flash

 

第三章  添加Expires头

  页面的初访者会进行很多的HTTP请求,

  Expires头:但通过使用长久的,来将资源缓存起来,可以包括(脚本,样式,图片,页面)

  Cache-Control头:来克服Expires,使用max-age指定资源被缓存多久,如Cache-Control:max-age=316000以秒为单位

 

  注:资源可以使用长久的Expires头,但HTML文件不能使用,因为他是动态内容,用户每次请求都会被刷新,

  

 

第四章  压缩文件

  减少HTTP响应的大小来减少响应的时间,如果HTTP请求包很小,传输的时间就很短,使用gZip编码来压缩HTTP的响应包

   

 

第五章、将CSS文件放到头部

  关心性能的前端工程师都希望页面能逐步的加载,如果CSS文件放在底部会阻碍页面的逐步呈现,会使页面出现白屏的情况.

  为了避免白屏将样式表放在head中

 

 

第六章、将脚本放在底部

一、脚本带来的问题

  如示例:将脚本放在页面的中间, 脚本下载需要10秒,页面的下半部分需要10秒显示出来,出现这情况是因为脚本阻塞了并行下载,

  在下载脚本时浏览器阻塞并行下载另一个的原因是,要保证脚本能免按顺序执行,如果并行下载多个脚本就不能保证按特定的顺序来加载,这样一个js文件对另一个js文件有依赖的情况下就会出现问题.

 

二、脚本放在顶部的问题:

  1、脚本会阻塞页面后面的内容呈现

  2、脚本会阻塞后面的组件下载

 

  如果脚本需要向页面输出document.write时就不能将其放到最后

 

 

第七章  避免CSS表达式

  CSS表达式:background-color:expression( (new Date()).getHoure()%2 ? "#000" : "#ccc" );    每小时变化一次

 

 

第八章  使用外部的javascript文件和css文件

  javascript和css使用外部文件的优势:文件可以被缓存

  但内联还是要比外部文件加载要快,因为不需要去请求和响应。

 

 

第九章  减少DNS查找

  

 

 

第十章   精简CSS和Javascript

  精简是从代码中移除不必要的字符以减少代码的大小,

  CSS精简:精简CSS带来的节省要小于javascript,最大的节省在于css类的合并、移聊不使用的类

         例:将颜色值缩写,#cccccc可以写成#ccc,0px可以写成0

 

 

第十一章   避免重定向

  重定向用于将用户从一个URL重新路由到另一个URL,重定向有很多种,301、302是最常用的两种,