大型网站都喜欢把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(路易斯·罗森菲尔德) ...
随机推荐
- 当 ITOA 遇上 OneAlert,企业可以至少每年节省 3600 小时!
每个工作日,一家大型企业都可能存在一两件优先级为 1 级的事件,五六件优先级为 2 级的事件和百来件优先级为 3 级的事件.试想一下,如果公司所有支持人员都要收到每个事件的通知--不想了,我好方!还能 ...
- [Gauss]POJ2947 Widget Factory
题意: 有n种小工具要加工,每种工具的加工时间为3到9天,给了m条加工记录. 每条记录 X $s_1$ $s_2$ 分别代表 这个工人在$s_1$到$s_2$(前闭后闭)的时间里加工了X件小工具 ...
- Linux使用wake_up_interruptible()唤醒注册到等待队列上的进程
http://blog.sina.com.cn/s/blog_4770ef020101h48l.html 功能:唤醒注册到等待队列上的进程 原型: #include void ...
- 【Linux远程管理】SSH协议远程管理
SSH(Secure Shell)协议.命令行界面(CLI)下的远程管理工具,几乎所有的操作系统都有,区别于Telnet,SSH在进行数据传送时会对数据进行加密,所以SSH是比较安全的协议.几乎所有的 ...
- Date简介
Date类 在JDK1.0中,Date类是唯一的一个代表时间的类,但是由于Date类不便于实现国际化,所以从JDK1.1版本开始,推荐使用Calendar类进行时间和日期处理.这里简单介绍一下Date ...
- 【HDOJ】4400 Mines
(1) KD树,但实际没有STL快,3000+ /* 4400 */ #include <iostream> #include <string> #include <ma ...
- Outlook接收qq的邮件
1.先去qq邮箱,设置,账户 开启pop3服务,假如之前开启过,最好关闭之后重新开启 最新版本的必须使用邮箱的独立密码才可以收取邮件 (否则就算你之前开通了,也无法用你的qq账号和密码收取邮件的) 2 ...
- php include include_once require require_once 的区别与联系
一.require 与 include 的区别: The require() function is identical to include(), except that it handles er ...
- 深刻理解C#的传值调用和传引用调用
传值调用和传引用调用是几乎所有主流语言都会涉及到的问题,下面我谈谈我对C#中传值调用和传引用调用的理解. 1. 一般对C#中传值调用和传引用调用的理解 如果传递的参数是基元类型(int,float等) ...
- content:attr()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...