一：内联首屏关键CSS

1：能够使浏览器下载完html后就立刻渲染，把渲染时间提:前

2：外部css，在解析html时遇到，才开始下载进行渲染

3：较大的css不适合内联，会拥堵

二：异步加载css

1：css会阻塞渲染，不会渲染任何已处理的内容

2：使用js将link插到head标签最后面

  const myCSS = document.createElement( "link" );
	  myCSS.rel = "stylesheet";
	  myCSS.href = "mystyles.css";
	  // 插入到header的最后位置
	  document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling )

3：设置link标签media属性为noexis,会认为当前样式表不适用当前类型，不阻塞页面渲染的情况下再进行下载。加载完成后，将media的值设为screen或all，重新开始解析CSS

<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'">

4：将link元素标记为alternate可选样式表，实现浏览器异步加载。加载完成之后，将rel设回stylesheet

<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">

三：资源压缩，利用模块化工具，进行压缩，变小文件，降低加载时间

四：合理使用选择器

1：不要嵌套过多复制选择器

2：使用id则没必要嵌套

3：通配符和属性选择器效率低，避免使用

五：减少昂贵的属性，避免重绘，提升渲染性能

六：不使用@import

1：会影响浏览器并行下载，导致增加额外的延迟，

2：多个引入导致下载顺序混乱

3：会阻塞后面的解析和执行

七：其他

1：减少重排，避免重绘

2：合成icon图片，采用字体图标或者精灵图，减少http请求

3：将小图片转换为base64编码

4：动画尽量使用transform和opacity，不要使用left、top属性