admin 如何在响应式设计中优化CSS提高前端性能
如今，手持移动设备正以绝后的速度开展，但与pc比拟在功用上还有一定的差距。阅读器可以完成的特性越来越多，相关于前端消耗，后端消耗只占整个流程的10%-20%，网页访问、用户交互、网页解析、渲染、规划绘制都会消耗内存。而在手持移动设备中，系统资源分配给阅读器的资源是有限的。这就要求在对网页停止照应式设计时，除了思索各设备分辨率的兼容效果，还必需思索到设备功用效果，从而提高用户体验感，提升网站全体功用。本文仅就如何应用css对前端功用的优化停止归结总结。
CSS是网页的表现层，新的规范规范CSS3的充沛应用可以使web运用愈加优美，但是运用不当则会加剧内存的损耗，从而有损于网页的出现。我们可以从以下几个方面去停止优化：
1、将CSS写在网页头部。CSS文件放到文档头部(及外部调用文件)会让网页加载更快，由于它们是可以被缓存的。援用外部样式也可以让页面逐渐加载。 假设把样式表放到文件外面或许文件尾部它会阻止页面元素的逐渐显示，并且还会招致页面内容以没有样式的方式显示出来，待完全加载样式后，页面重绘，影响用户体验。
2、尽量防止在HTML标签中写Style属性。CSS (Cascading Style Sheets) 通常存储在样式表中，运用外部样式表是为了处置内容与表现分别的效果，从而极大提高任务效率，增加代码冗余。
3、防止CSS表达式。CSS Expression (CSS 表达式)，是一种运用静态设置 CSS 属性的方式。其实 CSS 表达式十分弱小，我们可以运用 它完成 min-width 属性以及隔行换色，模拟伪类等等;在你改动窗口大小，滚动页面甚至移动鼠标都会触宣布达式停止求值，如此频繁的求值以致于阅读器的功用发生严重的影响。所以为了网页速度和阅读器担负，尽能够防止css表达式。
4、移除空的CSS规则。空的css规则指的是该规则不包括任何属性，如：.clear{}。空的CSS规则添加了CSS文件的大小，而且会影响CSS树的执行，所以需肃清空的CSS规则。
5、正确运用Display的属性。CSS display属性基本上有inline，block，和none三个属性值。inline将他所定义的元素显示为行元素。如strong，input，span默许元素为行元素。block元素是块级元素，会使前后元素发生换行效果。hn和p元素默许状况为块级元素。none，意思是不显示元素。
除了以上的Display基本属性，腾讯总结了以下的一些合理运用的规则。
a) display：inline后不应该再运用width、height、margin、padding以及float
b) display：inline-block后不应该再运用float
c) display：block后不应该再运用vertical-align
d) display：table-*后不应该再运用margin或许float
6、不滥用Float。Float浮动在实践运用种是十分普遍，但由于Float在渲染的时分计算量比拟大，对终端阅读器添加不用要的担负，所以在一些不应该运用float的中央尽量增加运用。如：无序链接替代无序列表。当可以运用a标签停止陈列时，就不要运用无序列表。A标签是行元素，他会自动的横向陈列。Li为块级元素，要想横向显示，必需配合float。也可以设定li标签display：inline，将块级变为行级到达页面所要的效果。这样会使代码更繁复。
7、不滥用Web字体。在Web编码中，CSS默许运用的Web字体是有限的，虽然在新版本的CSS3，我们可以经过新增的@font-face属性来引入特殊的阅读器加载字体，但阅读器遇到本机没有的字体时会停止网络下载，解析，重绘以后页面。所以少数状况下，思索各个要素的影响我们还是应该尽量充沛应用这些系统默许web平安字体完成CSS的编写。
8、不声明过多的Font-size。元素的font-size属性会自动承袭它父级元素的font-size属性值，除非你重新定义掩盖它。普通来说，大少数状况下运用em或许%，这样在照应式显示时字体就能被更精细比例的字号支持。自己建议运用百分比或em来定义font-size大小，在兼容阅读器时也会失掉很好的支持。所以尽量合理的定义字体大小，以便于在页面放缩的时分依然坚持良好的可读性，提高css效率。
9、值为0时不需求任何单位。0 是最好的兼容战略，0 以不变应万变。为了阅读器的兼容性和功用，值为0时不要带单位。
10、规范化各种阅读器前缀。阅读器前缀为-webkit(Chrome/Safari)，-moz(Firefox)，-ms(IE)，-o(Opera，如今该阅读器改用blink内核，曾经淘汰)。在CSS属性尚未完全成为W3C规范，我们会运用阅读器前缀。在运用时，应该先将一切私有的CSS3属性写在前面，最后再写规范的CSS3属性。运用css动画时，只运用-webkit和无前缀两种即可。我们等候一切css属性都成为规范，并且被Firefox、Chrome等一切阅读器的最新版兼容，那时就没有必要运用阅读器前缀了。
11、防止让选择符看起来像正则表达式。初级选择器，是区别于罕见选择器的概念，是CSS的初级运用，也是作为扩展。在运用的时分，留意有些选择器会优先于其他选择器，有时前面的选择器也会掩盖前面的样式。虽然运用初级选择器可以大幅度的提高开发书写或修正样式表时的任务效率。但在照应式规划时，思索到更多终端的功用应尽能够的防止看起来比拟复杂的初级选择器，由于初级选择器执行耗时长且不易读懂，防止运用。
在我们停止照应式设计时，由于要顺应不同终端，需求加载的css文件比拟大，流量本钱也比拟高，终端反响速度较慢，客户端加载时间过长。所以停止前端功用优化有相当的必要。本文仅从优化css的方面提了一些拙见，在前端功用优化方面还有很长的路要走，作为前端设计工程师我们只要不时的去挖崛研讨，才干赶上科技行进的步伐。
