CSS 优化主要是四个方面:
  1. 加载性能
    比如不要用 @import 等等,@import会影响css文件的加载速度,考虑加载性能时,主要是从减少文件体积、减少阻塞加载、提高并发方面入手,任何 hint 都逃不出这几个大方向。
  2. 选择器性能
    selector 对整体性能的影响现如今其实可以忽略不计了,selector 的考察更多是规范化和可维护性、健壮性方面,很少有人在实际工作当中会把选择器性能作为重点关注对象的,但知道总比不知道好,(合理选用选择器,没必要用id选择器的情况下,尽量少用)。
  3. 渲染性能
    渲染性能是 CSS 优化最重要的关注对象。页面渲染 junky 过多?看看是不是大量使用了 text-shadow?是不是开了字体抗锯齿?CSS 动画怎么实现的?(对于一些复杂,看似炫酷,却毫无意义的动画特效,可考虑砍掉不写),合理利用 GPU 加速了吗(合理使用cache进行渲染)。
  4. 可维护性
    命名合理吗?结构层次设计是否足够健壮?(一般嵌套不要超过5层),对样式进行复用了吗?优雅的 CSS 不仅仅会影响后期的维护成本,也会对加载性能等方面产生影响。

css优化,提高性能的更多相关文章

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

    不负十年后的自己,共勉! 前端性能优化一直是一个比较热门的话题,我们总是在尽我们最大的努力去,提高我们的页面性能,比如减少HTTP请求,利用工具对资源进行合并压缩,脚本置底,避免重复请求,css sp ...

  2. 如何提高CSS性能?CSS优化、提高性能提升总汇

    如何提高CSS性能,根据页面的加载性能和CSS代码性能,主要表现为: 加载性能 (主要是从减少文件体积,减少阻塞加载,提高并发方面入手),选择器性能,渲染性能,可维护性.   1.尽量将样式写在单独的 ...

  3. 优化css,增加性能

    转载自:https://www.cnblogs.com/xiaoloulan/p/5801663.html 前端性能优化一直是一个比较热门的话题,我们总是在尽我们最大的努力去,提高我们的页面性能,比如 ...

  4. ASP.NET MVC之如何看待内置配置来提高性能优化(四)

    前言 前几篇我们比较基础的讲了下MVC中的知识,这一节我们穿插点知识,讲讲MVC中我们可以提高性能的办法. Razor视图引擎优化(优化一) 我们知道默认情况下配置MVC去解析一个视图会首先约定通过查 ...

  5. 常用CSS优化总结——网络性能与语法性能建议

    在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时多少会用到一些,但突然问我,很难把自己知道的都说出来.页面优化明显不是一两句能够说完的,这两天总结了一下 ...

  6. (转)常用CSS优化总结——网络性能与语法性能建议

    原文地址:http://www.cnblogs.com/dolphinX/p/3508657.html 在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时 ...

  7. SQL Server 性能优化之——系统化方法提高性能

    SQL Server 性能优化之——系统化方法提高性能 阅读导航 1. 概述 2. 规范逻辑数据库设计 3. 使用高效索引设计 4. 使用高效的查询设计 5. 使用技术分析低性能 6. 总结 1. 概 ...

  8. 在ASP.NET Core中用HttpClient(四)——提高性能和优化内存

    到目前为止,我们一直在使用字符串创建请求体,并读取响应的内容.但是我们可以通过使用流提高性能和优化内存.因此,在本文中,我们将学习如何在请求和响应中使用HttpClient流. 什么是流 流是以文件. ...

  9. 前端性能优化jQuery性能优化

    一.使用合适的选择器 $("#id"); 1.使用id来定位DOM元素无疑是最佳提高性能的方式,因为jQuery底层将直接调用本地方法document.getElementById ...

随机推荐

  1. XGBoost,GBDT原理详解,与lightgbm比较

    xgb原理: https://www.jianshu.com/p/7467e616f227 https://blog.csdn.net/a819825294/article/details/51206 ...

  2. 【算法python实现】 -- 最大子序和

    原题:https://leetcode-cn.com/problems/maximum-subarray/ 问题描述: 输入:[-2, 1, -3, 4, -1, 2, 1, -5, 4], 输出:6 ...

  3. 《Python黑帽子:黑客与渗透测试编程之道》 自动化攻击取证

    工具安装: 下载源码:https://code.google.com/archive/p/volatility/downloads 工具配置: 获取内存镜像:https://www.downloadc ...

  4. [Element-UI] 使用Element-UI的DateTimePicker组件报错:Cannot read property 'getHours' of undefined

    使用Element-UI组件的DateTimePicker,如下: <template> <div class="block"> <span clas ...

  5. 如何使用gradle打jar包

    1.进入工程目录,输入./gradlew,如显示"... build success" 则表示当前目录下gradle可用:如当前目录下无gradle,则在线下载 .. 2.输入./ ...

  6. vector源码(参考STL源码--侯捷):空间分配导致迭代器失效

    vector源码1(参考STL源码--侯捷) vector源码2(参考STL源码--侯捷) vector源码(参考STL源码--侯捷)-----空间分配导致迭代器失效 vector源码3(参考STL源 ...

  7. bower 和 npm 的区别

    前端技术和工程实践真的是突飞猛进啊,想当年,我这个半业余前端吭哧吭哧做页面的时候,哪有这么多东西可以用啊,现在先进到我都完全看不懂了.本文主要讲一下同是包管理器的bower和npm的差别. 主要也是在 ...

  8. puppeteer(headless chrome)实现网站登录

    puppeteer简介 puppeteer是Chrome团队开发的一个node库,可以通过api来控制浏览器的行为,比如点击,跳转,刷新,在控制台执行js脚本等等.有了这个神器,写个爬虫,自动签到,网 ...

  9. [Python 从入门到放弃] 5. 文件与异常(一)

    1.文件操作: 文件操作包含读/写 从文件中读取数据 向文件写入数据 Python中内置了open()方法用于文件操作 (更多关于open()BIF介绍 阅读此篇) 基本模板: 1.获取文件对象 2. ...

  10. Ubuntu下安装qq方法及疑难问题解决

    在Ubuntu下安装qq有两种方法:.tar.gz包安装和.deb包安装下载地址:http://im.qq.com/qq/linux/download.shtml 方法一:.tar.gz包安装法 .t ...