《高性能建站指南》笔记

一、高性能的重要性

　　第二次加载同一个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是最常用的两种，