--- # 主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate # 贡献主题：https://github.com/xitu/juejin-markdown-themes theme: juejin highlight: --- 总结自: [Learn to Code Advanced HTML & CSS 系列原文](https://www.notion.so/HTML-CSS-Advanced-70fb03286484464eb438126cc365209e#3872b1b125774073b1b4516e11556689) *网站优化的 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 ```html

``` - Scalable & Modular CSS 可扩展&模块化css - 五个核心目录 - Base →包括核心element的样式, 涵盖默认的设置 - Layout →为不同element设置元素大小和网格布局样式 - Module →针对页面各个部分更具体的样式, 如navbar\banner等 - State →为有其他状态的元素, 增强或者覆盖额外的样式 - Theme →基于模块的不同外观样式选择何种策略取决于你的网站, 通常结合两者进行按需构建网站的css架构会有更好的效果 example ```html

``` 此处的is-error( state)就是描述alert( module )的一种状态 ## 二性能驱动的选择器选择器滥用会影响 - 网页渲染速度 - 网站体系架构的实用性和模块化程度 ### 简洁的选择器简短的选择器可以 - 减低特异性 → 提高继承性和可移植性 - 提高效率 →过长的选择器会强制浏览器**从右到左**执行每个独立选择器类型, 太过具体增加负担 ```css 类选择器更好地识别具体元素, 而无需一个一个识别父级元素, 位置改变时不会丢失样式 /* 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 ) ```css /* 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的缓存周期