CSS优化总结——网络性能和语法性能建议

评论：前台面试中最常见的问题是页面优化和缓存。这似乎是页面优化。被问了好几次，这不可能是很内疚的。平跑通常用一些，但突然问我，很难说出我所知道的。

在前端面试中最常见的问题是页面优化和缓存（这似乎是页面优化）。被问了好几次，这不可能是很内疚的。平跑通常在平时使用其中的一些，但突然问我，很难说出我所知道的，页面优化显然不是一两句话的结尾。在这两天，我们总结了CSS优化的相关知识，写博客整理一下，希望大家能给我们更多的建议。
CSS的优化主要从两个方面进行
网络性能：把CSS写到最少的字节数，加快下载速度，自然使页面渲染更快。
语法表现：可以达到同样的效果，但并非所有的方法都是一样的。我们已经在Javaｓｃｒｉｐｔ中看到了很多关于语法优化的知识。事实上，也有一些CSS。
CSS压缩
CSS压缩不是一个高端的手势，但是它非常有用。它的原理很简单。它是删除CSS中的空白字符，从而达到减少字符数量的目的。
我们有这样一个CSS脚本
。测试{背景颜色：# ffffff；背景图像：URL（下a.webp）；}
压缩后，它会像这样
。测试{背景颜色：# FFF；背景图像：URL（下a.webp）}
当然，一些先进的压缩工具将帮助我们优化一些语法，提供了很大的选择空间，让更多的压缩控制我们，在公司不使用CSS压缩，所以我没有什么经验，自己写的东西，常用的是YUI压缩器，网上有很多版本，非常方便
压缩工具
CSS压缩机
CSS驱动
干净的CSS
你想推荐什么好的资源
Gzip压缩
Gzip是一种流行的文件压缩算法，它被广泛的应用，尤其是在Linux平台上，这比gzip压缩的CSS，当应用到一个文本文件，效果非常明显，对文件的大小可以减少70%以上（取决于文件的内容）。为了进一步了解维基百科的gzip看。
在gzip压缩的情况下，Web服务器直接将HTML页面脚本，CSS，JS脚本发送到浏览器，并支持gzip的Web服务器将压缩文件，然后发送到浏览器，浏览器（gzip）提取和解码在本地显示原始文件。在这方式，减少数量的字节传输，以及网络性能优化的目标是可以实现的自然。gzip压缩需要服务器的支持，所以我们需要将其配置在服务器端
gzip压缩（压缩）上启用IIS
Apache启用gzip压缩方法
Nginx Gzip压缩配置
当然，除了gzip压缩，缓存也需要注意，这不是CSS优化相关的，在网站优化的情况
写CSS
除了压缩，我们还可以通过编写更少的CSS属性来减少CSS字节，以最常见的例子为例。
。测试{背景颜色：# 000；背景图像：URL（形象图片）；背景位置：左上；背景重复：不重复；}。
我们可以重写上面的CSS以达到同样的效果。
。测试{背景：# 000网址（形象图片）左上没有重复；}
CSS中有许多相似的属性可以一起编写。
字体
{ font-style:斜；font-weight: bold；字体大小：16px；字体：黑体，Arial，sans-serif；}，{ {字体：字体：字体大小：，，}，}。
边距/填充
{保证金：5px；右边距：10px；margin-bottom: 20px；margin-left: 15px；} {保证金：5px 10px 20px；}
{垫上：5px；填充右：10px；座垫：5px；填充左：10px；} {填充：5px 10px }，10px }，5px，T，T，}，}。
背景
{背景颜色：# 000；背景图像：URL（形象图片）；背景位置：左上；背景重复：不重复；}，{ {背景：背景：背景：，重复，}，}
边境
{边框宽度：2px；边框样式：固体；边框颜色：# 000；} {边界：2px固体# 000；} {边界上，固体；E，E，T，T；}；
此外，CSS3增添了许多特性，如变换、相关写动画，不一一列举，你需要注意你使用的时间
使用继承
CSS的继承机制也可以帮助我们在一定程度上减少字节数，我们知道CSS有许多可以继承财产或听写属性设置在父容器，容器也会使用这些子的默认属性，所以如果我们想要的字体大小为14px，不需要每个容器的设置，只有在身体上可以设置。使用这种技术，可以在父容器可以拯救我们的CSS的字节方式情况下提到的CSS属性，顺便说一下，哪些属性是可以继承的
所有元素都可以继承：可见性和游标。
内联元素可以继承：letter-spacing、字间距、空格、线高度，颜色，字体，字体，字体大小，字体样式，字体变形，字体大小，字体变形，字体大小等。
块元素可以继承：文本缩进和文本对齐。
列表元素可以继承：列表样式、列表样式类型、列表样式位置、列表样式图像。
可以继承表元素：边界崩溃
不可继承的：显示、边缘、边界、填充、背景、高度、最小高度、最大高度、宽度，最小宽度，最大宽度，溢出，位置，左，右，上，下，Z指数，浮动，清晰，表格布局，垂直对齐，分页符后，页面包之前和Unicode比迪烟
可在CSS中继承和不能继承的属性
退出，分割CSS，不加载所有CSS
提取CSS是把一些普通CSS放在一个文件中，而不是写每一页。一旦下载，其他页面就可以使用缓存来减少不必要的重复下载。
对拉远原理的应用，当我们把网页的许多常见的CSS写入一个文件，所以你可以使用缓存加载时间，但它并不适合所有的场景，以前我写CSS插件的CSS一些前面都写了一页，但有时只有一个页面的对话框，只有一个树，但超过10的插件下载CSS页面，这是一个问题，所以虽然CSS写入一个文件可以减少HTTP请求，但这样不该做的事情，所有的页面将使用我们能做到这一点，所以当我们抽离，分可要想好了。
图片拼合
这实际上不是CSS优化。应该说，web优化使用了CSS技巧。顺便说一下，如果你有兴趣，你可以看到CSS Sprites可以减少HTTP请求。
网络性能可以暂时考虑，希望您能帮助我们纠正和补充，看看一些语法性能优化。
CSS是置于头减少重画和回流
我相信所有做网站的学生都知道这个建议，但是为什么你把CSS放在网页的顶部以进行网页优化呢浏览器渲染页面的大概是这样的，当从顶边下载HTML DOM树的底部的浏览器根据默认的浏览器和现有的CSS渲染树生成页面，当面临新的CSS下载并结合现有的CSS重新渲染树，徒劳只渲染工作，如果我们把所有的CSS在网页的顶部，所以没有重新绘制。学生在浏览器的工作原理，有兴趣的可以看看神
浏览器的工作原理：新的Web浏览器被曝光在幕后，我相信它将对浏览器的工作原理有深刻的理解。
同样，我们知道，这也应该是在脚本中注意减少重绘和回流，而且会导致这两种情况
回流：当DOM元素被隐藏/显示、大小变化和位置改变时，浏览器将在渲染工作被浪费之前重新呈现页面。
油漆：当背景颜色的元素，边框的颜色不会导致回流的改变，这会让浏览器重新渲染元素。这似乎是可以接受的，但如果我们把它定义在开始的时候，最好不要让浏览器重复工作。
没有CSS表达式
不管CSS是如何生成的，我们最终会在页面上放置静态的普通文本。神马没有变量和计算。CSS表达式是一种动态设置CSS属性。它是由ie5-ie8。
体{背景颜色：表达（（新的日期（）），GetHours（）% 2# b8d4ff # f08a00 ）；}
所以我们给CSS与Javaｓｃｒｉｐｔ函数，CSS表达式是非常强大的，你甚至可以使用CSS表达式来实现最小宽度属性，交错的颜色的变化，模拟：悬停、前、后：：伪类，看起来可以解决浏览器兼容性的问题在很多IE，但是副作用超出了我们的想象，CSS规则不仅运行一次，以确保有效性、CSS表达式是经常评估窗口大小改变时，页面滚动甚至移动鼠标将触发计算表达式，如严重影响浏览器性能的频繁的评估。根据高性能网站工程试验，执行的数量远远超出我们的想象。对它感兴趣的学生可以进去看看。我们的建议尽量避免甚至使用CSS表达式。
无乱用CSS重置或属性设置
在网站建设中，我们经常使用一些CSS重置来实现跨浏览器统一的目标，但很多时候，我们的CSS重置过于臃肿。主要有两个问题。
很多浏览器都预留了元素的默认属性，如div的填充和0的边距，这是不必要的。
一些非常不寻常的元素的设置也写在CSS重置，如红宝石。
前几天，我写了关于CSS重置博客默认的属性值和普通标签互动--。——关于CSS重置的思维，和一些个人的知识，我希望你可以批评他们。
避免通配符通配符或隐
CSS中的*代表一个通配符，虽然它很好用，但它也是一个恶魔，比如
正文{填充：0；边距：0；}
我们认为这是一个身体的子节点集的一些性质，但由于CSS的继承特性的网页的所有元素将在演出接受复杂页面规则是伟大的，这并不是说你不能使用通配符，但说的时候要注意范围。我相信这条规则是众所周知的，但有一些隐性的通配符，需要我们注意的，例如。
可见{填充：0；}
这几乎就像一个通配符，当你使用它时你必须注意范围的限制。
避免分级或过度限制CSS
学生对网络发展估计在MDN编写高效的CSS或它的各种译本，本文总结了写CSS选择器的几点意见，理解本文提出的一个前提是要知道CSS是从右到左的分析，而不是我们认为从左到右，为什么这是肯定的由于高效、对学生未知的可以上网搜一下相关知识。
不要使用标签或类来限制ID规则。
这应该是常识，但许多学生会滥用，写# test.info或div #测试这样一个选择，这只能说是多余的，我只能有一个最快的定位元素
不要使用标签名称来限制类规则。
这估计是更多的误用，如div.info方法，我们可以直接写信息，从右到左知道为什么低分辨率，如果类实现目的的直接使用，在正常情况下应该是类的设计问题，CSS需要重建。
试图用最具体的分类规则，避免后代选择器，属于标签类别不包含subselector
这三条规则被弄清楚了，因为左右关系得到了解决。在CSS选择器中，后代不会帮助我们加快CSS查找。相反，后代选择器是CSS选择器中最贵的。它的消费是非常昂贵的mdash；特别是当选择器标签或泛型类，笔者给出的建议是当使用子选择器小心，避免避免成本是可见的。
我们可以通过研究特定类别；mdash；使用单一或最小类解决方案。
最后
这些是优化CSS以优化通常使用和理解的页面的手段。