《高性能网站建设》(9)--使用外部JavaScript和CSS

通常情况下,JavaScript和CSS包含在外部文件中更好

纯粹而言,内联快一些

在下载量相同的情况下,内联比外部更快一些(外部文件需要承担多个HTTP请求带来的开销,由此可见减少HTTP请求数量的重要性)。尽管外部示例可以从样式表和脚本的并行下载中获益,但是HTTP请求数量的差距使内联示例在响应时间上更快一些。

但是现实中还是使用外部文件会产生更快的页面,外部文件所带来的收益是JavaScript和CSS文件有机会被浏览器缓存起来(如果JavaScript和CSS是外部文件,浏览器就能缓存它们以减小HTML文档的大小并且不会增加HTTP请求的数量

页面浏览量

用户如果能够产生较多的页面浏览量,浏览器很可能将(具有长久Expires头的)外部文件放在其缓存中。

组件重组

两种极端:

1.页面的JavaScript和CSS的重用既不可能100%重叠也不可能100%无关。

这一种极端就是为每一个页面提供一组分离的外部文件。

缺点在于每个页面都强制用户使用另外一组外部组件并产生令响应时间变慢的HTTP请求。

优点是这种方式对于普通用户只访问一个页面和很少进行跨页访问的网站来说是有意义的。

2.创造一个单独的,联合了所有JavaScript的文件,在创见一个包括所有CSS的文件。

这种极端只要求用户生成一个HTTP请求,但是增加了用户首次进行页面浏览时的下载数据量。

缺点是用户浏览页面时要下载的JavaScript和CSS要多于所需的数量,而且任何一块独立的脚本和样式表改变之后,都需要更新文件(先前缓存的版本无效)。

优点是这种方式对于那些每用户每月会话数量较高,普通用户在一个会话中访问多个不同页面的网站室友意义的。

如果不符合这两种极端情况,那就折中

将页面划分成集中页面类型,为每个类型创建单独的脚本和样式表。这比维护一个单独的页面要复杂,但通常比为每个页面维护不同的脚本和样式表要容易,并且对于给定的任意页面都只需要下载很少的多余JavaScript和CSS.

<strong><em>总结就是你做出的JavaScript和CSS外部文件边界相关的决定影响着组建的 重要程度。</strong></em>

典型的对比结果

在对内联和使用外部文件进行分析对比时,关键在于与HTML文档请求数量相关的,外部JavaScript和CSS组件被缓存的频率

主页

1.页面浏览量

2.空缓存VS完整缓存

3.组件重用

两全其美

两种技术方法可以激活的内联的优势也可以缓存外部文件:

1.加载后下载

可以通过在主页加载完成后动态下载外部组件来实现(通过onload事件)以便能够将外部文件放在浏览器的缓存中以便用户接下来访问其他页面。

2.动态内联

在服务器不能查看浏览器缓存中有些什么的情况下,可以使用cookies作指示器(有cookie则表示有可能外部组件位于浏览器的缓存中并使用了外部文件)。如果cookie不存在,就可以内联JavaScript和CSS

当用户第一次访问页面时,服务器发现没有cookie,于是生成一个内联了组件的页面。然后服务器添加JavaScript来在页面加载后动态下载外部文件(并设置cookie)。下依稀访问页面时,服务器看到了cookie,就会生成一个使用外部文件的页面。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,372评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,368评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,415评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,157评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,171评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,125评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,028评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,887评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,310评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,533评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,690评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,411评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,004评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,812评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,693评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,577评论 2 353

推荐阅读更多精彩内容