`

高性能网站建设指南规则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改为短期的(数小时或者数天)但是由于当外部组件不存在浏览器中时,又会出错。
分享到:
评论

相关推荐

    高性能网站建设指南2 中文版 高性能网站建设指南(中文版)

     《高性能网站建设指南》一书介绍了如何针对网站中的Ajax、CSS、JavaScript、Flash和图片进行性能优化。每个性能规则都提供了示例,在本书的配套网站上可以找到代码片段。这些规则包括:  •减少HTTP请求 •使用...

    高性能网站建设指南.part1.rar

    《高性能网站建设指南》内容丰富,主要包括减少HTTP请求、Edge Computing技术、Expires Header技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复...

    《高性能网站建设指南》

    《高性能网站建设指南》结合Web2.0以来Web开发领域的最新形势和特点,介绍了网站性能问题的现状、产生的原因,以及改善或解决性能问题的原则、技术技巧和最佳实践。重点关注网页的行为特征,阐释优化Ajax、CSS、...

    高性能网站建设指南.pdf

    全书内容丰富,主要包括减少HTTP请求、EdgeComputing技术、ExpiresHeader技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复JavaScript的技巧、关闭...

    高性能网站建设指南(pdf).part2

    《高性能网站建设指南》结合Web2.0以来Web开发领域的最新形势和特点,介绍了网站性能问题的现状、产生的原因,以及改善或解决性能问题的原则、技术技巧和最佳实践。重点关注网页的行为特征,阐释优化Ajax、CSS、...

    高性能网站建设指南

    《高性能网站建设指南》内容丰富,主要包括减少HTTP请求、Edge Computing技术、Expires Header技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复...

    高性能网站建设指南 .pdf

    高性能网站建设指南中文完全版

    高性能网站建设指南:前端工程师技能精髓

    第8章规则8——使用外部和CSS 第9章规则9——减少DNS查找 第10章规则10——精简JavaScript 第11章规则11——避免重定向 第12章规则12——移出重复脚本 第13章规则13——配置ETag 第14章规则14——使AJAX可缓存 第15...

    高性能网站建设指南和建设进阶指南

    《高性能网站建设指南》内容丰富,主要包括减少HTTP请求、Edge Computing技术、Expires Header技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复...

    高性能网站建设指南1

     《高性能网站建设指南》一书介绍了如何针对网站中的Ajax、CSS、JavaScript、Flash和图片进行性能优化。每个性能规则都提供了示例,在本书的配套网站上可以找到代码片段。这些规则包括:  •减少HTTP请求 •使用...

    高性能网站建设指南.part2.rar

    《高性能网站建设指南》内容丰富,主要包括减少HTTP请求、Edge Computing技术、Expires Header技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复...

    《高性能网站建设指南》-- 想网站打开速度快,必看。

    《高性能网站建设指南》内容丰富,主要包括减少HTTP请求、Edge Computing技术、Expires Header技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复...

    《高性能网站建设指南》-- 中文版(2)

    《高性能网站建设指南》内容丰富,主要包括减少HTTP请求、Edge Computing技术、Expires Header技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复...

    《高性能网站建设指南》-- 中文版(1)

    《高性能网站建设指南》内容丰富,主要包括减少HTTP请求、Edge Computing技术、Expires Header技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复...

    高性能网站建设指南(pdf).part3

    《高性能网站建设指南》结合Web2.0以来Web开发领域的最新形势和特点,介绍了网站性能问题的现状、产生的原因,以及改善或解决性能问题的原则、技术技巧和最佳实践。重点关注网页的行为特征,阐释优化Ajax、CSS、...

Global site tag (gtag.js) - Google Analytics