HTML与CSS进阶-基本性能优化

OliverStack
193 阅读3分钟

总结自: Learn to Code Advanced HTML & CSS 系列原文

网站优化的 20/80 二八原则: 20%优化( optimization )提高80%的网站效率

一 构建策略

网站构建策略是指网站的组织形式, 样式和内容如何高效地结合以达到性能要求, 并提出一些常见策略的规范

网站样式基础架构

  • 基于内容分离的组织形式

    • base style 👉 common (公共)
    • interface 👉 user (用户)
    • logic 👉 business (业务)

  • 特性: 复用性 模块化

  • 细分: (此外的.css文件不是特指单个文件, 而是组织的表示*)

    • Base 👉 全局可用的通用样式
      • normalize.css
      • layout.css
      • typography.css
    • Components 👉 面向特定的用户接口, 某一功能组件
      • alert.css
      • button.css
      • list.css
      • ...
    • Modules 👉 页面的业务逻辑
      • aside.css
      • footer.css
      • header.css

两种CSS实施策略

  • Object Oriented CSS-面向对象css
    • 分离"皮肤"和结构
      • 抽象出布局结构
      • 分离出主题元素
      • 可无冲突地继承和展示
    • 分离内容和容器
      • 父子组件无依赖关系
      • 可继承样式
      • 可扩展样式

example

<style>
	.alert{...}
	.alert-error{...}
	...
</style>

<div class="alert alert-error">
</div>

  • Scalable & Modular CSS 可扩展&模块化css

    • 五个核心目录
      • Base →包括核心element的样式, 涵盖默认的设置
      • Layout →为不同element设置元素大小和网格布局样式
      • Module →针对页面各个部分更具体的样式, 如navbar\banner等
      • State →为有其他状态的元素, 增强或者覆盖额外的样式
      • Theme →基于模块的不同外观样式

    选择何种策略取决于你的网站, 通常结合两者进行按需构建网站的css架构会有更好的效果

example

<style>
.alert {...}
.alert.is-error {...}
/*
.class01.class02 匹配同时拥有class01/class02的元素
.class01 .class02 匹配class01的子元素中包含class02的元素
*/
</style>

<div class="alert is-error"></div>

此处的is-error( state)就是描述alert( module )的一种状态

二 性能驱动的选择器

选择器滥用会影响

  • 网页渲染速度
  • 网站体系架构的实用性和模块化程度

简洁的选择器

简短的选择器可以

  • 减低特异性 → 提高继承性和可移植性
  • 提高效率 →过长的选择器会强制浏览器从右到左执行每个独立选择器类型, 太过具体增加负担
类选择器更好地识别具体元素, 而无需一个一个识别父级元素, 位置改变时不会丢失样式
/* Bad */
header nav ul li a {...}

/* Good */
.primary-link {...}

裁剪子类中同级的选择器以应对元素位置变化时的样式稳定
/* Bad */
button strong span {...}
button strong span .callout {...}

/* Good */
button span {...}
button .callout {...}

Class优先

浏览器从右到左地渲染选择器, 指定具体的类更好地帮助浏览器渲染

  • key selector 是指浏览器首先渲染的第一个选择器, 良好语义化keyseletor
  • 避免使用id选择器, 太过具体, 且不能复用( 类比!import )
/* Bad */
#container header nav {...}

/* Good */
.primary-nav {...}

/* Bad */
article.feat-post {...}

/* Good */
.feat-post {...}

三 压缩文件

通用压缩

  • gzip 一种流行的压缩文件类型
  • .htaccess是apache web服务器的文件压缩指定文件, 当然许多服务器都会有压缩功能
  • 可以在developer-tools>network中查看文件的size选项, 大部分可以被压缩到60%

图片压缩

  • 无损压缩可以保证图片不失真, 放心使用
  • tools: PNGGuantlet for windows
  • website: tinyping

四 减少HTTP请求

  • 合并文件 多个css文件 → style.css 多个js文件 → main.js
  • style位于之内 → 与网页同时加载 main.js位于之前 →逐个加载, 提倡异步加载
  • sprite图
    • 多张图片合并为一张背景图
    • 使用background-position属性来进行裁剪
  • base64 data URI
    • 不用进行http请求
    • 会增加缓存, 但利大于弊
    • 注意比较两者大大小区别

五 缓存公用文件

  • 在web server 里设置cache-control的缓存周期
avatar
文章
阅读
粉丝