关于性能优化: 内嵌 or 外联静态文件(css/js)

[gangsta]

最近在看一些性能优化方面的东西.结合前段时间挺火的那个帖子 /t/170974 有一些疑问.

外链样式表和脚本文件的优点是显而易见的,通常被大家认为"前端最佳实践"中的某一条,这里就不再复述,可以参考雅虎的Best Practices for Speeding Up Your Web Site中关于"Make JavaScript and CSS External"的部分:
https://developer.yahoo.com/performance/rules.html

但其实很多网站,甚至一些流量巨大的网站,也会采用内嵌样式表和脚本在HTML中的做法
比如京东和新浪,感兴趣的可以右键看下源码 http://www.jd.com http://www.sina.com.cn

直接内嵌在页面中,优点似乎也是很明显的:
1.减少HTTP请求数
2.HTML同样可以整体被缓存,这样下次请求的页面体积就会更小
3.如果做成外联的话,通常的经验是选用一个不同的域名(这个原因有很多,在上次那个帖子里 /t/170974 很多大神也解释过了) 但是静态服务器出现故障时,如果内嵌了样式和脚本文件则依然可以保证页面的渲染不受影响

相信V2EX上还是个人站长比较多,针对这类站点,其实也有一些特点,比如css和js多数情况通常是针对某个特定页面来写的,被复用的概率不大;
vps(V2EX应该DO和Linode比较多)的性能和连接速度通常不是很高,这样,多一次http请求的RTT就不能被忽略(即使是很小的静态文件)
另外,很多时候,外联的CSS和脚本文件通常很小,这个时候,内嵌带来的优点远比外联要明显的多 (比如V2EX的这个静态文件,其实只有10来行, https://www.v2ex.com/css/desktop.css?v=3.8.3 Google PageSpeed Insights针对V2EX首页的建议也是把这个文件内嵌在页面中.

[otakustay]

rule永远是rule，不是law，任何rule都只在特定场景有效，而best practice无非就是有效场景多一些的rule而已……
外联还是内联，与页面本身缓存时间、资源大小、资源被依赖程度都有关系，我没有统一的模型去衡量这个，更多是很凭直觉然后做各种试验来确定哪一个更好

[kmvan]

同意ls，没有一套方案就适合所有站点。
要根据不同类型的站点来定制不同的缓存方案。而且并不是说请求越少，内联越多，加载就越快，具体问题具体分析。

[jiayao321]

@kmvan 哈哈，一直想吐槽这个头像很久了，楼主P得好