码迷,mamicode.com
首页 > 其他好文 > 详细

尽量少嵌套无用的div;外部文件尽量使用link而不要使用用@import

时间:2017-08-17 00:29:38      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:成本   round   一个   嵌套   引用   .net   意义   and   研究   

  最近的工作又学到了很多东西,在这里记录一下。

  1,尽量少嵌套无用的div,这个问题领导很严肃的跟我提过很多次,因为我很喜欢用很多div,而且有很多div都是无存在意义的。后来领导给了我一些资料,我看了一下,发现这样做确实存在很大的问题,原因如下:(以下蓝底文字摘自搜狐WEB标准

2.1 节约运营成本
采用 WEB 标准制作,我们可以做到表现和形式及内容的分离,我们采用XHTML 语言来表现(数据),用CSS 来控制(页面元素呈现的)形式。写的好的页面,XHTML 代码中基本上都是用户要看的数据,而其他修饰性的东西,全部由 CSS 来控制。这样一来(XHTML)页面的体积就大大减小了,这样带宽上的费用就会大家降低了,这个是怎么降低的?
带宽成本:
页面总 K 数*pv/天=流量/天 *页面总 K 数=总下载量之和
通过公式可以看出,页面总 K 数越小,流量越小;
举个例子:搜狐首页如果每减少 1K,按每天 1000万 pv 计算,那么每天将会节约 10G 的带宽流量。
通过公式反推,如果带宽一定的情况下,页面总 K 数越小,可容纳同时访问的用户就越多。
带宽/页面总 K 数=pv *当前pv 为同时访问量

  看到这里,我就知道嵌套多个div的严重性了,多余的代码让页面变大,页面变大了加载速度会变慢,所以我以后会尽量少用无意义的div。

  不过也要注意一个问题,就是不要为了减少html的代码而大量增加css样式,我看到网上有一句话说得好:html 和 css 文件就像一个跷跷板的两头。html 代码倒是整洁了,css 代码却出现了一定的繁冗。最后我套用那句著名的句子:html和css两手抓,两手都要硬!

  2,css样式引用尽量使用link,不要使用@import,link的加载会比@import快,具体的例子我就不列举了,有兴趣研究的可以阅读这篇文章:http://www.qianduan.net/high-performance-web-site-do-not-use-import.html

  题外话:本文标题原本是:“最近又学到新东西”,但是后来我想了一下,起这样无意义的标题对seo实在是很不好,至于为啥不好我就不多说了,所以我起了一个很长的而且语法又不太连贯的标题:“尽量少嵌套无用的div;外部文件尽量使用link而不要使用用@import”,是但了,看得明白就行,我的旧标题跟我用无意义的div感觉都一样,挖哈哈!!人生也不要这么毫无意义的过哦。加油!

 

  这篇文章应该是进广西人才网(2013.8.1)技术组(2013.10)不久的时候写的,是辉哥教我的,在他这里我确实学到不少东西,他是我jQuery的启蒙老师,我很感激他~(2017.8.11记)

 

尽量少嵌套无用的div;外部文件尽量使用link而不要使用用@import

标签:成本   round   一个   嵌套   引用   .net   意义   and   研究   

原文地址:http://www.cnblogs.com/sunnywindycloudy/p/7376575.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!