大型网站都喜欢把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的说法，这种做法在大公司就更具实施力了。