优化你的css

null1145 发布于2019-08-28 18:06 / 1626人阅读

摘要：优化之压缩我们一般都会对进行常规压缩，主要做去空格和换行的工作。具体的优化策略，点此查看地址优化之合并使用将多个合并在一起不要使用减少阻塞和请求拆分看起来和上面有些冲突，这也是和其它部分优化不同的地方。

转自优化你的css 感觉很有用，收藏一下

系列概述

在移动web兴起的年代，速度优化重新被大家重视起来，因为手机的网络环境和性能比PC端差了很多，估计大家也能感觉到用手机打开网页的时候，能明显感觉到页面蜗牛般的速度。

这个系列的优化会以移动环境为基础，当然绝大多数规则也同样适合PC端。

优化的基本原则

速度优化有一些基本思路，提前总结一下

按需加载(只加载你需要的)

并行(让串行的事情并行起来)

压缩(通过压缩减少体积)

缓存(利用缓存，减少请求等待)

预测(预测用户行为，提前发出请求)

合并(把多个零散文件合并起来，减少请求)

自动化(让速度优化变成一种常规，和自动化工具(例如gulp,grunt,fis)结合，减少成本)

进入正题，优化你的css

为什么第一篇讲css，因为css是最难优化的，图片和js你都可以延迟加载，而css不可以，你必须在dom前面加载css，你必须接受css阻塞dom渲染的现实。

css优化之压缩(cssshrink)

我们一般都会对css进行常规压缩，主要做去空格和换行的工作。这里推荐的cssshrink会做更精细的工作，cssshrink会首先通过css parser对css进行解析，然后有针对性的进行优化。例如会吧0px和0%转换成0，bold转换成700，字符级别的极致压缩，为作者点个赞。

cssshrink具体的优化策略，点此查看

cssshrink GitHub地址

css优化之合并

使用gulp-concat将多个css合并在一起

不要使用@import 减少阻塞和请求

css拆分

看起来和上面有些冲突，这也是css和其它部分优化不同的地方。一般我们大家都习惯把css放在最上面，js放在最下面。这是一个好习惯，但是对于css来说并不是最好的选择。

在移动端，大家非常重视首屏时间，也就是用户看到页面的时间。把整个页面的css都放在最上面，大量首屏用不到的css会阻塞首屏的展现。

head只放首屏能用到的css，首屏外的css下移

css使用率

一般页面经过多人维护后，会产生大量用不到css，大家也不敢随意删除，这就需要一些检测工具

unu

1.1 unu是一个用来检测页面哪些css没有用到的Node.js模块

1.2 优点：提供可视化界面,使用非常简单，输入url，即可查看页面css的使用情况

1.3 缺点：目前只支持style标签式的css，另外没有执行页面的js

uncss

2.1 uncss是可以把页面css没有用到去除的模块

2.2 优点：支持命令行和gulp、grunt插件，支持link方式，基于phantomjs，模拟浏览器执行，支持js执行

2.3 缺点：仅凭一个url导出的css，不具有实际价值，另外不支持style标签

critical

3.1 critical是一个用来检测首屏css有哪些没用到的模块

3.2优点：可以输入首屏宽高来检测、有gulp、grunt插件

3.3 缺点：不支持url，只支持本地html，不支持style标签

总结

速度优化对于开发人员来说是件降低生产力的事情，所以需要尽可能的自动化，设置好规则，无痛优化，同时避免后续恶化。

云服务器 GPU云服务器 css优化万你的扩展你的你的看法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111013.html

提高网站加载速度的一些小技巧

摘要：各种各样的编码错误可能会导致网站加载速度非常慢，从而用户离开的网站。同时提高网站加载速度也是提高网站排名的必要步骤之一。翻译：疯狂的技术宅原文：https://likegeeks.com/improve... 为你网站的用户留下良好的第一印象是非常必要的。随着商业领域的竞争，拥有一个吸引人的网站可以帮助你脱颖而出。研究表明，如果加载时间超过3秒，会有 40％的用户放弃访问你的网站...

baukh789 2019-08-23 16:12 评论0 收藏0
2017前端性能优化清单

摘要：性能最好具有可量化可监测以及可改动的特性。下文是一份年的前端性能优化清单，阐述了作为前端开发人员，为了确保反馈速度以及浏览器兼容性我们需要考虑的问题。地图设计的决定违背了性能理念，所以他在这份清单内的顺序有待考虑。 2017前端性能优化清单你开始使用渐进启动了么？是不是已经使用过React和Angular中tree-shaking和code-splitting两个工具？有没有用过Br...

verano 2019-08-20 13:45 评论0 收藏0
2017前端性能优化清单

摘要：性能最好具有可量化可监测以及可改动的特性。下文是一份年的前端性能优化清单，阐述了作为前端开发人员，为了确保反馈速度以及浏览器兼容性我们需要考虑的问题。地图设计的决定违背了性能理念，所以他在这份清单内的顺序有待考虑。 2017前端性能优化清单你开始使用渐进启动了么？是不是已经使用过React和Angular中tree-shaking和code-splitting两个工具？有没有用过Br...

kycool 2019-08-30 15:52 评论0 收藏0
2017前端性能优化清单

摘要：性能最好具有可量化可监测以及可改动的特性。下文是一份年的前端性能优化清单，阐述了作为前端开发人员，为了确保反馈速度以及浏览器兼容性我们需要考虑的问题。地图设计的决定违背了性能理念，所以他在这份清单内的顺序有待考虑。 2017前端性能优化清单你开始使用渐进启动了么？是不是已经使用过React和Angular中tree-shaking和code-splitting两个工具？有没有用过Br...

CollinPeng 2019-08-01 16:12 评论0 收藏0
页面加速优化

摘要：延迟加载当我们调用外部的时候，使用事件在页面内部被加载前，外部将不被加载脚本调用外部文件拷贝以上代码。代码代码片段组合外部工具列表页面加速优化页面请求工具工具大全扩展阅读方面的设置内联 CSS 优点使用内联 CSS 可以减少浏览器去服务端去下载 CSS 文件关键 CSS 内联到 HTML 文件中缺点 CSS 文件没法被缓存注意：该方法只适用于很小的 CSS...

Lin_YT 2019-08-28 18:10 评论0 收藏0