日期:2014-05-17  浏览次数:20582 次

高性能网站建设指南规则8使用外部Javascript和CSS
HTML文档,至少是那些包含动态内容的HTML文档。通常不会被配置为可以进行缓存。所以,如果使用内联的CSS或是JS,那么它就不会被缓存起来。

使用外部JS或CSS,由于产生多个HTTP请求,所以本质上说外部JS或CSS是没有内联快的。

选取外部JS,CSS还是内联的,

参考标准有页面标准、空缓存和完整缓存、组件重用等因素。

此外,我的理解,一个参考标准就是,如果这个JS或者CSS所在的组件适合被缓存,那么就使用外部的方式,如果不适合被缓存,那么就使用内联的方式,比如,“每日一词”就不适合使用外部的方式把它缓存起来。

两全其美的方法:既可以获得内联的优势,又可以同时缓存外部文件
加载后下载:先使用内联方式加载所需的CSS,JS,然后把那些JS和CSS再下载下来!但是我们必须处理双重定义的问题!

动态内联:使用cookie来判断使用外部还是内联的方式,如果cookie不存在,就内联JS和CSS,如果存在,则有可能组件还位于缓存中,就使用外部的方式。
当用户第一次访问页面时,由于还没有cookie,就使用内联的方式下载,然后服务器添加JS来在页面加载后动态下载外部文件,并设置cookie,下一次访问页面时,服务器看到了cookie,就会使用外部文件。

但是需要注意的是,如果用户重新打开了浏览器,那么基于会话的cookie会消失,但组件依然存在于缓存中,我们可以把cookie改为短期的(数小时或者数天)但是由于当外部组件不存在浏览器中时,又会出错。