实验三 前端性能优化-CSS优化

仓库地址：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文件所存在的不同。