本博客重构时的随想-Performance

在进行本博客改版和重构的时候，手头正好有本《Hight Performance Web Site》,改书提到了一下的几个前端性能的优化方案

• 减少HTTP请求
• 使用内容发布网络（CDN）
• 增加EXPIRES头
• 压缩组建（gzp）
• 样式放在首部
• 将脚本放在底部
• 避免CSS执行表达式
• 外联CSS，JS文件
• 避免重DNS定向
• 配置ETA

该书开篇提到了一个性能黄金法则

仅10%-20%的最终用户响应时间花在HTML文档上，其余时间时间用于下载页面的主键

外联css这是没发说的，背景的图片也得到了合并；结合我的博客的结构-主页和博客页面独立，这样我就写了一个公共的style.css，一个blog.css,一个index.css,两个页面都调用style.css然后用@import分别在不同的页面引入blog.css。@import和LINK调用外部样式的区别之一就是，加载顺序的差别，一般来讲：link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载，这样就浏览@import加载CSS的页面时开始会没有样式

然后我去掉所有CSS中的IMAGES发现在整体布局，浏览体验上没的多大的区别，应此我就只是把带有背景图片的CSS样式抽取到单独的CSS文件中，然后@import，目的是让其最后加载！但是这样一来就增加了一个HTTP请求，出于这点我把带有背景图片的样式提取到最后脚本处，目的是让其最后执行！

虽然图片不多，体积也不很小，但是出于追求最优的角度，我思考了！

大多事物都是这样具有不确定性，很多时候，我们寻求的就是在特定条件下的最佳实践，因此我们更应该沉下心来去探原、整理、归纳、总结

在我实践之前才记得，在W3C标准中style定义一般是推荐放在BODY中的应此就没这样干，只是把CSS和图片，感觉加载速度还是不错