仓库地址:bj-front: 前端性能与工程化 - Gitee.com
利用简写CSS属性和CSS浅选择器,贯彻DRY原则,来完成对页面的CSS的优化过程,通过避免不良实践, 以及使用高性能的CSS选择器、flexbox布局引擎和CSS过渡,提高CSS性能。
创建文件夹three,该章节实验放置到three中
(1)在three中创建文件夹css optimized,将start文件夹中文件复制到该目录下,首先使用npm init完成项目的初始化过程,然后进行依赖的安装,需要安装postcss-cli 模块与postcss-merge-longhand模块,编写 postcss 的配置文件 postcss.config.js
module.exports = {
plugins: [
require('postcss-merge-longhand')()
]
}
npx postcss styles.css -o styles.short.css执行以上指令,完成后查看文件大小变化,以及文件代码变化。
(2)在three中创建文件夹cssserver,在cssserver手工修改几个选择器为浅选择器运行修改后的网站,npx http-server optimized块完成对optimized目录下页面的访问过程,对比优化前后加载速度。
(3)在three中创建文件夹cssflexbox,自定义页面布局,分别使用盒子模型以及传统布局方式,以及使用flexbox的布局,对比其性能上的差异。
(4)避免使用@import来引入样式,当一个页面被加载的时候,link引用的CSS会同时被加载,按顺序加载。而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。
(5)使用uncss模块,去除掉css文件中无用的css代码,创建文件夹unused,将start文件夹下的文件内容拷贝到unused文件夹下,npm install uncss 模块,使用http-server启动对当前文件夹下页面的访问,执行指令
npx uncss http://localhost:8080 > out.css,对比生成的css文件和原css文件所存在的不同。