怎么优化css

优化的基本原则

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

  • 按需加载(只加载你需要的)
  • 并行(让串行的事情并行起来)
  • 压缩(通过压缩减少体积)
  • 缓存(利用缓存,减少请求等待)
  • 预测(预测用户行为,提前发出请求)
  • 合并(把多个零散文件合并起来,减少请求)
  • 自动化(让速度优化变成一种常规,和自动化工具(例如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具体的优化策略,http://cssshrink.com/velocity
  • cssshrink:GitHub地址,https://github.com/stoyan/cssshrink

css优化之合并

  • 使用gulp-concat将多个css合并在一起
  • 不要使用@import 减少阻塞和请求

css拆分

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

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

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

css使用率

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

  1. unu

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

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

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

2. uncss

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

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

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

3. critical

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

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

3.3 缺点:不支持url,只支持本地html,不支持style标签

时间: 2024-08-09 10:42:59

怎么优化css的相关文章

CSS性能分析,如何优化CSS提高性能

css匹配原理 在优化css之前我们需要了解下css是怎么进行工作的,我们都知道css是由选择器,属性和属性值构成的. 我们可能会这样写上一行代码 //css .con .loulan1 p span{ display: block; } //html<div class="con">     <div class="loulan">         <p><span>文字</span></p>

DIV CSS优化 CSS压缩技巧教程

DIV CSS优化 DIVCSS5为大家介绍简单的CSS优化.涉及优化内容:CSS代码优化.CSS重用优化.缩短字符.删除换行等处优化 目录 CSS样式单词简写优化 标点符号优化 删除换行 CSS重用优化 CSS代码优化简写总结 一.CSS样式属性单词代码简写优化 - TOP 1.border(CSS边框)简写: 1).4个边边框宽度为1px,颜色为#000 border-color:#000; border-style:solid; border-width:1px 可以简写为:体感音乐放松椅

整理及优化CSS代码的7个原则

作为网页设计师(前端工程师),你可能还记得曾经的那个网页大小建议:一个网页(包括HTML.CSS.Javacript.Flash和图片)尽量不要超过30KB的大小,随着互联网的日益庞大,网络带宽也在飞速发展,很多设计师已经不再考虑这条30KB的理想准则.随着越来越受欢迎的CSS布局和Javascript对网站用户体验的强化,使得这种现象越来越普遍,尤其是对于大型网站来说,仅仅一个CSS文件就已经超过了30KB的上限. 但是即便如此,现在也有很多准则来帮助你在完成CSS布局后进行CSS代码的压缩和

Webpack 4 学习08(压缩优化css)

压缩css,去除注释 安装插件 npm install --save-dev optimize-css-assets-webpack-plugin 配置webpack.config.js 头部引入插件 const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin") ` 参数 意义 assetNameRegExp 正则表达式,用于匹配需要优化或者压缩的资源名.默认值是/.css$/g cssPro

WEB前端优化CSS,JS,图片

做网站优化的运维都知道,为了提高网站的访问速度,一般会开启Apache/Nginx gzip功能,将文件压缩,但是这个压缩与我要说的压缩不在一个层面.网上也提供一些在线css.js文件压缩功能.今天介绍一款linux工具来实现这个功能安装JAVA YUI Compressor由java开发,所有我们必须先有java环境.一般系统都会自带java,如果没带,那么 yum安装一个openjava # yum install java 确认是否安装成功 [[email protected] vhost

前端性能优化 CSS动画

最近拜读了一下html5rocks上几位大神写的一篇关于CSS3动画性能优化的文章,学到了很多,在这里记录一下,其中的知识都是来源于这俩篇文章,我只是截取了其中比较关注的内容出来,原文地址High Performance Animations及Accelerated Rendering in Chrome 原理 现代浏览器在使用CSS3动画时,以下四种情形绘制的效率较高,分别是: * 改变位置 * 改变大小 * 旋转 * 改变透明度 层?重绘?回流和重布局?图层重组? 首先要了解CSS的图层的概

前端性能优化 css和js的加载与执行

一个网站在浏览器端是如何进行渲染的? html本身首先会被渲染成 DOM 树,实际上 html 是最先通过网址请求过来的,请求过来之后,html 本身会由一个字节流转化成一个字符流,浏览器端拿的就是字符流,然后通过词法分析之后,将相应的语法分析成相应的 token ,比如说 header token, 转化不同的 token tag ,然后通过 token 类型 append 到 dom 树. 遇到 link token tag,然后去请求 css ,请求过来之后再去对 css 进行解析,生成

优化CSS样式

学习要点: 页面排版优化 表格优化设计 表单优化设计 外观风格 按钮 图片 一.页面排版优化 1) 标题和字体风格 <p class="lead">强调突出</p> 2)文本强调风格 强调类文本 <p>默认</p> <p class="muted">提示 浅灰色</p> <p class="text-warning">警告 黄色</p> <p c

css,html性能优化

css性能优化 CSS是负责布局和渲染的重要角色,漂亮的页面当然能够吸引用户.本文是自己在开发过程中总结的关于CSS与性能的关系,可能有不对之处,希望能够指出. ? 1.所有的样式尽量放在css文件中,HTML标签中不要写style属性,因为浏览器在所有的样式加载完成之后,才会开始渲染整个页面,写在标签属性必会加长浏览器的渲染时间 2.删除默认样式代码 因为会影响浏览器的执行时间.如:align="left",默认就是左对齐 3.减少使用相对定位 因为这会影响浏览器的repain和re