参考：前端优化最佳实践 https://csspod.com/frontend-performance-best-practices/#server-cdn
一 减少文件数量：减少网络请求数
- 合并脚本和样式表
- CSS Sprite
- 划分域名
浏览器一般会限制每个域的并行线程（一般为 6 个，甚至更少），使用不同的域名可以最大化下载线程，从而在同一时间可以下载更多的文件。但注意保持在 2-4 个域名内，以避免 DNS 查询损耗。
二 减小文件的大小：加快载入速度
- 图片压缩
- CSS文件压缩
- javascript脚本文件压缩（注释，空格，空行），去除冗余重复的代码
缓存利用：减少HTTP请求
- 使用外部css文件和javascript文件：减少HTTP请求同时减小文件大小
使用 CDN
网站 80-90% 响应时间消耗在资源下载上，减少资源下载时间是性能优化的黄金法则。
浏览器是根据域(Domain)来缓存内容资源的，只要域不一样，那么它就需要重复下载这些资源，而且使用同样的方式将它们缓存起来。所以浏览器可能就会由于域名的不同缓存很多相同的文件问题：重复地下载，缓存这些同样的脚本文件是需要占用带宽和本地缓存文件空间的。
解决方案：既然浏览器是根据域来区分这些内容资源的，那么是否可以将这些内容都放在统一的一个域里面呢？这样就算是我们有很多网站，我们都可以使用同样的地址引用这些内容资源，那么就不会产生重复下载和缓存的问题了。
使用cdn的两种方式：- 公司有很多子站点，然后自己建一个子站点来保存这些资源。
- 使用知名的CDN厂商提供的服务。他们将很多最常用的javascript库，放在了统一的位置（通常他们的服务器是很快的），可以供全世界的网站开发人员免费使用，这样做的好处是扩大了共享的范围，例如如果你要访问cnblogs.com ，它使用jquery的库，也许你在访问microsoft.com的时候就下载过了，所以连第一次都无需下载。
添加Expires（过期时间）头,设置Cache-control（缓存控制）
参考：http://www.51testing.com/html/28/116228-238337.html减少 DNS 查询
用户输入 URL 以后，浏览器首先要查询域名（hostname）对应服务器的 IP 地址，一般需要耗费 20-120 毫秒 时间。DNS 查询完成之前，浏览器无法从服务器下载任何数据。所以应尽量减少域名数量。但基于并行下载考虑，把资源分布到 2 个域名上（最多不超过 4 个）。这是减少 DNS 查询同时保证并行下载的折衷方案。
页面结构
- css文件放在页面的<head>中, 脚本文件放在底部： 尽快让页面渲染出来。（原因是页面解析是一个从上而下同步的过程）
base64内嵌：
网页中下面这样格式的数据就是Data URI scheme。
data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/ LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D
Data URI scheme是在RFC2397中定义的, 目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。比如上面那串字符，其实是一张小图片.
data表示取得数据的协定名称，image/png 是数据类型名称，base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。
Gzip压缩
Gzip （Gzip是若干种文件压缩程序的简称）压缩通常可以减少 70% 的响应大小，对某些文件更可能高达 90%，比 Deflate 更高效。主流 Web 服务器都有相应模块，而且绝大多数浏览器支持 gzip 解码。
应该对 HTML、CSS、JS、XML、JSON 等文本类型的内容启用压缩。
但是：图片和 PDF 文件不要使用 gzip。它们本身已经压缩过，再使用 gzip 压缩不仅浪费 CPU 资源，而且还可能增加文件体积。
src ，href 属性设置为空字符串
虽然 src 属性为空字符串，但浏览器仍然会向服务器发起一个 HTTP 请求：
参考：https://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/
- 浪费服务器计算资源；
- 可能产生报错。
优缺点：
嵌入html页面后节省了一个HTTP 请求。坏处是浏览器不会缓存这种图像。
网页确实是需要编译出来的，这是前端工程化的必然结果
86
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
