信经常观察大站的朋友都会发现,他们都把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. ThinkPHP3.1.3的单字母函数汇总

    A函数: 用于实例化Action 格式:[项目://][分组/]模块 /** * A函数用于实例化Action 格式:[项目://][分组/]模块 * @param string $name Acti ...

  2. 机器学习笔记之遗传算法(GA)

    遗传算法是一种大致基于模拟进化的学习方法,假设常被描述为二进制串.在遗传算法中,每一步都根据给定的适应度评估准则去评估当前的假设,然后用概率的方法选择适应度最高的假设作为产生下一代的种子.产生下一代的 ...

  3. 英特尔实感3D摄像头

    RealSense 3D(实感3D)是英特尔提供的一套感知计算解决方案,包括了手势的识别.控制,人脸的识别.认证.控制,语音识别与控制,增强现实,3D扫描和重构等许多先进的技术.包括立体眼镜(暂未公开 ...

  4. android开发在adapter中使用反射添加元素

    android开发中最常用的控件之一就是listview,伴随listview还要有adapter和放入适配器的item.然后假设其中有一部分item的生成符合一定规律,Item item = new ...

  5. 关于Struts2的客户端校验的FreeMarker template error!

    把<s:form action="login" namespace="/" validate="true" >改为 <s: ...

  6. 数据返回[数据库基础]——图解JOIN

    废话就不多说了,开始... 一.提要 JOIN对于接触过数据库的人,这个词都不生疏,而且很多人很清楚各种JOIN,还有很多人对这个懂得也不是很透辟,此次就说说JOIN操纵. 图片是很容易被接受和懂得, ...

  7. 华为C语言笔试题集合

    ①华为笔试题搜集 1.static有什么用途?(请至少说明两种)     1)在函数体,一个被声明为静态的变量在这一函数被调用过程中维持其值不变.     2) 在模块内(但在函数体外),一个被声明为 ...

  8. 理解 __declspec(dllexport)和__declspec(dllimport)

    1.解决的问题: 考虑下面的需求,使用一个方法,一个是提供者,一个是使用者,二者之间的接口是头文件.头文件中声明了方法,在提供者那里方法应该被声明为__declspec(dllexport),在使用者 ...

  9. web.xml里<filter-mapping>中的<dispatcher>作用

    2.4版本的servlet规范在部属描述符中新增加了一个<dispatcher>元素,这个元素有四个可能的值:即REQUEST,FORWARD,INCLUDE和ERROR,可以在一个< ...

  10. 安卓模拟器BlueStacks 安装使用教程(图解)

    系统要求 操作系统 Win XP SP3/Vista/Win 7/Win 8/Win 8.1 所需的运行环境 Win XP用户请先升级到SP3 并安装Windows Installer 4.5 Win ...