网站性能提升最佳实践四
https://developer.yahoo.com/performance/rules.html?guccounter=1#csslink
- Content
- Server
- Cookie
- CSS
- JavaScript
- Images
- Mobile
原文从七个方面总结网站性能提升。
本篇总结Javascript、Images方面。
Javascript
Put Scripts at Bottom 脚本放在底部
脚本会阻塞并行下载
HTTP / 1.1规范建议浏览器每个主机名并行下载最多两个组件
如果有多个主机名提供图像，则可以并行进行两个以上的下载，但是在下载脚本时，即使使用不同的主机名，浏览器也不会启动任何其他下载
defer脚本表示脚本不包含document.write，浏览器可以继续渲染
通常一个脚本如果可以defered，那它也可以移动到页面底部
Make JavaScript and CSS External 从外部引用js脚本和css文件
在HTML文档中内嵌的JavaScript和CSS会在每次请求HTML文档时被下载
使用外部文件通常会产生更快的页面，因为JavaScript和CSS文件被浏览器缓存
如果JavaScript和CSS在外部文件中，并且被浏览器缓存，则在不增加HTTP请求次数的情况下减小了HTML文档的大小
如果用户每次会话都有多个页面浏览，并且许多页面重复使用相同的脚本和样式表，那么缓存外部文件的潜在好处就更大
对于主页，这种每次会话只访问一次的页面，将js和css内联可能更好
一个样例：
对于许多浏览页面的第一个页面，内联js和css（减少请求次数，该页面加载完后动态下载外部文件，随后访问的页面会使用这些缓存
Minify JavaScript and CSS 压缩JavaScript和CSS
压缩代码指的是删除不必要的代码，减小代码体积（因此可以提升响应性能
混淆代码也是减小代码体积的方法，但是is more risky
除了压缩外部脚本和样式之外，可以并且也应该压缩内联的<script>和<style>块。
即使脚本和css文件已经被gzip了，压缩还能让它们的体积减少5%以上
Remove Duplicate Scripts 删除重复脚本
重复脚本出现的两个关键因素：
- 脚本数量太多
- 团队人数太多
重复脚本因为浪费HTTP请求和Js执行而损害性能
避免方法：
使用script标签引入js脚本（不都是这么做的吗？
php代码
1
insertScript("menu.js")
Minimize DOM Access 最小化DOM访问
使用JavaScript访问DOM元素的速度很慢，因此，为了使页面更具响应性，应该：
缓存对已访问元素的引用
“离线”更新节点，然后将其添加到树中
避免使用JavaScript修复布局
Develop Smart Event Handlers 开发聪明的事件处理程序
如果div中有10个按钮，则仅将一个事件处理程序附加到div包装器上，而不是为每个按钮附加一个处理程序
无需等待onload事件即可开始对DOM树进行操作
DOMContentLoaded可能更适合使用
Images
Optimize Images 优化图片
检查GIF，看看它们是否使用了与图像中颜色数量相对应的调色板大小
尝试将GIFs转换为PNGs
使用pngcrush压缩PNG
使用jpegtran处理JPEG
Optimize CSS Sprites 优化CSS Sprites
将sprite中的图像水平排列，而不是垂直排列，通常会生成较小的文件
将sprite中相近的颜色组合，有助于保持较低的颜色数量
“要mobile-friendly”，不要在sprite中的图像之间留下大的空隙
Do Not Scale Images in HTML 不在HTML中缩放图片
需要多大的图片就使用多大的图片
例子：
需要一个100x100的图片，不要来个500x500的图片然后去压缩它
Make favicon.ico Small and Cacheable 图标要小、可缓存
favicon.ico 即使你不关心它，浏览器也会请求它，最好不要使用404响应它
由于它在同一台服务器上，因此每次请求时都会发送cookie
它还会干扰下载顺序
为了克服弊端：
- 保证它尽可能小，最好小于1K
- 根据需要设置Expires过期头（图标的名字不能改
Imagemagick 可以帮助你创建小图标