索鸟网

  1. 首页
  2. CSS前端基础应用实践~

CSS前端基础应用实践~


css的大小针对于网站的加载性能有一定的作用;
要想网站页面打开能够提升可在css中以下几个方面进行优化;

一、Css - 层级嵌套

层级过度的嵌套会影响解析同事也会导致css文件大小增加,理想的嵌套层级基本上三层就可以实现,当然特殊情况特殊处理。(例

图片描述

二、Css - 背景图处理

【雪碧图】背景图过多会导致在加载css时候请求多次服务器。尤其是在两张图在切换的中间会出现空白的一瞬间,所以建议把小图合并成一张图,通过背景定位来获取当前图,在切换时候不会出现空白瞬间,其他地方用到的图片也已加载无需再次请求;

【iconfont】纯色的图标也可以制作成字体图标;
优势是可以修改大小而不失真,修改颜色也比较方便,同时也方便后期管理;缺点为制作字体图标文件比较大,首次加载相对比较慢。

【base64】转码的图适用于较小、色彩较少的图片,转码可以直接缓存,也解决了每次请求服务器的次数,转码后的大小和图片本身大小相差无几,个别图片可能会比图片还要大上很多,所以根据项目酌情使用;

图片描述

三、Css - 舍去法

舍去零,文件中有小数时,即可直接舍去小数点前的‘0’;
舍去单位,文件中属性值为‘零’时,即可舍去跟随的单位‘%、px、em、rem’等;

图片描述

四、Css - 模块开发

每一个网站都会有自己的一套规范,可以根据规范提取全站公用的模块,模块+重置文件整理为一个css文件引入。(例:header、footer、button等
优点:方便管理以及后期维护,增加复用率,提高加载速度;
缺点:公用文件较大,首次加载相对较慢;

五、Css - @import

线上css文件最好不要使用@import去引用其他的css文件,可在开发时候去引用模块样式,最后上线前打包合并所有代码并进行压缩处理。

图片描述

六、Css - 继承 | 合并法

文件的优化还可以用继承方式来进行控制,去减少样式的重复定义有效的减少css文件的大小。

图片描述

以上为个人工作中总结-maty

相关标签: Html/CSS CSS3

来源地址:http://www.imooc.com/article/20401 版权归作者所有!

相关教程

  • 前端之CSS基础学习

    请带着以下几个问题进行学习 CSS是什么 CSS的引用方式 CSS选择器 CSS优先级 CSS盒模型 基础知识学习和实例演练教程 CSS基础学习教程(css快速入门)CSS参考手册(便于了解更多css属性)CSS3教程(适用于移动端开发的css新特性) 入门学习,一定要快,没有必要花大量时间死扣每个细小知识点,但是要把最重要的概念理解清楚。上面五个问
  • CSS Modules实践

    文章同步于Github Pines-Cheng/blog 随着前端这几年的风生水起,CSS作为前端的三剑客之一,各种技术方案也是层出不穷。从CSS prepocessor(SASS、LESS、Stylus)到后来的后起之秀 PostCSS,再到 CSS Modules、Styled-Component 等。有人维护了一份完整的 CSS in JS 技术方
  • css基础

    引入 <head> <link rel="stylesheet" href="base.css"> <style> body{ margin: 0; } </style> </head> 浏览器私有属性 chro
  • 前端每周清单第 28 期:JS 运行原理与优化,高性能 CSS 引擎,Coursera GraphQL 实践

    前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID:frontshow),及时获取前端每周清单。 新闻热点 国内国外,前端最新动态 Ayo.js: Node.js 内部的又一次分裂:Node.js 正逐步成为主流的
  • CSS基础笔记

    一、CSS常见基础 ①-选择器: 1、子选择器:这行代码会使class名为food下的子元素li 加入红色实线边框。用于选择指定标签元素的第一代子元素 .food>li{border:1px solid red;} 2、包含(后代)选择器:即加入空格,用于选择指定标签元素下的后辈元素. 与子选择器的区别在于:>作用于元素的第一代后代,空格作用于元素的所有后代
  • css基础什锦

    字体的样式 font-size:20px font-family:"" color:red; font-style:italic;斜体 text-decoration:underline;下划线 line-through;删除线 段落排版 tex
  • CSS样式基础

    CSS样式 标签(空格分隔): css 定义 CSS:全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。 语法 ![此处输入图片的描述][1] 选择符:称选择器,页中要应用样式规则的元素。 声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当
  • 前端每周清单第 19 期: Vue的优势与劣势;Node.js有望超越Java;JS在嵌入式及物联网的应用现状

    前端每周清单第 19 期: Vue的优势与劣势;Node.js有望超越Java;JS在嵌入式及物联网的应用现状为InfoQ中文站特供稿件,首发地址为这里;如需转载,请与InfoQ中文站联系。从属于笔者的 Web 前端入门与工程实践的前端每周清单系列系列;部分文章需要自备梯子。 前端每周清单第 19 期: Vue的优势与劣势;Node.js有望超越Jav