1.前言每个网页都离不开css，但是很多人认为css主要是用来完成页面布局的，比如一些细节或者优化，就不用想了。其实，这种想法是不对的。没错，css作为页面渲染和内容展示的重要组成部分，影响着用户对整个网站的第一体验。因此，在整个产品研发过程中，css性能优化也需要贯穿始终2.实现方式实现方式有多种，主要有以下几种：首屏内嵌关键CSS异步加载CSS资源压缩合理使用选择器以减少昂贵属性的使用不要使用@import内联首屏键CSS来打开页面。页面主要内容出现在屏幕上的时间影响用户体验，内联css键码可以让浏览器在下载html后立即渲染。如果是外部引用css代码，在解析html结构的过程中遇到外部css文件时，会下载css代码然后渲染。因此CSS的内联使用使得渲染时间提前。注意：但是大的css代码不适合内联（初始拥塞窗口，无缓存），而其余代码使用外部引用异步加载CSS，在CSS文件请求、下载、解析完成之前，CSS会阻塞渲染，并且浏览器不会呈现任何处理过的内容。链接代码后，后续外部引用css不需要阻塞浏览器渲染。这时候可以采用异步加载的方案，主要如下：使用javascript在head标签末尾插入link标签//创建link标签constmyCSS=document.createElement("link");myCSS.rel="样式表"；我的CSS。href="mystyles.css";//插入到header的最后位置document.head.insertBefore(myCSS,document.head.childNodes[document.head.childNodes.length-1].nextSibling);设置link标签的media属性为noexis，浏览器会认为当前样式表不适用于当前类型，会在不阻塞页面渲染的情况下下载。加载完成后，设置media的值为screen或all，让浏览器开始解析CSS使用rel属性将链接元素标记为备用可选样式表，也可以由浏览器异步加载。另外不要忘记在加载完成后将rel设置回stylesheet资源压缩使用了webpack、gulp/等模块grunt,rollup是一个压缩css代码的工具，可以让文件变小，大大减少浏览器的加载时间。合理使用selectorcss匹配规则是从右到左开始匹配，例如#markdown.contenth3匹配规则如下：先找到h3标签元素然后去掉祖先不是.content的元素最后去掉其祖先不是#markdown的元素。如果页面嵌套层次多，元素多，匹配的时间成本自然就高，所以我们在写选择器的时候，使用的时候可以遵循以下规则：不要嵌套太多复杂的选择器，它是最好不要使用三层以上的id选择器，不需要嵌套通配符和属性选择器效率最低，避免使用和减少使用昂贵的属性重绘页面时，昂贵的属性如box-shadow/border-radius/filter/transparency/:nth-child等会降低浏览器的渲染性能。不要使用@importcss样式文件。导入方式有两种，一种是link元素，另一种是@import@import会影响浏览器的并行下载，造成页面加载时额外的延迟，增加额外的往返时间和多次@imports可能会导致下载顺序紊乱，比如一个css文件index.css包含如下内容：@importurl("reset.css")那么浏览器必须先下载、解析并执行index.css，然后再下载、解析并执行第二个文件reset.css其他减少重排操作，减少不必要的重绘知道哪些属性可以继承，避免为这些属性重复写cssSprite，合成所有图标图片，使用width和height加background-position的背景图片显示我们想要的图标图像减少了http请求并将小图标图像转换为base64编码的CSS3动画或过渡。尽量用transform和opacity来实现动画，不要用left和top属性3.从选择器嵌套、属性特性、减少http三个方面总结css的性能。同时注意css代码的加载顺序
