Web性能优化是一个广泛而琐碎的话题，需要时间和经验的积累才能侃侃而谈，这里简要总结一些。
使用CDN
CDN全称Content Delivery Network,即内容分发网络。CDN的原理是尽可能的在各个地方分布机房缓存数据，这样用户便能就近访问资源，加速资源的加载。这与游戏设置多个区域服务器类似。
所以静态资源尽量使用CDN加载，而且浏览器对于单个域名有请求并行下载上限，使用不同CDN可以增加同时下载的数量，且没有了Cookie的带宽压力。
合并文件以减少请求次数
可以合并JS、CSS、图片减少文件的数量来减少发送请求的次数，节省网络请求时间，加快页面加载。
使用gzip压缩内容
gzip能够压缩任何一个文本类型的响应，包括html，xml，json。大大缩小请求返回的数据量。
调整CSS、JS文件在的位置
将css放在前面，将js放在最后。js会阻塞html的渲染。
在请求头使用Cache-Control和Etag
使用缓存能大幅度加快网页加载速度。
Cache-Control：在设置时间内使用本地缓存（资源没有更新），不用想服务器发送请求。
Etag:向服务器发送请求，服务器根据表示进行资源对比，如果不用更新则返回状态码304（Not Modified），告诉浏览器使用本地缓存。
DNS 预解析
DNS 解析也是需要时间的，可以通过预解析的方式来预先获得域名所对应的 IP。
<link rel="dns-prefetch" href="//yuchengkai.cn">
减少域名个数以减少DNS查询次数
但域名的减少则相应地会减少浏览器并行下载资源的个数，所以这是一个需要权衡的解决方案。
预加载
预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。
<link rel="preload" href="http://example.com">
懒加载
将不关键的资源延后加载。原理是只加载可视区域内需要的内容。对于图片来说，先设置图片标签的 src 属性为一张占位图，将真实的图片资源放入一个自定义属性中，当进入自定义区域时，就将自定义属性替换为 src 属性，这样图片就会去下载资源，实现了图片懒加载。
转载于:https://www.jianshu.com/p/d33191ed94f1