css,html性能优化

css性能优化

CSS是负责布局和渲染的重要角色,漂亮的页面当然能够吸引用户。本文是自己在开发过程中总结的关于CSS与性能的关系,可能有不对之处,希望能够指出。

?

1、所有的样式尽量放在css文件中,HTML标签中不要写style属性,因为浏览器在所有的样式加载完成之后,才会开始渲染整个页面,写在标签属性必会加长浏览器的渲染时间

2、删除默认样式代码

因为会影响浏览器的执行时间。如:align="left",默认就是左对齐

3、减少使用相对定位

因为这会影响浏览器的repain和reflow。如:position:absolute

4、CSS 缩写

CSS 缩写可以让你用极少的代码定义一系列样式属性,这种做法可以极大程度的缩减代码量以达到提高性能的目的。如:#ff00ff替换成#f0f

5、对CSS属性进行合并

属性合并减少代码量和浏览器的渲染时间以达到提高性能的目的。如:font-size: 36px; font-family: Arial; line-height: 48px; font-weight: bold;替换成font:bold 36px/48px Arial;

6、CSS选择器

浏览器是“从右往左”来分析 class 的,它的匹配规则是从右向左来进行匹配的,因此最右边的选择符就是关键选择符。比如:#parent > a {}与#parent a {},前者浏览器首先会查找页面上所有的“a”节点,然后再去做进一步的判断:如果它的父节点的 id 为“parent”,则匹配成功。后者浏览器先便利所有的“a”节点,然后步步上溯其父节点,直到 DOM 结构的根节点(document),如果有某个节点的 id 为“parent”,则匹配成功,否则继续查找下一个“a”节点。

尽量减少规则数量,规则越多,匹配越慢

减少属性选择器

7、避免使用 CSS表达式

CSS表达式只有ie浏览器可以执行,但是计算次数比较频繁,不仅页面渲染和改变大小 (resize) 时会执行,页面滚动 (scroll) 时也会执行,甚至连鼠标在页面上滑动时都会执行。

8、利用继承机制,减少CSS

如果很多子节点都需要设定该 CSS 属性值,可以统一设定其父节点的该 CSS 属性,这样一来,所有的子节点再无需做额外设定,加速了 CSS 的分析效率。

9、样式放在HTML页面头部加载

浏览器在所有的样式加载完成之后,才会开始渲染整个页面,在此之前,浏览器不会渲染页面里的任何内容,页面会一直呈现空白。

10、避免使用滤镜

IE 特有的 AlphaImageLoader filter 是为了解决 IE6 及以前版本不支持半透明的 PNG 图片而存在的。但是浏览器在下载 filter 里面的图片时会“冻结”浏览器,停止渲染页面。同时 filter 也会增大内存消耗。最不能忍受的是 filter 样式在每个页面元素(使用到该 filter 样式)渲染时都会被浏览器分析一次,而不是像一般的背景图片渲染模式:使用过该背景图片的所有元素都是被浏览器一次性渲染的。针对这种情况,最好的解决办法就是使用 PNG8。

11、利用data:image/png;base64来代替url加载图片

"data"类型的Url格式,是在RFC2397中 提出的,目的对于一些“小”的数据,可以在网页中直接嵌入,而不是从外部文件载入。

12、减少重复的样式,多人开发时会出现多个人定义同一个样式,可以借助浏览器检测

13、合并、压缩你的css文件,减少http请求,可以借助工具或者自动化构建。

14、使用CSS sprite来处理你的图片

HTML性能优化

  页面优化是对网页中的HTML代码进行必要的调整,可以有效地精简页面中的冗余代码,加快网页显示速度,减少网页占用搜索引擎服务器的存储空间,提高用户体验和搜索引擎友好性,当然也可以更好的突出页面的主题,提高页面的相关性。下面是我总结出来的编写html代码时需要注意的,仅供参考。

1、HTML标签有始终。 减少浏览器的判断时间

2、把script标签移到HTML文件末尾,因为JS会阻塞后面的页面的显示。

3、减少iframe的使用,因为iframe会增加一条http请求,阻止页面加载,即使内容为空,加载也需要时间

4、id和class,在能看明白的基础上,简化命名,在含有关键字的连接词中连接符号用‘-‘,不要用‘_‘

5、保持统一大小写,统一大小写有利于浏览器缓存,虽然浏览器不区分大小写,但是w3c标准为小写

6、清除空格,虽然空格有助于我们查看代码,但是每个空格相当于一个字符,空格越多,页面体积越大,像google、baidu等搜索引擎的首页去掉了所有可以去掉的空格、回车等字符,这样可以加快web页面的传输。可以借助于DW软件进行批量删除 html内标签之间空格,sublime text中ctrl+a,然后长按shift+tab全部左对齐,清除行开头的空格

7、减少不必要的嵌套,尽量扁平化,因为当浏览器编译器遇到一个标签时就开始寻找它的结束标签,直到它匹配上才能显示它的内容,所以当嵌套很多时打开页面就会特别慢。

8、减少注释,因为过多注释不光占用空间,如果里面有大量关键词会影响搜索引擎的搜索

9、使用css+div代替table布局,去掉格式化控制标签如:strong,b,i等,使用css控制

10、代码要结构化、语义化

11、css和javascript尽量全部分离到单独的文件中

12、除去无用的标签和空标签

13、尽量少使用废弃的标签,如b、i等,尽管高版本浏览器是向后兼容的

时间: 2024-11-20 15:40:42

css,html性能优化的相关文章

[转载]网站前端性能优化之javascript和css——网站性能优化

之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的.关于css的性能优化,他提到了如下几点: CSS性能优化 1.把样式表置于顶部 现把样式表放到文档的< head />内部似乎会加快页面的下载速度.这是因为把样式表放到< head />内会使页面有步骤的加载显示. 注重性能的前端服务器往往希望页面有秩序地加载.同时,我们也希望浏览器把已经接收到内容尽可能显示出来.这对于拥有较多内容的页面和网速较慢的用户来说特

CSS的性能优化

---恢复内容开始--- 作者:徐尤熙链接:https://www.zhihu.com/question/19886806/answer/80432295 [CSS代码重构与优化之路] 写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多,如果没有及时对CSS代码进行维护,CSS代码不断会越来越多.CSS代码交错复杂,像一张庞大的蜘蛛网分布在网站的各个位置,你不知道修改这行代码会有什么影响,所以如果有修改或增加新功能时,开发人员往往不敢去删除旧的冗余代码,而保险地增加

CSS一些性能优化方法

1.尽量使用缩写 使用缩写语句,如下面所示的 margin 声明,可以从根本上减小 CSS 文件的大小.在 google 上搜索 CSS Shorthand 可以找到许多其他的速记形式. p { margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px; } p { margin: 1px 2px 3px 4px; } 2.查找并删除未使用的 CSS 删除不必要的部分 CSS,j显然会加快网页的加载速度.谷歌

CSS性能优化

CSS的性能也会影响页面的请求数加载速度及渲染效率,总结CSS的性能优化主要有以下几方面: 一.CSS的文件大小压缩,主要对字节数进行压缩,CSS文件带大小会增加网络额外开销,尤其是访问量比较大的页面.主要方法有以下: 1.减少CSS文件中空格等不必要的多余字符,语法上尽可能多的应用缩略写法(如 margin 10px;). 2.有点浏览器支持解压gzip格式的压缩文件,可设置服务器将相应文件压缩成gzip包. 二.对CSS进行结构上的抽离,拆分,必要时可应用按需加载的方式加载CSS文件,尽可能

【转】网站前端性能优化之javascript和css

之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的.关于css的性能优化,他提到了如下几点: CSS性能优化 1.把样式表置于顶部 现把样式表放到文档的< head />内部似乎会加快页面的下载速度.这是因为把样式表放到< head />内会使页面有步骤的加载显示. 注重性能的前端服务器往往希望页面有秩序地加载.同时,我们也希望浏览器把已经接收到内容尽可能显示出来.这对于拥有较多内容的页面和网速较慢的用 户来说

CSS性能优化的技巧(一)

下面我们开始介绍实践型的4个优化技巧,先从首屏关键CSS开始.1. 内联首屏关键CSS(Critical CSS)性能优化中有一个重要的指标——首次有效绘制(First Meaningful Paint,简称FMP)即指页面的首要内容(primary content)出现在屏幕上的时间.这一指标影响用户看到页面前所需等待的时间,而**内联首屏关键CSS(即Critical CSS,可以称之为首屏关键CSS)**能减少这一时间.大家应该都习惯于通过link标签引用外部CSS文件.但需要知道的是,将

css写作建议和性能优化小结

1.前言 还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过js的写作建议和技巧,那么今天就来聊聊css吧!说到css,每一个网页都离不开css,但是对于css,很多开发者的想法就是,css只要能用来布局,把效果图排出来就可以了,其它的细节或者优化,不需要怎么考虑.但是我觉得css可不只是把页面的布局完成就是完事的,还需要考虑很多细节有优化,更不会像大家想得那么简单,在学习当中,如果发现什么技巧或者优化的点,我也会学以致用!那么今天,就分享下我总结的css写作建议和性能优化的一些问题

页面加载性能优化

页面加载性能优化 在互联网网站百花齐放的今天,网站响应速度是用户体验的第一要素,其重要性不言而喻,这里有几个关于响应时间的重要条件: 用户在浏览网页时,不会注意到少于0.1秒的延迟: 少于1秒的延迟不会中断用户的正常思维, 但是一些延迟会被用户注意到: 延迟时间少于10秒,用户会继续等待响应: 延迟时间超过10秒后,用户将会放弃并开始其他操作: 因此大家都开始注重性能优化,很多厂商都开始做一些性能优化.比较有名的是雅虎军规,不过随着浏览器和协议等的发展,有一些已经逐渐被淘汰了.因此建议大家以历史

CSS性能分析,如何优化CSS提高性能

css匹配原理 在优化css之前我们需要了解下css是怎么进行工作的,我们都知道css是由选择器,属性和属性值构成的. 我们可能会这样写上一行代码 //css .con .loulan1 p span{ display: block; } //html<div class="con">     <div class="loulan">         <p><span>文字</span></p>