网站性能性能调优总结

最新推荐文章于 2020-11-26 18:04:26 发布

cmm113

最新推荐文章于 2020-11-26 18:04:26 发布

阅读量837

点赞数

分类专栏： css HTMl

本文链接：https://blog.csdn.net/cmm113/article/details/48003981

版权

HTMl 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

网站的性能优化：

CSS放在head中，减少repaint和reflow，使用link在页面导入Style 样式，避免用import引用样式；import是在html加载完才引入样式，会影响页面加载速度；两性能分析介绍：http://www.stevesouders.com/blog/2009/04/09/dont-use-import/ http://www.qianduan.net/high-performance-web-site-do-not-use-import/
CSS 缩写(color,上下左右合并等)
CSS 的声明（页面上的 class 在全局范围内来讲是唯一的，用唯一的 Class 名称来定位一个节点往往比组合定位更加快捷。样式与元素的分离，两者独立维护)；CSS 选择器（id选择器效率最高，其他子选择器，匹配都会减慢速度）（不要直接用元素和太泛的选择器）；
css的style样式单词简写优化（不要用太长的名称）；
标点符号优化（删除空格，删除换行，去掉选择器最后的一个分号？？）
css重用优化（共用代码块）
注意利用css的继承机制，指的是子类会引用父类的样式；
抽离，拆分css,不在一个页面加载所有的css文件
使用雅虎YUI压缩js和css;（js压缩网站：http://javascriptcompressor.com/）
使用缓存机制缓存图片、css和javascript,并合并css中引用的图片，合并js文件。（目的是减少http请求）；
尽量将javascript放在页脚，避免放在页头header,影响速度；
对图片进行压缩；最好用png8;，尽量使用gif格式图片；首页不要用太大的FLASH文件和视频文件；
避免使用网页重定向；
不要用css表达式express:(CSS规则并不是只运行一次，为了确保有效性，CSS表达式会进行频繁的求值，当改变窗口大小，滚动页面甚至移动鼠标都会触发表达式进行求值，如此频繁的求值以至于浏览器的性能收到严重的影响。)
避免适用通配符或隐式通配符
避免适用通配符或隐式通配符(*)
在最下方单独做一个Table或者div来放置计数器。这样，在计数器不能访问的时候，你的网站速度也不会受到丝毫影响。不要用
服务器开启gzip模块（tomcat）

gzip压缩是非常流行的一种数据压缩格式，一般网站启用gzip后，压缩率都会有70%-80%的提升，效果是立竿见影的。

部分虚拟主机默认有gzip功能，但大部分没有，独立主机、VPS一般可以设置，开启gzip会加重服务器负担，而且要修改服务器配置，强烈建议大家开启gzip，如果不清楚可以问问所在空间商，让他们帮忙开启。
除去空白，注释，和无用的标签；

影响网站打开速度的9大因素：

1.网络带宽小；

2.DNS解析时间；（免费给DNS加速的：goole的 page speed service （Server side modules、Apache、Nginx、IIS、Apache Traffic Server、OpenLiteSpeed……）和国内DNSPOD）

3.终端的配置低；（电脑，手机，平板等）

4.软件多少、稳定和软件的正确配置，都会影响到服务器环境，以致影响到网络速度。服务器安装软件防火墙，会牺牲一些网络速度，所以VPS、或独立服务器用户装一个防火墙足矣。

5.网页内容的大小；（优化代码，避免冗余）

6.大量的数据库操作；

7.用很多的javascript;

8.页面上用大图片和FLASH；

9.过多引用了其他网站的内容；（访问不存在的内容，会影响速度）；

测试网站访问速度的5个方法：

1.用ping命令简单测网站速度的方法；ping + 网址站长之家的ping工具也不错，网址：http://ping.chinaz.com/

2.用tracert命令简单测网站速度的方法；跟ping类似；

3. 全方位的免费网站速度测试工具 — GTmetrix (gtmetrix.com)

4.比较哪个网站载入速度较快 — WhichLoadsFaster免费公开测试网速工具。（网址：http://whichloadsfaster.com/）

5.：国内免费的网站速度测试平台 — WebKaka（网址：http://www.webkaka.com）

浏览器工作原理：

浏览器渲染页面大概是这样的，当浏览器从上到下一边下载html生成DOM tree一边根据浏览器默认及现有CSS生成render tree来渲染页面，当遇到新的CSS的时候下载并结合现

有CSS重新生成render tree，刚才的渲染工作就白费了，如果我们把所有CSS都放到页面顶部，这样就没有重新渲染的过程了。类似的我们知道了这个也应该在脚本中注意尽量减少repaint和reflow，什么情况会导致这两种情况呢

reflow：当DOM元素出现隐藏／显示、尺寸变化、位置变化的时候都会让浏览器重新渲染页面，之前渲染工作白费

repaint：当元素的背景颜色、边框颜色不引起reflow的变化是会让浏览器重新渲染该元素。貌似还可以接受，但如果我们在开始就定义好了，不让浏览器重复工作就更好了。

把 Stylesheets 放在 HTML 页面头部：

对于 @import 和 <link> 两种加载外部 CSS 文件的方式：@import 就相当于是把 <link> 标签放在页面的底部，所以从优化性能的角度看，应该尽量避免使用 @import 命令

避免使用 CSS Expressions：

CSS Expression 案例

 Background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" )

Expression 只有 IE 支持，而且他的执行比大多数人想象的要频繁的多。不仅页面渲染和改变大小 (resize) 时会执行，页面滚动 (scroll) 时也会执行，甚至连鼠标在页面上滑动时都会执行。在 expression 里面加上一个计数器就会知道，expression 的执行上相当频繁的。鼠标的滚动很容易就会使 expression 的执行次数超过 10000。

避免使用 Filter：

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

针对这种情况，最好的解决办法就是使用 PNG8。

CSS 缩写：

CSS 缩写，用极少的代码定义一系列样式属性，优化、合并、简写、极大程度的缩减代码量，减少css文件的占用字节，加快网页下载速度和网页加载打开速度，以达到提高性能的目的。

Color 缩写的方式，一般参照两个重复的进行一次缩写

 list-style-type: square; 
 list-style-position: inside; 
 List-style-image: url(image.gif)  ----->> list-style: square inside url(image.gif)

Font-style: italic; 
 Font-variant: small-caps; 
 Font-weight: bold; 
 Font-size: 1em; 
 Line-height: 140%; 
 Font-family: sans-serif;  ----->>  font: italic small-caps bold 1em 140% sans-serief

 #000000     ------>>     #000 
 #336699     ------>>     #369

1、CSS 文本：font-size:12px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; line-height:22px;即可简写缩写为font:12px/22px bold Arial, Helvetica, sans-serif;

2、 CSS 背景：background-color:#F00;background-image:url(图片地址);background-position:bottom;background-repeat:no-repeat; 即可将背景CSS属性缩写为： background :#F00 url(图片地址) no-repeat left bottom;

3、css内边距padding、css外边距margin、css 边框border等,避免上下左右分开写，以减少css代码。

4、字体粗细，font-weight:bold(改成font-weight:700;)font-weight:normal(改成font-weight:400;)。

5、使用DW正则表达式批量替换实例 http://oa.yubooa.com/html/4588.html

参考了以下文档：

http://www.ibm.com/developerworks/cn/web/1109_zhouxiang_optcss/

http://www.divcss5.com/rumen/r115.shtml

http://www.cnblogs.com/dolphinX/p/3508657.html

http://www.cnblogs.com/dolphinX/p/3348460.html

http://www.php100.com/html/webkaifa/DIV_CSS/2011/0922/9069.html

谈谈Css性能：http://www.w3.org/2015/Talks/0109-CSSConf-xq/

网站性能分析工具： YSlow介绍：http://lusongsong.com/reed/362.html

测试网站性能的网站：https://gtmetrix.com/

测试网站性能的网站：https://loadimpact.com/

测试网站性能的网站：http://stevesouders.com/hpws/expression-counter.php

javaScript 压缩网站：http://javascriptcompressor.com/

css代码格式化:http://www.xland.com.cn/css/geshihuacss.htm

站长之家的CSS/JS压缩工具：http://tool.chinaz.com/Tools/CssFormat.aspx（一般建议用雅虎的YUI压缩分析工具）

YUI Compressor 在线压缩 JavaScript/CSS http://ganquan.info/yui/?hl=zh-CN

CSS Compressor： http://csscompressor.com/ http://www.cssdrive.com/index.php/main/csscompressor

Clean CSS：http://www.cleancss.com/?lang=en （包括很多压缩Sql等）

在IIS上启用Gzip压缩(HTTP压缩) : http://www.cnblogs.com/zhangziqiu/archive/2009/05/17/gzip.html

apache启用gzip压缩方法:http://www.cnblogs.com/linzhenjie/archive/2013/03/05/2943635.html

Nginx Gzip 压缩配置:http://www.cnblogs.com/zfying/archive/2012/07/07/2580876.html

css sprites : http://www.cnblogs.com/dolphinX/p/3348460.html

浏览器的工作原理：新式网络浏览器幕后揭秘:http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/

http://kb.cnblogs.com/page/129756/

关于CSS reset的思考:http://www.cnblogs.com/dolphinX/p/3509515.html

回流与重绘：CSS性能让JavaScript变慢？:http://www.php100.com/html/webkaifa/DIV_CSS/2011/0922/9069.html

前端面试内容：http://developer.51cto.com/art/201507/486486.htm

cmm113

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网站性能性能调优总结

CSS 的性能优化：Style 标签的相关调优特殊的 CSS 样式使用方式CSS 缩写(color,上下左右合并等)CSS 的声明（页面上的 class 在全局范围内来讲应该是唯一的，用唯一的 Class 名称来定位一个节点往往比组合定位更加快捷。样式与元素的分离，两者独立维护）CSS 选择器（id选择器效率最高，其他子选择器，匹配都会减慢速度）（child,不用太泛的
复制链接

扫一扫