概述参考谷歌的教程网站的加载性能可以从四个方面进行优化：减少网络延迟、减少资源数量、减少资源体积和使用缓存。1.减少网络延迟和网络请求避免使用登录页面进行重定向。重定向会导致额外的HTTP请求，从而导致网络延迟并减慢网页的呈现速度。重定向还可能导致额外的DNS查找、TCP握手和TLS协商。合并资源，减少网络请求合并资源，最常见的就是sprite精灵图。此外，您还可以结合使用CSS和JS代码。2.控制资源下载数量访问网页时，请求的资源必须是有用的，避免无用的资源请求，比如：1.冗余的`js`文件，`css`文件2.冗余的图片请求3.额外字体要求3.资源量优化网站使用的资源主要包括：文本资源，如js、css、html；图片资源，各种图片3.1文字资源的优化当然要自己写了很棒，干净的代码。其次，对于js文件、html文件、css文件，需要将文件最小化，去掉空格和单词之间的换行符，替换变量名等等。这些工作一般在前端项目打包的时候进行，比如：HTML文件使用HTMLMinifier；CSS文件打包在Webpack中，loader配置为最小化；JS文件使用UglifyJsPlugin插件；下一步是使用GZIP对文件进行编码和压缩。现代浏览器可以接受gzip格式的文件，我们所要做的就是配置服务器。3.2图片资源的优化选择正确的图片格式虽然人们常说png图片比jpge图片更能表达摄影图像，但是对于很多图片来说，png格式的图片转为jpeg格式后，图片的清晰度并没有特别突出的地方。影响大，但体积可以大大减小。删除不必要的元数据您拍摄的一些照片将包含元数据，这是描述数据的数据。元数据会描述拍摄图片的设备信息，时间戳，图片大小等，对于一些网页图片来说不是很重要，我们可以去掉这些元数据。试试这个网站VerExif。减小图片的大小在某些情况下，即使在\标签或标签的背景中使用了一张大图片，它在实际网页中的尺寸仍然很小。这时候使用大图是一种资源浪费。这是调整图片大小，比如把一张1200x600像素的图片变成600x300像素。降低图像质量在某些情况下，降低图像质量不会造成任何视觉差异，但可以减少很多体积。图像质量处理的软件有很多，比如：XNConvertImageOptimResizelt更多参考这里。图像压缩尽管gzip压缩对图像影响不大，但有许多程序可以在不影响图像大小和视觉质量的情况下压缩图像，例如本网站。更多网站可以参考[这里](http://enviragallery.com/9-be...4.严格来说使用HTTP缓存可以减少请求次数，但是实现方式完全不同。使用HTTP缓存是设置合适的缓存策略，防止浏览器重复向服务器请求资源，HTTP缓存主要是在服务器上设置正确的响应头信息，缓存分为两种：强缓存和协商缓存。4.1StrongCache强缓存是指浏览器直接使用本地资源，而不是向服务器发起请求，涉及到两个响应头：Expires和Cache-control，Expires是http1.0的内容，其内容是http1.0的内容server设置一个具体的时间点，比如Expires:Wed,21Oct201507:28:00GMT，不用知道太多Cache-control是http1.1中新的header，它的值是一个或者多个的组合说明如下：no-cache：表示浏览器可以缓存内容，但是必须先和服务器确认，如果资源没有变化，可以直接使用浏览器的缓存。与no-store互斥；no-store：表示该内容不允许Cache，包括浏览器和中间设备，比如代理服务器，与no-cache互斥；public：表示缓存可以存在于浏览器和中间设备中，与private互斥；private：表示缓存只能存在于客户端的浏览器中；max-age：以秒为单位的时间范围，表示缓存的内容将在多长时间内过期。过期后，浏览器必须重新下载资源。设置了强缓存后，浏览器每次请求都会使用本地缓存的内容，浏览器可以根据返回的头部信息来校验。4.2协商缓存当服务器没有为资源设置强缓存时，可以使用协商缓存。启用协商缓存的方式有两种：Last-Modified和If-Modified-Since；Etag和If-None-Match；两组头信息的名称非常语义化，降低了理解的难度。4.2.1Last-Modified和If-Modified-Since服务器设置Last-Modified响应头来指示资源最后修改的时间。这个值是一个时间点。浏览器在请求时会带上一个头信息If-Modified-Since，其值为Last-Modified的值。服务器将资源的最后修改时间与If-Modified-Since指示的时间进行比较，如果没有变化则返回304。4.2.1Etag和If-None-Match服务器设置Etag响应头，表示资源String的唯一标识，只要修改资源，就会重新生成一个Etag。浏览器请求时会带上一个头信息If-None-Match，其值为Etag的值。服务器将资源当前的Etag与If-None-Match的值进行比较，一致则返回304。
