相信经常观察大站的朋友都会发现,他们都把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. 当 ITOA 遇上 OneAlert,企业可以至少每年节省 3600 小时!

    每个工作日,一家大型企业都可能存在一两件优先级为 1 级的事件,五六件优先级为 2 级的事件和百来件优先级为 3 级的事件.试想一下,如果公司所有支持人员都要收到每个事件的通知--不想了,我好方!还能 ...

  2. [Gauss]POJ2947 Widget Factory

    题意: 有n种小工具要加工,每种工具的加工时间为3到9天,给了m条加工记录.  每条记录 X $s_1$ $s_2$ 分别代表 这个工人在$s_1$到$s_2$(前闭后闭)的时间里加工了X件小工具   ...

  3. Linux使用wake_up_interruptible()唤醒注册到等待队列上的进程

    http://blog.sina.com.cn/s/blog_4770ef020101h48l.html     功能:唤醒注册到等待队列上的进程 原型:     #include     void ...

  4. 【Linux远程管理】SSH协议远程管理

    SSH(Secure Shell)协议.命令行界面(CLI)下的远程管理工具,几乎所有的操作系统都有,区别于Telnet,SSH在进行数据传送时会对数据进行加密,所以SSH是比较安全的协议.几乎所有的 ...

  5. Date简介

    Date类 在JDK1.0中,Date类是唯一的一个代表时间的类,但是由于Date类不便于实现国际化,所以从JDK1.1版本开始,推荐使用Calendar类进行时间和日期处理.这里简单介绍一下Date ...

  6. 【HDOJ】4400 Mines

    (1) KD树,但实际没有STL快,3000+ /* 4400 */ #include <iostream> #include <string> #include <ma ...

  7. Outlook接收qq的邮件

    1.先去qq邮箱,设置,账户 开启pop3服务,假如之前开启过,最好关闭之后重新开启 最新版本的必须使用邮箱的独立密码才可以收取邮件 (否则就算你之前开通了,也无法用你的qq账号和密码收取邮件的) 2 ...

  8. php include include_once require require_once 的区别与联系

    一.require 与 include 的区别: The require() function is identical to include(), except that it handles er ...

  9. 深刻理解C#的传值调用和传引用调用

    传值调用和传引用调用是几乎所有主流语言都会涉及到的问题,下面我谈谈我对C#中传值调用和传引用调用的理解. 1. 一般对C#中传值调用和传引用调用的理解 如果传递的参数是基元类型(int,float等) ...

  10. content:attr()

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...