标签: 前端
很薄的一本书，介绍了14个用于前端网页优化的规则。
规则一： 减少HTTP请求
问题：网站的加载时间大部分是花费在HTTP请求上，HTTP请求过多会减慢网页的加载速度，严重影响用户的体验。因而该规则是所有规则中最重要的规则。
解决：使用CSS Sprites；对于小的图片使用内联data:[<mediatype>;][base64],<data>
规则二： 使用CDN
问题：下载速度与离服务器的物理距离有关。
解决：使用CDN
规则三： 缓存
问题： 没有缓存的话，多次浏览网页就要多次下载完整的文档，效率低下。
解决：expire头；max-age头
规则四： 压缩组件
问题： 文件的大小也影响下载速度。
解决： 请求头加上Accept-Encoding: gzip, deflate
规则五： CSS放头部
问题：虽然CSS放在尾部，实际上的加载速度回更快，但由与放在尾部会导致白屏的现象，即不能逐步呈现，会使用户心理上觉得速度更慢。
解决：将css用<link>放在<head>...</head>中
规则六： 将JS放在底部
问题： JS放在前面会阻塞浏览器的并行下载。
解决： 可以在script标签上加defer延迟执行<script src='demo.js' defer></script>; 更简单的办法是将js放在底部。
规则七： 避免CSS表达式
问题： 你永远不会知道你的CSS表达式到底执行了多次万次。
解决： 不使用CSS表达式（express(..));或者使用一次性的表达式（服务器计算后发回静态的CSS）
规则八： 考虑使用外联的JS和CSS
问题： 内联实际上加载速度更快，但对于多次浏览要多次下载。外联第一次加载比较慢，但有缓存，以后的浏览会更快。
解决：根据组件的重用度来决定是否使用内联或外联；使用延后加载或者动态内联（服务器决定发送内联网页还是外联网页）
规则九： 减少DNS查找
问题： DNS请求也是要耗时间的。
解决： 缓存DNS名单；增大DNS的TTL值
规则十： 精简JS、CSS
问题： JS的大小也影响加载速度。
解决：精简文件，小心使用混淆。
规则十一： 慎用重定向
问题：重定向可以美化URL、跟踪用户流量，但会影响加载速度，毕竟多了一个请求。
解决：考虑其他替代方法。
规则十二：删除重复的JS
问题： 重复的脚步会：1.影响加载速度，2.脚本重复执行。
解决： 加版本号；后端使用一个自定义的检查函数来添加脚步。
规则十三： 避免ETAG
问题： ETAG有BUG，对于多服务器的网站来说，相同的文件具有不同的ETAG导致缓存无效。
解决： 不用ETAG。
规则十四： 使AJAX可缓存
问题： AJAX也是要等的，因此缓存起来是最好的。
解决： 这部分没看懂。。。
一些个人心得
除了规则一之外，其他的规则都不是那么绝对的，有一定的使用环境，注意到这一点就好了。
然后请尽情优化你的网站，让用户体会到丝滑般的流畅感。
网友评论