大型网站都喜欢把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(路易斯·罗森菲尔德) ...
随机推荐
- opencv for python 之 突出点检测
opencv下载地址:http://sourceforge.net/projects/opencvlibrary/files/opencv-win/2.4.3/OpenCV-2.4.3.exe/dow ...
- 将手机micro USB口转换为USB type C连接器的低成本方案
我们知道USB IF提出的type C连接器的终极目标是统一各种USB 接口. 尽管USB 3.0在PC市场上发展的风生水起,但是由于USB 3.0对手机4G LTE的EMI和RFI干扰,导致市场上除 ...
- Android java.lang.ClassCastException
lassCastException,从字面上看,是类型转换错误,通常是进行强制类型转换时候出的错误.下面对产生ClassCastException异常的原因进行分析,然后给出这种异常的解决方法. 这种 ...
- tlplayer for android V2.7(支持变速不变调) 2014-07-20更新
2014-07-20新版本已经修复部分视频倾斜问题,已经更新到服务器,需要的朋友自行下载. 此版本修正了倾斜问题,增加水印等功能.可以动态添加水印. tlplayer for android V2.6 ...
- 浏览器编辑HTML
运行效果: 浏览器编辑HTML // test.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- [LeetCode#272] Closest Binary Search Tree Value II
Problem: Given a non-empty binary search tree and a target value, find k values in the BST that are ...
- SQL Server登录 18456错误
1.以windows验证模式进入数据库管理器. 第二步:右击sa,选择属性: 在常规选项卡中,重新填写密码和确认密码(改成个好记的).把强制实施密码策略去掉. 第三步:点击状态选项卡:勾选授予和启用. ...
- Linux下的iwpriv(iwlist、iwconfig)的简单应用
无线网络飞速发展的今天,许多设备都提供了连接无线网络的功能. 那么Linux下的wifi到底该怎么配置.连接呢?? 开始配置之前,我们要说说iw家族.iw是linux下常用的wifi配置工具,网上有相 ...
- Git branch (分支学习)
以前总结的一些git操作,分享在这里. Git 保存的不是文件差异或者变化量,而只是一系列文件快照. - 列出当前所有分支 git branch <--merge> | <--n ...
- 【原】1.1RDD源码解读(一)
1.RDD(Resilient Distributed DataSet)是Spark生态系统中最基本的抽象,代表不可变的.可并行操作的分区元素集合.RDD这个类有RDD系列所有基本的操作,比如map. ...