21.阶段测 Ⅴ-灵析社区

1. Webpack 处理 SASS 文件时，sass-loader的作用是？

• 将 SASS / SCSS 文件编译成 CSS

• 调用node-sass，支持options选项向node-sass传参

2. 压缩 CSS ，简单可分为哪3个步骤？

① 去除 CSS 中的换行和空格

② 去除每个选择器，最后一个属性值后的分号;

③ 去除注释，正则/*[^*] [^/][^*]**+)*/

3. 去除无用的 CSS 有哪4种方法？

Chrome 开发者工具 Lighthouse；UnCSS；PurgeCSS；cssnano。

4. CSS 模块化的方式有哪几种？

5. 自动压缩图片有哪几种方法？

• 使用 PhotoShop 自动批处理功能

• 使用开源图片处理软件 XnViewr，工具，批量转换功能

• 使用命令行工具，包括 NConvert ImageMagic 等以及类似 img2webp 的专门格式的转换工具

• 工程化配置图片压缩

• 图片模块

• 图片目录

• 使用反向代理

6. 工程化及ES6等模块化环境中，我们可以通过什么只引入需要的css，通过什么去除未被使用的CSS？

import或require；PurgeCSS和cssnano。

7. 什么是稳定模块？

已经进入到候选推荐、建议推荐和推荐的模块被称为稳定模块。

8. 什么是 CSS3 新特性？

新特性通常指稳定模块中新增的标准。

9. CSS3 命名空间模块中增加了哪个新特性？

新增 @规则：@namespace。

10. cursor: hand在标准浏览器无效时怎么办？

IE 也支持的标准属性值cursor:pointer替代。

11. CSS3 新特性兼容性问题如何解决？

• 人工或使用混入器添加私有前缀

○ 工作量大，开发阶段冗余代码多

○ 同一属性，有无私有前缀，后面接收的属性值类型、顺序等可能不同

○ 部分私有前缀，需要加到属性值，而不是属性名上

• PostCSS 的 autoprefixer 可以配置 Browserslist，按需对浏览器及其不同版本添加私有前缀

12. 想要让 APP 用户获得体验更一致，减少兼容性问题应该怎么做？

• 将渲染引擎与源码一起打包，比如使用腾讯基于 X5 内核的浏览服务，安装包会变大

• 采用 React Native Flutter UniApp + Weex 等使用 HTML + CSS + JS 开发，原生渲染的方案

13. 当你忘记一个 CSS 属性时，一般有哪四种方法？

Emmet；查看说明；搜索；记忆。

14. 为什么要规定 CSS 属性的书写顺序？

① 有助于提升代码的可读性，可维护性，利于团队协作

② 有效避免重复或遗漏声明属性

③ 避免实验中的私有属性与已加入规范的属性在具体实现的冲突