高性能网站（前端）

性能黄金法则：只有10%-20%的最终用户相应时间花在了下载HTML文档上，其余80-90%的时间花在了下载界面所有组件上。

减少HTTP请求

why：

一个请求界面包含了很多HTTP请求，80%的时间都花在dom文档包含的组件下载上，这些组件的下载可能就是性能的瓶颈；

what：

方案一：
一个漂亮的网页往往包含logo，图标以及许多精美的图片，一般情况下每个图片都是一个链接，需要在加载文档的时候去服务器端下载，如果一个网页上有100张图片就需要请求100次才能下载完完整的界面；所以就有了第一个方案：图片地图。把多张图片合并成一张图片，并把链接绑定在不同的位置，就可以减少多次HTTP开销。
方案二：
内联图片，使用data，可以将图片信息写死在data里就不必发送HTTP请求了。
方案三：
合并脚本和样式表，模块化开发过程中我们往往会把js和css分为很多模块，不同的界面引用引用不同的js和css，降低耦合，可是分开的每个小js都会产生一个HTTP请求；矛盾点在于开发时需要模块化开发，引用时不同的界面需要引用不同模块的js，解决办法就是开发一个专门合并js的模块让这些模块自动合并；
缺点：合并js并不是难事，问题是不同的界面会引用不同的js，界面数量和模块js数量巨大的话排列组合会产生大量的文件，所以这个时候就需要具体问题具体分析。

使用内容发布网络

why：

公司起步阶段，所有服务器都在公司机房集中放置，一般也没有几台，机器压力也不会太大；随着用户数量的增多公司业务的扩展，来自世界各地的人都来访问你的网站，你就不得不考虑多个地理位置放置服务器的问题了。
如果应用服务器离最终用户近，那么一个HTTP请求的响应时间将缩短；如果组件服务器（静态资源服务器）离最终用户近，那么多个HTTP请求的响应时间将缩短，根据二八定律；与其花费大力气重新设计应用程序，不如将组件服务器和应用服务器分开，不仅能够提升性能，还比较容易实现。

what

方案一：使用cdn服务提供商提供的服务，优点是操作简单，易扩展更加稳定；缺点是可能和竞争对手共同使用同一组服务器，对服务器的配置由提供商负责。
方案二：自己在各地放置自己的服务器提供服务，优点是配置灵活，全程监控；缺点是成本较高。

缓存

why

百分之八十的用户会访问你百分之二十的数据，大家都知道直接在内存里读数据要比从服务器读数据要快得多，如果把百分之二十的数据缓存在一个地方就可以满足百分之八十的人的需求。所以这是提升性能一个非常常用的手段。

what

Expires：可以用来告诉浏览器可以使用一个组件的当前副本，直到指定的时间。这是在http1.0中规定的，截止的时间是服务器时间，所以当客户端和服务器端时间不一致时会有一些问题。
Cache：http1.1是用来补充Expires的，它指定的是相对时间，从请求开始过去多长时间之后就会失效。Max—age可以指定它的过期时间为10年；

problem

假如某个文件修改后，用户那里依然缓存这这个组件的副本，而且这个副本要十年以后才过期，这该怎么办？

solution

修改文件名称，这样客户端发送的是一个新的请求，就不会使用旧的文件了。

reference

彻底理解浏览器缓存机制https://www.cnblogs.com/shixiaomiao1122/p/7591556.html

压缩

why

减少http请求和使用缓存本质上都是使用减少http请求的方式降低响应时间，内容发布网络是通过拉近用户的距离降低响应时间，继续深入，这里使用减少响应大小来减少传输时间。

what

应该压缩的有HTML文档，XML以及Json在内的任何文本响应。一般图片本身都是压缩过的，不需要压缩。而且压缩也是需要服务器端和客户端的cpu成本的。

how

gzip是目前最流行和最有效的压缩方式，而且也是支持浏览器最广的压缩方式。

reference

前端性能优化-对HTTP传输进行压缩https://www.jianshu.com/p/74c10af7707d

将样式表放在顶

why

有人尝试将HTML中的css外部文件的link放在文档底部，这样就可以加快下载其他重要组件，以达到快速响应的目的，但是，实验证明并不可靠，反而将css文件放在头部更能提高响应速度。

how

这里涉及到一个概念：感知速度，实际加载速度确实可以再一定程度上提高，但是给人的感觉是变慢了，因为所有的重要组件都在等待最后的样式表来进行渲染从而出现白屏的情况，用户看不到变化就感觉慢。比较好的方式是逐步呈现，加载样式表可能会花费一点点时间，但是加载完成之后只有下载完一个重要组件就显示一个组件，逐步把界面呈现给用户。这也是为什么会有进度条的存在，避免让用户不知道你的程序正在运行而不是已经死掉了。

浏览器的工作方式：浏览器在下载样式表，加载并解析完成之前无需绘制任何东西。
画外音：如果不是这样的话就会出现闪烁现象，比如加载完一个组件就呈现一个组件，但是显示出来的组件是没有样式的，等到加载并解析完样式表之后又要根据新的样式重新绘制图像，这就是闪烁。所以浏览器为了避免这个问题使用了加载完样式表才绘制组件的方式。

脚本放在底部

why

假如你的脚本放在文档的中间部分，那么在中间部分的脚本的下载会影响后面其他重要组件的下载。出现这个问题的原因就是脚本阻塞了并行下载。

并行下载：对响应时间影响最大的就是界面中的组件数量，如果没有缓存的话，每个组件都会发起一个http请求；这时可能会有一个问题，为什么请求数量会影响响应时间，浏览器不能一次把组件都下载下来吗？
答案是可以，但是得借助一点手段，使用不同的域名，因为http协议规定同一个域名的http请求的数量是有限制的；假如一个域名可以并行下载两个你的界面有10个组件而且都没有缓存，如果你所有的组件都放在同一个域名的服务器，那么它的请求会呈现阶梯状，相当于5个组件串行下载的时间。如果你有5个域名的话就可以同时下载10个组件了。

question：为什么脚本会阻塞并行下载？并行下载的好处是很明显的，然而下载脚本的时候并行下载是禁用的，即使使用不同的主机名也不会启动其他的下载。
answer：
1、脚本可能会修改HTML文档，保不齐会减少某些下载或增加某些内容，因此浏览器会等待，以确保页面能够正常的布局和显示正确。
2、为了确保脚本正确的执行，并行下载多个脚本，就不能确保达到你想要的界面效果了。