大型网站都喜欢把js写在html中的真正原因
相信经常观察大站的朋友都会发现,他们都把CSS写在HTML页面里,一个页面的或者多个页面的背景图片,都集成到一张图片里,他们有的JS文件,也写到页面里了……也许你会迷惑,现在到处讲页面的优化,不都是要把CSS、JS都独立出来,然后掉用吗?大站这样的做法岂不是不利于SEO?难道他们真的不懂SEO吗?下面,我就给大家详细解释下其中原因。
首先,我们访问网站的时候,会对服务器发出HTTP请求,网站打开的快慢,处理与页面的大小图片大小网速等多方面的因素外,还有个重要的因素就是HTTP 的请求数。HTTP的请求数越多,网站打开的速度当然就会越慢,对服务器发出一个HTTP请求,对页面打开速度造成的延时大概是0.01秒,一个连接,一个图片都会对发出一个请求,如果HTTP请求过多,就会造成页面大量的延时,访问速度自然就慢了。
我们看到一些大站,他们页面篇幅是非常巨大的,为了加快访问的速度,他们就采用了减少HTTP请求的方法,把CSS写到HTML文件里,而不采用外部调用的方法。同样的道理,一个页面会有很多的背景图片,背景图虽然每个体积都很小,但是首次访问的时候,会对服务器发出HTTP请求,造成延时。如果把所有的背景图,都集成到一个图片里,这样就只会对服务器发出一个HTTP请求,请求数就会大量减少,延时就小了。然后采用CSS 的 background-image 和 background-position 属性来实现所需的背景图并定位,达到页面所需要的表达效果。
对于页面不常更新的地方,一般就是采用缓存的办法来降低HTTP请求次数。有兴趣的朋友可以去查阅下资料,ASP、PHP都有相应的实现方法。 我们在进行DIV+CSS布局的时候,有的朋友喜欢把CSS分成几个部分,比如base.css、header.css、mianbody.css、footer.css这样对页面的维护和修改是比较方便的,比较清晰明朗,但是对加快服务器响应时间就存在问题了。所以一般是分开写,写好之后再合并。
所以,我们做页面设计的时候,并不是说我用DIV+CSS来设计,比table更好了,符合W3C的标准了,完全符合HTML的语义了,HTML的标签我也运用的精准到位了就够了,我们还要考虑到HTTP的因素在里面。一个网站40%-60%的访问者,是首次打开你的站点,如果你由于服务器的相应时间问题而影响了打开了的速度,对用户体验就会造成很大的影响。
减少HTTP请求,是从性能上来优化网站的一个非常重要部分,也是SEO中非常重要的一个部分,也就是减少HTTP请求有利于SEO。
对于日益发展的服务器硬件和网络性能的提高,这些优化提高了一些性能但其效果甚微,不足以得到更好的解决服务器压力。往往控制人为的维护成本才是考虑的首要方面。
大公司把js放在当前页里的原因有很多
第一:历史遗留问题,经过很多版本的迭代,老的程序员留下来的老架构没有改变,导致后续的新人也将js代码索性写在了这个页面里。
第二:程序员也嫌麻烦,单个js分来分去合来合去的,又要考虑存放目录结构,又要考虑命名约定,干脆直接写在一个页面里,然而减少请求数缓解服务器压力正好也成为这个“偷懒”做法的有力保障。
第三:有些大网站恰恰因为交互脚本比较多(数量多,有些情况下代码量不多但是模块分的细),这样如果把js分出去,反而不利于管理,零零散散的js模块文件,虽然命名和目录可能组织的很规范,但管理起来也让人头痛,修改一个js要找到这个对应的文件修改,添加一个js模块要加上一个link还要在目录下创建新的js,这时直接写在页面里,即很快定位到这个功能,管理反而比较方便。
再结合降低http request的说法,这种做法在大公司就更具实施力了。
大型网站都喜欢把js写在html中的真正原因的更多相关文章
- 大型网站技术架构介绍--squid
一.大型网站技术架构介绍 1.pv高 ip高 并发量 2.大型网站架构重点 1. 高性能:响应时间,TPS,系统性能计数器.缓存,消息队列等. 高可用性High Availabilit ...
- php大型网站如何提高性能和并发访问
一.大型网站性能提高策略: 大型网站,比如门户网站,在面对大量用户访问.高并发请求方面,基本的解决方案集中在这样几个环节:使用高性能的服务器.高性能的数据库.高效率的编程语言.还有高性能的Web容器. ...
- 转:Mysql在大型网站的应用架构演变
原文来自于:http://www.cnblogs.com/Creator/p/3776110.html 原创文章,转载请注明: 转载自http://www.cnblogs.com/Creator/本文 ...
- 大型网站的SEO引爆点
网站越大,SEO服务做起来就轻松,因为大型网站都有很好的执行团队,你只需要找准他们网站的SEO爆破点,就能够迅速获得非常理想的SEO效果.本文将结合我最近两年的几个经典案例:腾讯拍拍.金山爱词霸.中青 ...
- 《大型网站系统与JAVA中间件实践》读书笔记-大型网站架构演进
大型网站架构演进 大型网站是一种很常见的分布式系统,除了海量数据和高并发的访问量,本身业务和系统也复杂. 大型网站的架构演进 我们现在常用的大型网站都是从小网站一步一步发展起来的,这个过程中会 有一些 ...
- 关于大型网站技术演进的思考(十三)--网站静态化处理—CSI(5)
讲完了SSI,ESI,下面就要讲讲CSI了 ,CSI是浏览器端的动静整合方案,当我文章发表后有朋友就问我,CSI技术是不是就是通过ajax来加载数据啊,我当时的回答只是说你的理解有点片面,那么到底什么 ...
- 为什么大型网站前端使用PHP后台逻辑用Java
前两周参加完 ThinkInLamp 的 PHP 架构师大会,听鸟哥一上午的分享,感慨很多,PHP 业界虽然方向不明荒废了两三年的时间,终究还是又重新崛起了. 其实包括 Java 的重启问题,现在也已 ...
- 【转】关于大型网站技术演进的思考(十三)--网站静态化处理—CSI(5)
讲完了SSI,ESI,下面就要讲讲CSI了 ,CSI是浏览器端的动静整合方案,当我文章发表后有朋友就问我,CSI技术是不是就是通过ajax来加载数据啊,我当时的回答只是说你的理解有点片面,那么到底什么 ...
- Web信息架构——设计大型网站(第3版)(久负盛名经典再现,信息架构设计领域基石之作!)
Web信息架构——设计大型网站(第3版)(久负盛名经典再现,信息架构设计领域基石之作!) [美]]Peter Morville(彼得·莫维尔) Louis Rosenfeld(路易斯·罗森菲尔德) ...
随机推荐
- PYTHON多进程并发WEB服务器(利用LINUX的FORK)
这个又牛X 一点点.. 这还不涉及IO,如果调用GEVENT之类作异步IO或非阻塞IO,那就大框架都有啦.. ############################################# ...
- Spring3 +mybatis3 之 MapperScannerConfigurer
之前一直使用"org.mybatis.spring.mapper.MapperFactoryBean"这个类在spring中配置mybatis的dao接口,后来发现如果dao太多话 ...
- 【NOIP 2012 国王游戏】 贪心+高精度
题目描述 恰逢 H 国国庆,国王邀请 n 位大臣来玩一个有奖游戏.首先,他让每个大臣在左.右 手上面分别写下一个整数,国王自己也在左.右手上各写一个整数.然后,让这 n 位大臣排 成一排,国王站在队伍 ...
- 用PersonalRank实现基于图的推荐算法
今天我们讲一个下怎么使用随机游走算法PersonalRank实现基于图的推荐. 在推荐系统中,用户行为数据可以表示成图的形式,具体来说是二部图.用户的行为数据集由一个个(u,i)二元组组成,表示为用户 ...
- c#执行并行任务之Parallel与TaskFactory
任务:几千条(大量)数据往服务器数据库填写.要求单开线程执行,分割成小数据包,多线程运行. 实现方法:Parallel与TaskFactory都可以. 主要代码: Parallel: Barrier ...
- 从零开始学习jQuery (八) 插播:jQuery实施方案
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章属于临时插播, 用于介绍我在本公司的j ...
- 安装Visual Studio2015后,使用VS2013开发的项目,在IIS访问都提示“公共语言运行时检测到无效的程序”的解决办法
1.安装VS2015后,.NET Framework4.6会替换掉 C:\Windows\Microsoft.NET\Framework64\v4.0.30319 (如果使用的是windows7 64 ...
- maven安装步骤
第一步:配置maven环境 maven3 安装: 安装 Maven 之前要求先确定你的 JDK 已经安装配置完成.Maven是 Apache 下的一个项目,目前最新版本是 3.0.4,我用的也是这个. ...
- tomcat7 使用log4j进行日志记录
将 tomcat-juli.jar 文件放置到 $CATALINA_BASE/bin 目录(实际上,该目录下已经有了) 从 log4j 网站下载 jar 包,并放置于 $CATALINA_BASE/l ...
- POJ1680 Currency Exchange SPFA判正环
转载来源:優YoU http://user.qzone.qq.com/289065406/blog/1299337940 提示:关键在于反向利用Bellman-Ford算法 题目大意 有多种汇币,汇 ...