web前端性能优化总结

1、减少同一域下的http请求数，浏览器常常限定了对同一域名发起的并发连接数的上限，各种浏览器普遍把这一上限设定为4-8个

2、静态资源放在在非主域名下，这种做法除了可以增加浏览器的并发，还有一个好处就是减少http请求中携带的cookie 如果google把所有的资源都放在google.com下，那么所有的资源的请求都会带上cookie数据，对于静态资源来说，这是毫无必要的。

3、尽量减少每个资源的体积

   通过压缩工具对资源文件进行压缩（图片压缩，JS，CSS压缩），
   通过配置GZIP来压缩 css,js文件
   
4、CSS放在页面最上部，javascript放在页面最下面

   浏览器会在下载完成全部CSS之后才对整个页面进行渲染，因此最好的做法是将CSS放在页面最上面，让浏览器尽快下载CSS。如果将 CSS放在其他地方比如 BODY中，则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了，这就导致页面由无 CSS状态跳转到 CSS状态，用户体验比较糟糕，所以可以考虑将CSS放在HEAD中。

5、LazyLoad Images

        这条策略实际上并不一定能减少 HTTP请求数，但是却能在某些条件下或者页面刚加载时减少 HTTP请求数。对于图片而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。这样一来，假如用户只对第一屏的内容感兴趣时，那剩余的图片请求就都节省了。   

6、使用nginx反向代理，后台采用负载均衡

7、CDN加速  

8、服务器缓存，NGINX图片,CSS,JS缓存到内存当中

9、浏览器缓存图片、JS、CSS
   通过epires,如果浏览器命中对这个资源的需求，就不会再去发起HTTP请求，而是直接从缓存（在硬盘中）读取
   通过Last-modified
   浏览器缓存设置最佳实践：
   对于动态生成的HTML页面使用HTTPS头：Cache-Control:no-cache
   对于静态HTML页面HTTPS头：Last-Modified
   其它所有文件类型都设置Expires头，并且在文件内容有所修改的时候修改Query String(URL后添加一个类似版本号)
   
9.1、浏览器缓存的现实世界
   
   缓存会被挤出
   所谓缓存被挤出，是因为浏览器的缓存空间是有限的，所有网站希望缓存的文件都塞在用户硬盘，形成一个先进先出的队列，所有即使设置了20年的缓存时间，也基本上不能保证有那么久的生命期，而会在某一个时间点被其它网站设置的缓存挤出硬盘。而且用户也有可能主动清除浏览器的缓存。我们从技术层面上无法解决，大不了让用户重新加载一下资源就好了。
   
   文件有可能在运营商服务器上被劫持
   用户的宽带运营商为了提高速度，可能会在自己的节点服务器上缓存你的文件（比如style.css?v1），好处就是当用户请求这个文件的时候，运营商
   无需来你的服务器上请求文件，而自己直接就给出了。

   问题来了，如果你的Query String 更新了（style.css?v2），按照HTTP规范，这理应被视为一个新的文件，但是运营商仍然可能会拿自己节点的缓存，而不是遵循规范，有点可恶对不对，虽然不太觉，但是有可能生发生，为了保证更新的文件下发到所有用户，我们会使用更新强硬的方法：修改文件名，而不是仅仅修改Query String

   部分内容摘自《Web全栈工程师的自我修养》余果