

首页  思维导图  详情



CSS性能优化的8个技巧

2018-08-02 14:15:43   0  举报





仅支持查看

AI智能生成

css性能优化技巧笔记

CSS

模版推荐

作者其他创作

大纲/内容

视觉体验优化

页面加载

数据请求

图片渲染 <br>

性能

网络相关

DNS预解析

缓存

强缓存

Expires

Cache-control:max-age

协商缓存

304

Etag变化

选择合适的缓存策略

Cache-control:no-store

不需要缓存

Cache-control:no-cache

表示该资源已被缓存，但是每次都会发送请求询问资源是否更新

Cache-control:max-age=30

单位秒

使用HTTP2.0

引入了多路复用，多个请求使用同一个TCP链接

支持Header压缩

二进制分帧

预加载

rel="preload"

预渲染

rel="prerender"

优化渲染过程

懒执行

懒加载

图片优化

其他文件优化

可以加上defer/async

CDN

如何渲染几万条数据并不卡住界面

应该一次渲染部分DOM

通过requestAnimationFrame来每16ms刷新一次

CSS性能优化的8个技巧

实践型

内联首屏关键CSS

确定首屏关键CSS

可以参考github上的一个项目Critical CSS

内联CSS缺点 

内敛之后的CSS不会进行缓存，每次都会重新下载

内敛后的文件大小，应控制14.6kb以内

异步加载CSS

方法

第一种方式是使用JavaScript动态创建样式表link元素，并插入到DOM中。

第二种方式是将link元素的media属性设置为用户浏览器不匹配的媒体类型（或媒体查询），如media="print"，甚至可以是完全不存在的类型media="noexist"。对浏览器来说，如果样式表不适用于当前媒体类型，其优先级会被放低，会在不阻塞页面渲染的情况下再进行下载。

别忘了在文件加载完成之后，将media的值设为screen或all，从而让浏览器开始解析CSS。

与第二种方式相似，我们还可以通过rel属性将link元素标记为alternate可选样式表，也能实现浏览器异步加载。同样别忘了加载完成之后，将rel改回去。

上述的三种方法都较为古老。现在，rel="preload"5这一Web标准指出了如何异步加载资源，包括CSS类资源。

注意，as是必须的。忽略as属性，或者错误的as属性会使preload等同于XHR请求，浏览器不知道加载的是什么内容，因此此类资源加载优先级会非常低。as的可选值可以参考上述标准文档。

那就是使用preload，比使用不匹配的media方法能够更早地开始加载CSS。所以尽管这一标准的支持度还不完善，仍建议优先使用该方法。

3. 文件压缩

4. 去除无用CSS

建议型

1. 有选择地使用选择器

CSS选择器的匹配是从右向左进行的

注意事项

保持简单，不要使用嵌套过多过于复杂的选择器。

通配符和属性选择器效率最低，需要匹配的元素最多，尽量避免使用。

不要使用类选择器和ID选择器修饰元素标签，如h3#markdown-content，这样多此一举，还会降低效率。

不要为了追求速度而放弃可读性与可维护性。

为什么CSS选择器是从右向左匹配的？

CSS中更多的选择器是不会匹配的，所以在考虑性能问题时，需要考虑的是如何在选择器不匹配时提升效率。从右向左匹配就是为了达成这一目的的，通过这一策略能够使得CSS选择器在不匹配的时候效率更高。这样想来，在匹配时多耗费一些性能也能够想的通了。

2. 减少使用昂贵的属性

，所有需要浏览器进行操作或计算的属性相对而言都需要花费更大的代价。当页面发生重绘时，它们会降低浏览器的渲染性能。所以在编写CSS时，我们应该尽量减少使用昂贵属性，如box-shadow/border-radius/filter/透明度/:nth-child等。

3. 优化重排与重绘

3.1 减少重排

我们应该避免频繁触发这些操作

改变font-size和font-family

改变元素的内外边距

通过JS改变CSS类

通过JS获取DOM元素的位置相关属性（如width/height/left等）

CSS伪类激活

滚动滚动条或者改变窗口大小

值得一提的是，某些CSS属性具有更好的重排性能。如使用Flex时，比使用inline-block和float时重排更快，所以在布局时可以优先考虑Flex

3.2 避免不必要的重绘

，重绘是无法避免的。不过，浏览器对此做了优化，它会将多次的重排、重绘操作合并为一次执行。不过我们仍需要避免不必要的重绘，如页面滚动时触发的hover事件，可以在滚动的时候禁用hover事件，这样页面在滚动时会更加流畅。

4. 不要使用@import

不建议使用@import主要有以下两点原因。

首先，使用@import引入CSS会影响浏览器的并行下载。使用@import引用的CSS文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作。这就导致浏览器无法并行下载所需的样式文件。

其次，多个@import会导致下载顺序紊乱。在IE中，@import会引发资源文件的下载顺序被打乱，即排列在@import后面的js文件先于@import下载，并且打乱甚至破坏@import自身的并行下载。

所以不要使用这一方法，使用link标签就行了。

react优化

shouldComponentUpdate(nextProps, nextState)

组件在每次更新状态时都会执行shouldComponentUpdate函数，为了减少额外渲染，可以在该函数内对当前的props/state与nextProps/nextState进行比较，如果有一致的props/state则返回fasle说明不用重新渲染该组件，以减少重新渲染造成的性能浪费。

React.PureComponent 替换 React.Component：

ImmutableJS：

自由主题

 Collect

Get Started

性能优化系列课

 Collect

Get Started

性能优化

 Collect

Get Started

CSS

 Collect

Get Started

Java程序性能优化





0 条评论

下一页