【20年品牌建站】找北京网站建设公司就选新鸿儒/提供北京网站建设报价/北京网站制作/北京网站设计/网站开发、北京网站建设公司电话【010-51267718】有优惠哦!
简体
繁体 简体
我们的服务遍布中国

我们的服务遍布中国
乃至世界

新鸿儒所服务的品牌地域与城市
北京 天津 上海 广州 深圳 香港 厦门 江苏 浙江 山东
重庆 长沙 武汉 成都 西安 宁夏 丽江 青海 云南 乌鲁木齐
黑龙江 内蒙古 河北 ...
新鸿儒服务与合作的全球各地
美国 加拿大 德国 法国 英国 瑞士 意大利 荷兰
印度 日本 韩国 ...

不论你的品牌在何处
我们都可以提供完善的服务与帮助

致电

010-51267718

《高性能网站建设指南》阅读笔记_规则8- 使用外部javascript和css

发布时间:2013-11-22 浏览:135打印字号:


纯粹而言,内联CSS和JS要快一些。这主要是因为外部的示例需要承担多个http请求带来的开销。尽管外部示例可以从样式表和脚本的并行下载中获益,但是明显第一个因素影响的更大一些。这也就是它放在第一位的原因。但外部CSS和JS文件有机会被浏览器缓存起来。当一个页面被重复访问时,就不需要重复下载外部CSS和JS了。既减小了需要下载文档的大小,又不会产生多余的http请求数量。

 

所以,使用内嵌式的还是外联式的,需要通过一定的手段衡量。

1、 页面查看。每个用户产生的页面查看越少,内联的越占优势。(比如,一个月只访问你的网站一次,即使有缓存,下次访问的时候也很有可能被移除了)相反,访问页面的次数越多,外联的越有优势。

2、 缓存,如果没有设置缓存,肯定的是内联的有优势

3、 组建重用,简单的说就是组件重用度低采用内联的好,高则外联的好。这一条是建立在用户属否在一次回话中访问网站的多个页面。只有访问多个页面才有意义。有两种极端情况:一个是每个页面使用都使用各自单独的组件,没有公用部分。这样做会产生过多的http请求数量,只对用户只访问一个页面时有意义。另一种极端是创建一个单独的js文件,包含所有的页面使用的js,再创建一个css包含所有页面使用的css。用户在访问一个页面以后所有的js和css都将会被缓存。在访问多个页面并且访问非常频繁的时候有意义。

事实上页面之间的js和css不可能100%不重合,也不可能100%重合。所以要使用中间情形。对于我们的网站,访问量比较大,如果访问了一般情况下就不会只访问一个页面。所以我们使用外联的。既有公用的common.js,header.js还有每个页面特有的js。符合这一点。我们的网站使用这种外联的最为合适。

那么是不是所有的页面都适合使用外联的最好?有一个例外,就是主页。

这里的主页是指作为浏览器默认页的URL,比如http://hao.360.cn/360导航页。

分析:1、页面查看,虽然访问量非常高,但是通常每个回话只访问一个页面。

2、缓存。完整缓存的比例要比其他的网站更低,处于安全原因,很多用户选择每次关闭浏览器的时候自动清空缓存,所以下一次访问的时候依旧是空缓存状态。

3、组件重用,一般情况下都是跳转到其他的网站去,所以无所谓组件重用。

 

两全其美:

本书中还介绍了两种技术,使页面既可以获得内联的优势,同时又能缓存外部文件。

加载后下载

上面提到的360导航适合使用内联,但是并不是说有的主页都是只访问一个页面,比如我们淘车的网站。我们既希望使用内联快速的加载出页面,又希望通过缓存外部组件的形式为后面其他页面的浏览做准备。所以就会用到下载后加载的技术。

 

示例:


加载后下载是将doOnload函数内联到文档的onload事件。在1秒的延迟之后(确保页面呈现完毕),就会下载所需要的js和css文件,通过创建对应的DOM元素(script和link)并赋予制定的URL实现。在这种页面中。Js和css会被加载到页面中两次(先是内联的,然后是外部的)要使其能够工作,必须处理双重定义。例如脚本可以定义但不能执行任何函数(至少不能让用户发觉)。使用了相对单位(百分比)的css也会产生问题。解决办法:将这些组件放在一个不可见的Ifeame中。


动态内联:

配合加载后下载使用,下载组件后设置cookie。然后重新加载页面后判断有没有cookie,有的话使用外部的,没有的话使用内联的。这样就能在内联和外部之间做出只能选择,从而改善响应时间。

现在就与新鸿儒客服交流

01051267718

您也可进行在线咨询或预约项目顾问
我要预约
在线咨询