相信经常观察大站的朋友都会发现,他们都把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中的真正原因的更多相关文章

  1. 大型网站技术架构介绍--squid

    一.大型网站技术架构介绍 1.pv高  ip高 并发量 2.大型网站架构重点    1. 高性能:响应时间,TPS,系统性能计数器.缓存,消息队列等.     高可用性High Availabilit ...

  2. php大型网站如何提高性能和并发访问

    一.大型网站性能提高策略: 大型网站,比如门户网站,在面对大量用户访问.高并发请求方面,基本的解决方案集中在这样几个环节:使用高性能的服务器.高性能的数据库.高效率的编程语言.还有高性能的Web容器. ...

  3. 转:Mysql在大型网站的应用架构演变

    原文来自于:http://www.cnblogs.com/Creator/p/3776110.html 原创文章,转载请注明: 转载自http://www.cnblogs.com/Creator/本文 ...

  4. 大型网站的SEO引爆点

    网站越大,SEO服务做起来就轻松,因为大型网站都有很好的执行团队,你只需要找准他们网站的SEO爆破点,就能够迅速获得非常理想的SEO效果.本文将结合我最近两年的几个经典案例:腾讯拍拍.金山爱词霸.中青 ...

  5. 《大型网站系统与JAVA中间件实践》读书笔记-大型网站架构演进

    大型网站架构演进 大型网站是一种很常见的分布式系统,除了海量数据和高并发的访问量,本身业务和系统也复杂. 大型网站的架构演进 我们现在常用的大型网站都是从小网站一步一步发展起来的,这个过程中会 有一些 ...

  6. 关于大型网站技术演进的思考(十三)--网站静态化处理—CSI(5)

    讲完了SSI,ESI,下面就要讲讲CSI了 ,CSI是浏览器端的动静整合方案,当我文章发表后有朋友就问我,CSI技术是不是就是通过ajax来加载数据啊,我当时的回答只是说你的理解有点片面,那么到底什么 ...

  7. 为什么大型网站前端使用PHP后台逻辑用Java

    前两周参加完 ThinkInLamp 的 PHP 架构师大会,听鸟哥一上午的分享,感慨很多,PHP 业界虽然方向不明荒废了两三年的时间,终究还是又重新崛起了. 其实包括 Java 的重启问题,现在也已 ...

  8. 【转】关于大型网站技术演进的思考(十三)--网站静态化处理—CSI(5)

    讲完了SSI,ESI,下面就要讲讲CSI了 ,CSI是浏览器端的动静整合方案,当我文章发表后有朋友就问我,CSI技术是不是就是通过ajax来加载数据啊,我当时的回答只是说你的理解有点片面,那么到底什么 ...

  9. Web信息架构——设计大型网站(第3版)(久负盛名经典再现,信息架构设计领域基石之作!)

    Web信息架构——设计大型网站(第3版)(久负盛名经典再现,信息架构设计领域基石之作!) [美]]Peter Morville(彼得·莫维尔)  Louis Rosenfeld(路易斯·罗森菲尔德) ...

随机推荐

  1. android 案例:从另一个activity选择信息并获取返回值

    主窗口: package com.example.test; import android.app.Activity; import android.app.AlertDialog; import a ...

  2. linux登录后出现_bash-4.1#终端提示符异常

    如果使用root用户登录出现上述提示,则需要需要重建 /root .bash_profile文件: 1. vi /root .bash_profile 2. 输入如下内容 # .bashrc # Us ...

  3. 服务器部署_linuix下 一台nginx 多域名

    近日朋友要我帮他调服务器, 一. 初步需求如下: 1. 一台服务器下要放三个应用,对应三个域名:www.aaa.com,www.bbb.com,www.ccc.com. 2. 其中后两个应用也要可以用 ...

  4. easyui源码翻译1.32--Menu(菜单)

    前言 使用$.fn.menu.defaults重写默认值对象.下载该插件翻译源码 菜单组件通常用于快捷菜单.他是构建其他菜单组件的必备基础组件.比如:menubutton和splitbutton.它还 ...

  5. VC 透明滑动控件Slider Control

    操作系统:Windows 7软件环境:Visual C++ 2008 SP1本次目的:为滑动控件设置背景透明 经常在编写有背景的程序时,滑动控件Slider Control看起来与背景十分不合,我们可 ...

  6. bzoj1007

    其实吧,就是一个半平面交,而且不用考虑转回来的情况,所以只要极角排序然后用栈即可给的是点斜式,比极角很方便至于完整版的半平面交还没写过,看到再说吧 ..] of longint; v:..] of b ...

  7. C#中的深拷贝与浅拷贝

    1.基本的概念: 首先我们应该了解一下什么叫深拷贝与浅拷贝(Deep Copy and Shallow Copy). a.浅拷贝(Shallow Copy影子克隆):只复制对象的基本类型,对象类型,仍 ...

  8. OpenSSL 拒绝服务漏洞

    漏洞名称: OpenSSL 拒绝服务漏洞 CNNVD编号: CNNVD-201312-058 发布时间: 2013-12-05 更新时间: 2013-12-05 危害等级:    漏洞类型:   威胁 ...

  9. [HDU 1011] Starship Troopers

    Starship Troopers Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  10. App Store 加急审核方式

    https://developer.apple.com/contact/app-store/?topic=expedite 1:理由一般是用户安全问题或者崩溃问题成功率会高一些. 如果是崩溃问题,你最 ...