惠娴小屋惠娴小屋-努力地做设计菜单跳至内容首页交互设计前端开发视觉设计用户体验原创手绘摄影前端优化-CSS篇（二）发表回复1.4 如何优化样式代码优化样式代码可以提高样式表的加载速度、减少浏览器的渲染时间，下面是几种优化样式代码的方法：1.4.1 合并相同样式属性合并原则：多数相同的代码合并，特殊代码单独书写。在写样式表时应尽量注意合并相同的样式。这种写法的好处是，通过减少样式内容以减少CSS文件大小，提高加载速度。这里提供一个在线的样式合并工具：http://www.cleancss.com/1.4.2 使用简写高效的CSS写法中的一条就是使用简写。通过简写可以让你的CSS文件更小，更易读。以下是常用的样式属性简写属性简写边距padding: 上边距 右边距 下边距 左边距margin: 上边距 右边距 下边距 左边距边框Border: 上边框 右边框 下边框 左边框颜色在颜色值用16进制的时候，如果每种颜色的值相同，可以写成一个背景Background: 颜色 图片链接 图片重复 水平位置 垂直位置 移动方式列表List-style: 标记 位置 图片文字Font: 风格 大小/行高 字体1.4.3 合并图片以减少http请求将图片文件合并，在切片时把大小、形式相近的图片文件合并为一个图片，在定义样式的时候通过改变背景方位来调用，从而减少http请求。1.4.4 更优的样式属性值CSS中有些属性采用不同的属性值，虽然达到的效果差不多，性能上却存在着差异。可优化的样式属性值属性普通写法优化写法优化原因borderBorder: 0pxBorder: none属性值设置为none，浏览器将不作渲染，不会占用内存。内外边距Margin:0px;Padding:0px 5px 10px 0pxMargin:0;Padding:0 5px 10px 0当内外边距为0的时候，不需要写上单位。隐藏visibility: hiddendisplay: noneDisplay属性设置none，浏览器不作渲染，visibility属性设置hidden，浏览器仍作渲染，元素仍占用页面空间。所以当页面元素隐藏后不需要显示，用display属性；当页面元素隐藏后会再显示，可用visibility属性加上position:absolute;  top:-999em来进行显示隐藏切换；当元素隐藏后仍占用页面位置，也用visibility属性。1.4.5 尽量少用层级引用样式从1.3.2的实验可以知道，使用层级引用样式，会让浏览器渲染速度变慢，占用大量内存，所以尽量少用层级引用样式。如果元素在页面中是唯一的，使用ID来引用样式；如果元素在页面中的样式是可重用的，使用Class来引用样式。1.4.6 使用工具压缩样式表压缩样式代码可以最大程度减少样式表的大小，压缩代码最好在样式文件已写好，并不再作更改的时候进行。压缩样式代码，只是把多余的空格去掉，压缩后的样式表仍然可读。这里推荐一个在线工具，可以压缩和解压缩CSS代码。http://tool.chinaz.com/Tools/CssFormat.aspx——Hilder独家出品，转载请标明出处，不然黑你家网站。本条目发布于2014年2月21日。属于未分类分类。作者是hilder。前端优化-CSS篇（一）发表回复用户在浏览网站的过程中，网页内容的显示速度和页面脚本的运行质量直接影响用户对该网站的印象，提高前端性能，可以极大地减少网站对客户端资源占用，提高网站运行速度。通过对CSS属性的研究，找出样式属性对页面显示速度的影响。并通过脚本文本对CSS的不同调用方式的研究，找出最优的调用方法。测试方法：编写实验Demo，运用工具进行测试，所使用的工具有httpwatch、dynaTrace AJAX Edition。对于CSS部分，使用httpwatch测试其CSS文件加载时间，使用dynaTrace AJAX Edition测试脚本调用时浏览器渲染时间。对于JS部分，使用dynaTrace AJAX Edition测试其运用样式文件时，CPU占用时间。使用httpwatch测试进行延迟加载和预加载时的页面加载时间。1.1 浏览器对样式的渲染CSS的作用是让页面元素以设定的样式在浏览器中展现出来，在对CSS属性作分类之前，先了解一下浏览器的渲染过程：图1.1.1-1渲染引擎的基本工作流程从图1.1.1-1可看到，浏览器渲染引擎的工作流程分4步（解析HTML构建DOM树，渲染树构建，布局树，绘制树），通过设置CSS可以实现页面元素布局和绘制。1.2 CSS属性渲染速度通过对浏览器渲染流程的了解，将CSS属性分为两大类：影响元素布局的属性、和影响元素外观的属性。浏览器对布局属性所用的的渲染时间，远远要少于对样式属性所用的渲染时间。1.3样式引用1.3.1 样式引用的渲染速度元素样式引用的优先级：ID样式 > Class样式 > 标签样式用id来引用样式，页面渲染速度是最快的，其次是用class引用，而用标签来引用样式页面渲染速度是最慢的。虽然用ID引用样式，页面渲染速度最快，但是每个页面只能有一个ID，定义过多的ID样式会使样式表变得臃肿。所以不建议大批量使用。 而标签引用样式的方式，渲染速度太慢。所以通常使用Class来引用样式，既可重用，渲染速度又不会太慢。1.3.2 层级引用样式的渲染速度在规划一个大型网站时，会用到Web元素的层级关系，按照从大区域到小区域的次序来书写CSS。因为样式引用越具体，优先级就会越高。图1.3.2－2层级样式渲染顺序如图1.3.2-2所示，使用层级关系引用样式时，样式的读取顺序是从里到外的，即先读取P标签、再读取div标签。层级样式的写法，会在浏览器渲染时读取到多余的元素，会占用多余的资源，拖慢了渲染速度。——Hilder独家出品，转载请标明出处，不然黑你家网站。本条目发布于2014年2月20日。属于前端开发分类，被贴了 前端性能 标签。作者是hilder。网站链接规范2条回复从可用性的角度来看，链接打开新窗口是一件体验不好的事情。实践证明，并不是所有的链接都必须在当前窗口打开的。以下总结了链接在何种情况下使用当前窗口打开，在何种情况下使用新窗口打开。网站在新窗口打开的原则：链接指向本域名之外的网站；用户需要比对内容；返回原页面后展示发生改变；操作过程中提供帮助的链接；打断正在进行的进程的链接；目标页面需要加载很大张图片，或需要加载大量的数据。网站在当前窗口打开的原则：返回原页面后展示不变；线性的任务，需要用户按照步骤进行的操作。——Hilder独家出品，转载请标明出处，不然黑你家网站。本条目发布于2014年2月20日。属于交互设计分类，被贴了 可用性 标签。作者是hilder。网站建设要遵守34个实用性原则发表回复在这个世界上，除了艺术以外，实用是衡量一个东西的首要标准。网站也是一样的，实用不实用是第一个标准。要让顾客方便使用，能够解决问题。那么我们应该在网站建设中哪些方面加强实用性呢？第一、Cookie, Javascript, CS如果您希望您的企业网站能在绝大多数环境下被无障碍的访问，请谨慎使用Cookie, Javascr