开发者社区> inzaghi1984> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

网站前端和后台性能优化8

简介: 使用外部的JavaScript和CSS (Make JavaScript and CSS External)
+关注继续查看

使用外部的JavaScript和CSS (Make JavaScript and CSS External)

tag:javascript,css

很多性能规则都是解决怎样处理独立的组件的问题的。但是,考虑这些之前,你应该先考虑一个更基本的问题:JavaScript和CSS应该被放于外部的文件,还是内联在页面里?

在实际应用中使用外部的文件往往产生更快的页面,因为浏览器会缓存JavaScript和CSS文件。而内联在页面里的JavaScript和CSS会在每次请求页面时下载。这会减少所需的HTTP请求数,但增大HTML文档的体积。而另一方面,如果放在外部文件里的JavaScript和CSS被浏览器缓存,则既不用增加HTTP请求的数量,HTML文档的体积也会减少。

关键的问题是,外部的JavaScript和CSS的组件被缓存的频率和HTML文档被请求的次数相关。虽然很难去量化,但可以被用很多指标衡量。如果你的网站的用户在每个会话中浏览了很多网页而且很多页面重用了相同的JavaSctipt和样式表,缓存外部文件是有很大潜在的好处的。

很多网站都符合这样的指标。对于这些网站来说,最好的解决方案是把JavaScript和CSS发布为单独的文件。唯一的例外,对于主页,内联的文件更好一些,例如 Yahoo!'s front page 和 My Yahoo!。主页在每个会话中只有很少浏览(也许只有一次),你会发现内联的 JavaScript和CSS会让终端用户的响应更快。

对于有很多页面浏览量的首页来说,有很多能平衡内联文件所提供的HTTP请求减少的效果与外部文件缓存获得的好处的技巧。一种这样的技巧就是把JavaScript和CSS内联在说夜里,但在页面完成加载时动态下载外部文件。随后的页面会调用浏览器中已经缓存的外部文件。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
网站前端和后台性能优化20
分域部署部件:Split Components Across Domains
996 0
网站前端和后台性能优化18
预先加载组件 (Preload Components)
1382 0
网站前端和后台性能优化28
不使用过滤器 Avoid Filters
1736 0
网站前端和后台性能优化7
不使用CSS表达式 (Avoid CSS Expressions)
1080 0
网站前端和后台性能优化33
保证组件大小小于25K Keep Components under 25K
1797 0
网站前端和后台性能优化14
让Ajax可以缓存 (Make Ajax Cacheable)
1013 0
网站前端和后台性能优化17
后加载组件 (Post-load Components)
1013 0
网站前端和后台性能优化6
把脚本放在最后(Put Scripts at the Bottom)
780 0
网站前端和后台性能优化15
更早的刷新缓冲区 (Flush the Buffer Early)
1052 0
网站前端和后台性能优化13
设定ETags (Configure ETags)
1256 0
+关注
inzaghi1984
金融IT技术人员
223
文章
62
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载