CSS前端优化中的几个关键问题
当涉及到网站的高性能，很多人认为页面的加载时间，但事实上，绩效不仅仅是加载时间，也包括浏览器性能，网络性能和开发效率。性能是很重要的一点是在网络front-end.this第发展考虑将介绍一些发展的原则和性能指标，这是提高Web前端性能的基础上。1。发展原则
1.1编写符合当代浏览器性能的代码
如果你想提高前端性能，你必须了解浏览器的工作原理，即使它是一个总的概念，从而知道性能瓶颈，如何优化它。下图显示的处理页面的WebKit浏览器的代码（HTML + CSS）来用户。
为什么浏览器第一次下载页面的HTML内容首先，HTML解析为DOM树，然后HTML包含了所有其他的资源文件（风格、脚本、图片），显示网页。然后DOM和CSS样式表（包括自定义浏览器的默认）结合形成渲染树。浏览器根据这个渲染树开始绘制屏幕。
提高浏览器性能，你可以开始减少元件数量和减少重绘在HTML中的两个方面。前者很好理解，不要滥用HTML标签，应使用最小的但必要的HTML语义布局。后者是提高性能更有效。后元完成，动态变化的DOM结构或CSS样式使浏览器重画，重画的性能损失直接取决于动态变化的范围，如在一个单元或新的元素位置的改变，会引起很多的重绘，因为它影响到所有的元素如兄弟；动态添加一个列表，而不是一个李说，因为每个额外的时间将导致T一个重绘，但所有的物品一起，然后加入。此外，一些降低重绘也指定IMG元素的宽度的指引，不表的布局，设置在头部标签的性质界定，等等。
在一般情况下，在深的DOM树中元素的变化，对其他节点的影响较小；如果你想DOM倍，尽量合并成一个完成的，各种风格，如修改DOM元素，不重复的各种element.style下一个任务，但会改变各种在一个CSS类的写作风格，类的DOM元素。
1.2用CSS布局和处理边界
浏览器渲染页面实际上是绘制一系列的盒和盒都可以嵌套。当你使用CSS布局，你应该注意语义，包套盒中的元素，而不是把一些元素的框。如图所示下面，我们需要使用CSS来实现这个简单的两列布局。最好建立一个填充左右栏找到左栏图标左：0，让我们有一个盒子包含所有内容。这是一个错误的设定的保证金左左和右栏，栏图标绝对定位到左：- 50px，这种方法图标在盒子的外面，但也定义了一个负面的坐标，这不仅符合语义（放在盒子的外面包含的元素），协调代码的消极意义上的，这样的布局有可能在旧的浏览器的问题。
模块化和可重用性，还应考虑在写作风格的CSS。如果你写的代码是独立的内容，它是可重用的。另外从CSS类也经常可以看到，我的经验是尽可能与风格的元素，而不是功能元素的名称，例如一个邮件按钮添加样式的CSS类。按钮确认好than.btn-send-mail，前者可以确认任何按钮操作（当然this.btn-send-mail类可以用来做JS事件绑定，只要不绑定任何风格）。
1.3逐步增强
渐进增强是一种基本的设计是兼容所有浏览器的第一，然后提高进步浏览器的风格或功能。例如，设置渐变背景颜色时，你可以先定义背景色属性（降解的方式），然后设置其他线性梯度属性，这样可以确保浏览器也可以显示背景颜色时，浏览器不支持CSS3。
这是强烈建议不要去判断一个函数的方式判断浏览器类型或版本号的支持，但通过特征检测，特征检测，第三方库Modernizr是推荐。
2。性能标准
前端开发人员不仅为用户提供最佳的界面体验，而且关心页面的加载时间。2010年4月，谷歌将页面加载速度放入搜索的排名因子中。大量的研究数据表明，用户流量和加载速度是正相关的，因此优化页面加载速度是非常重要的。
2.1：减少HTTP请求的HTTP请求的数量是一个前端的性能方面效果最为明显。许多现代浏览器支持4个并行连接，了解浏览器的并联机构，分配资源文件到不同的域名，并使用浏览器并发提高装载效率。它是加载一个小一些大的文件比大量的小文件，所以网站应该合并CSS和JS文件尽可能。此外，图片向导的使用（CSS雪碧，俗称精灵地图）的小图片许多图标到一个大的图片，可以减少很多HTTP请求的图片。
2.2使用CDN加速：如果您有能力，在CDN中放置静态资源文件，如图片、字体、js库等，可以大大提高访问速度。
2.3避免空src和href属性值：空荡荡的SRC img元素是由js动态分配，导致浏览器启动一个无用的HTTP请求。同样，点击一个标签的空链接也会导致浏览器发起HTTP请求，通常重新加载当前页面，这也是为什么很多初学者不能找出错误。
2.4，增加到期日期：静态资源文件应添加到到期日。过期日期必须设置得很遥远。基本上，可以认为它永远不会过期，因此浏览器将缓存静态文件。但是为了避免用户更新最新的文件，最好将版本控制添加到文件名中。
2.5启用gzip压缩：服务器开启gzip压缩可以减少平均约70%的文本文件传输流量。
2.6把CSS javaｓｃｒｉｐｔ放在后部：浏览器将分析HTML渲染元素的同时，把CSS前确保第一要素渲染部分是正确的，并把CSS在后面会造成很多浏览器脚本标签应该被重新粉刷。在尾部，因为浏览器将预处理的JS文件，把JS文件的头会延迟页面元素的渲染，让用户觉得网页慢下来。
2.7避免使用CSS表达式：CSS表达式只在IE5，IE6，IE7支持CSS表达式，不仅远远超过正常的方式，但也严重地影响了页面的渲染效率mdash；mdash；只要一个滚动页面，甚至当你移动鼠标时，表达计算，这是没有必要的。
2.8，删除不使用的CSS语句。有可能在实际工程中common.css让每一页被引用，说明这些公共风格。我们应该尽量最大限度地利用这个公共文件。
Javaｓｃｒｉｐｔ和CSS的2.9代码压缩：压缩代码可以显著节省带宽和提高加载速度，在部署到代码时最好使用工具来压缩代码。