js,css 和 html 分离,见仁见智
信经常观察大站的朋友都会发现,他们都把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 分离,见仁见智的更多相关文章
- 史上前端面试最全知识点(附答案)---html & js & css
史上前端面试最全知识点(附答案) 一.html & js & css 1.AMD和CMD是什么?它们的区别有哪些? AMD和CMD是二种模块定义规范.现在都使用模块化编程,AMD,异步 ...
- electron之Windows下使用 html js css 开发桌面应用程序
1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...
- JS/CSS缓存杀手——VS插件
背景 前些天去考科目二,感觉经历了一场不是高考却胜似高考的考试(10年前的5分之差, 还是难以释怀)! 一行八人,就我学的时间最少(4天,8人一辆车),教练都觉得我肯定还得再来一次! 靠着运气和 ...
- gulp实现打包js/css/img/html文件,并对js/css/img文件加上版本号
参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...
- 配置springMVC之后,引入js,css等资源处理
配置了sringMVC之后,要引入js,css处理: 做法1:在<%page %>下面增加: <%@ taglib prefix="yesurl" uri=&qu ...
- springmvc js/css路径问题
①No mapping found for HTTP request with URI[/msm2/css/login2.css] in DispatcherServlet with name 'sp ...
- iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ
iOS之在webView中引入本地html,image,js,css文件的方法 2014-12-08 20:00:16CSDN-sky_2016-点击数:10292 项目需求 最近开发的项 ...
- springMVC下jsp引用外部js,css等静态资源的解决方法
直入主题. 1. web.xml对springMVC配置如下: <servlet> <description>Spring MVC配置</description> ...
- 在Sublime Text 3 中安装SublimeLinter,Node.js进行JS&CSS代码校验
转载自:http://www.wiibil.com/website/sublimelinter-jshint-csslint.html 在Sublime Text中安装SublimeLinter,No ...
随机推荐
- SQL Server中如何获取当前年,月,日,时,分,秒
分类: SQL Server select GETDATE() as '当前日期',DateName(year,GetDate()) as '年',DateName(month,GetDate()) ...
- Navicat for mysql 11.0破解方法
Navicat for mysql破解器 首先下载破解器,然后解压至随意一个目录下.最后双击exe程序,按照提示找到你安装好的navicat for mysql文件夹下的navicat.exe程序,之 ...
- 2015 NOIP day2 t2 信息传递 tarjan
信息传递 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.luogu.org/problem/show?pid=2661 Descrip ...
- BZOJ 1024: [SCOI2009]生日快乐 dfs
1024: [SCOI2009]生日快乐 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/p ...
- asp.net mvc控制器动作体返回ImageResult,可作验证码
public ActionResult Img() { // 获取博客园空间顶部的banner图片 WebRequest req = WebRequest.Create("http://sp ...
- 04.URL路径访问与模块控制器之间的关系
<?php //初使化,进行加载. //通过这个英文名来了解,他是定义的与thinkphp有关的核心框架文件目录路径 //他可以通过这一个常量,在以后运行的时候都去找这个路径,确保在运行过程当, ...
- 《Maven_孔浩》Maven依赖
项目目录结构如下: pom.xml src main\java\zttc\itat\maven\ch02 target pom.xml文件说明 groupId:项目id(如:zt ...
- iOS实现自定义的弹出视图(popView)
前段时间,在项目中有个需求是支付完成后,弹出红包,实现这么一个发红包的功能.做了最后,实现的效果大致如下: 一.使用方法 整个ViewController的代码大致如下 // // SecondVi ...
- oracle数据字典和动态性能视图
数据字典和动态性能视图数据字典是oracle数据库中重要的组成部分,提高了数据库的一些系统信息.(静态信息)动态性能视图记载了例程启动后的信息.(动态信息) 数据字典记录了数据的系统信息,是只读表和动 ...
- android scrollview主要的问题
项目做多了之后,会发现其实 ScrollView嵌套ListVew或者GridView等很常用,但是你也会发现各种奇怪问题产生.根据个人经验现在列出常见问题以及代码最少最简单的解决方法. 问题一 : ...