信经常观察大站的朋友都会发现,他们都把CSS写在HMTL页面里,一个页面的或者多个页面的背景图片,都集成到一张图片里,他们有的JS文件,也写到页面里了……也许你会迷惑,现在到处讲页面的优化,不都是要把CSS、JS都独立出来,然后掉用吗?大站这样的做法岂不是不利于SEO?难道他们真的不懂SEO吗?下面,我就给大家详细解释下其中原因。

首先,我们访问网站的时候,会对服务器发出HTTP请求,网站打开的快慢,处理与页面的大小图片大小网速等多方面的因素外,还有个重要的因素就是HTTP 的请求数。HTTP的请求数越多,网站打开的速度当然就会越慢,对服务器发出一个HTTP请求,对页面打开速度造成的延时大概是0.01秒,一个连接,一个图片都会对发出一个请求,如果HTTP请求过多,就会造成页面大量的延时,访问速度自然就慢了。db08613

我们看到一些大站,他们页面篇幅是非常巨大的,为了加快访问的速度,他们就采用了减少HTTP请求的方法,把CSS写到HMTL文件里,而不采用外部调用的方法。同样的道理,一个页面会有很多的背景图片,背景图虽然每个体积都很小,但是首次访问的时候,会对服务器发出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的标准了,完全符合HMTL的语义了,HMTL的标签我也运用的精准到位了就够了,我们还要考虑到HTTP的因素在里面。一个网站40%-60%的访问者,是首次打开你的站点,如果你由于服务器的相应时间问题而影响了打开了的速度,对用户体验就会造成很大的影响。

减少HTTP请求,是从性能上来优化网站的一个非常重要部分,也是SEO中非常重要的一个部分,也就是减少HTTP请求有利于SEO。

js,css 和 html 分离,见仁见智的更多相关文章

  1. 史上前端面试最全知识点(附答案)---html & js & css

    史上前端面试最全知识点(附答案) 一.html & js & css 1.AMD和CMD是什么?它们的区别有哪些? AMD和CMD是二种模块定义规范.现在都使用模块化编程,AMD,异步 ...

  2. electron之Windows下使用 html js css 开发桌面应用程序

    1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...

  3. JS/CSS缓存杀手——VS插件

    背景 前些天去考科目二,感觉经历了一场不是高考却胜似高考的考试(10年前的5分之差, 还是难以释怀)!    一行八人,就我学的时间最少(4天,8人一辆车),教练都觉得我肯定还得再来一次! 靠着运气和 ...

  4. gulp实现打包js/css/img/html文件,并对js/css/img文件加上版本号

    参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...

  5. 配置springMVC之后,引入js,css等资源处理

    配置了sringMVC之后,要引入js,css处理: 做法1:在<%page %>下面增加: <%@ taglib prefix="yesurl" uri=&qu ...

  6. springmvc js/css路径问题

    ①No mapping found for HTTP request with URI[/msm2/css/login2.css] in DispatcherServlet with name 'sp ...

  7. iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ

    iOS之在webView中引入本地html,image,js,css文件的方法   2014-12-08 20:00:16CSDN-sky_2016-点击数:10292     项目需求 最近开发的项 ...

  8. springMVC下jsp引用外部js,css等静态资源的解决方法

    直入主题. 1. web.xml对springMVC配置如下: <servlet> <description>Spring MVC配置</description> ...

  9. 在Sublime Text 3 中安装SublimeLinter,Node.js进行JS&CSS代码校验

    转载自:http://www.wiibil.com/website/sublimelinter-jshint-csslint.html 在Sublime Text中安装SublimeLinter,No ...

随机推荐

  1. 如何将std::string转int,double? (C/C++) (C) (template)

    http://www.cnblogs.com/oomusou/archive/2008/08/01/525647.html http://blog.sina.com.cn/s/blog_a843a88 ...

  2. ADO.NET 快速入门(五):从 DataSet 更新数据库

    该主题说明了如何使用 DataSet 在数据库中更新数据.你依然可以直接使用 SqlCommand 在数据库中插入.更新.和删除数据,记住这一点也很重要.理解“从数据库填充DataSet”涵盖的概念有 ...

  3. 序列化对象C++对象的JSON序列化与反序列化探索

    新手发帖,很多方面都是刚入门,有错误的地方请大家见谅,欢迎批评指正 一:背景 作为一名C++开发人员,我始终很期待能够像C#与JAVA那样,可以省力的进行对象的序列化与反序列化,但到现在为止,还没有找 ...

  4. Codeforces gym 100685 A. Ariel 暴力

    A. ArielTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100685/problem/A Desc ...

  5. Codeforces Gym 100733J Summer Wars 线段树,区间更新,区间求最大值,离散化,区间求并

    Summer WarsTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/view.a ...

  6. C#文件读写常用类介绍

    首先要熟悉.NET中处理文件和文件夹的操作.File类和Directory类是其中最主要的两个类.了解它们将对后面功能的实现提供很大的便利.      本节先对和文件系统相关的两个.NET类进行简要介 ...

  7. Ubuntu下多服务器 Rsync同步镜像服务配置

    主服务器:192.168.5.13_ubuntu 从服务器:192.168.5.11_centos ================== 1> 在两台主机上分别安装rsync========== ...

  8. android147 360 程序锁fragment

    package com.itheima.mobileguard.fragment; import java.util.ArrayList; import java.util.List; import ...

  9. 【ZZ】常用推荐算法

    http://liyonghui160com.iteye.com/blog/2082450 在推荐系统简介中,我们给出了推荐系统的一般框架.很明显,推荐方法是整个推荐系统中最核心.最关键的部分,很大程 ...

  10. BFS-hdu-1226-超级密码

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1226 题目意思: 给一个N,给nn个jj进制的数字,问最小的不超过500位的由这些数字组成的jj进制 ...