[前端面试套餐css+js+vue]第十三天

css优化提高性能的方法有哪些？

作为页面渲染和内容展现的重要环节，css影响着用户对整个网站的第一体验
因此，在整个产品研发过程中，css性能优化同样需要贯穿全程

---

• 内联首屏关键css
  在打开一个页面，页面首要内容出现在屏幕的时间影响着用户的体验，而通过内联css关键代码能够使浏览器在下载完html后就能立刻渲染

而如果外部引用css代码，在解析html结构过程中遇到外部css文件，才会开始下载css代码，再渲染

所以，CSS内联使用使渲染时间提前

注意：但是较大的css代码并不合适内联（初始拥塞窗口、没有缓存），而其余代码则采取外部引用方式

---

• 异步加载css
  在CSS文件请求、下载、解析完成之前，CSS会阻塞渲染，浏览器将不会渲染任何已处理的内容

前面加载内联代码后，后面的外部引用css则没必要阻塞浏览器渲染。这时候就可以采取异步加载的方案，主要有如下：
- 使用javascript将link标签插到head标签最后

// 创建link标签
const myCSS = document.createElement( "link" );
myCSS.rel = "stylesheet";
myCSS.href = "mystyles.css";
// 插入到header的最后位置
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );

---

- 设置link标签media属性为noexis，浏览器会认为当前样式表不适用当前类型，会在不阻塞页面渲染的情况下再进行下载。加载完成后，将`media`的值设为`screen`或`all`，从而让浏览器开始解析CSS

<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'">

---

- 通过rel属性将link元素标记为alternate可选样式表，也能实现浏览器异步加载。同样别忘了加载完成之后，将rel设回stylesheet

<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">

---

• 资源压缩
  利用webpack、gulp/grunt、rollup等模块化工具，将css代码进行压缩，使文件变小，大大降低了浏览器的加载时间

---

• 合理使用选择器
  我们在编写选择器的时候，可以遵循以下规则：

• 不要嵌套使用过多复杂选择器，最好不要三层以上

• 使用id选择器就没必要再进行嵌套

• 通配符和属性选择器效率最低，避免使用

---

• 减少使用昂贵的属性
  在页面发生重绘的时候，昂贵属性如box-shadow/border-radius/filter/透明度/:nth-child等，会降低浏览器的渲染性能

---

• 不要使用@import
  css样式文件有两种引入方式，一种是link元素，另一种是@import

其他

• 减少重排操作，以及减少不必要的重绘
• 了解哪些属性可以继承而来，避免对这些属性重复编写
• cssSprite，合成所有icon图片，用宽高加上backgroud-position的背景图方式显现出我们要的icon图，减少了http请求
  把小的icon图片转成base64编码
• CSS3动画或者过渡尽量使用transform和opacity来实现动画，不要使用left和top属性

js：说说正则表达式和它的应用场景？

正则表达式是一种用来匹配字符串的强有力的武器

匹配规则

• 常见校验规则
  |规则|描述 |
  |–|--|
  | \ | 转义 |
  | ^ | 匹配输入的开始 |
  | $ | 匹配输入的结束 |
  | * | 匹配前一个表达式 0 次或多次 |
  | + | 匹配前面一个表达式 1 次或者多次。等价于 {1,} |
  | ? | 匹配前面一个表达式 0 次或者 1 次。等价于{0,1} |
  | . | 默认匹配除换行符之外的任何单个字符 |
  | x(?=y) | 匹配’x’仅仅当’x’后面跟着’y’。这种叫做先行断言 |
  | (?<=y)x | 匹配’x’仅当’x’前面是’y’.这种叫做后行断言 |
  |x(?!y) | 仅仅当’x’后面不跟着’y’时匹配’x’，这被称为正向否定查找 |
  |(?<!y)x | 仅仅当’x’前面不是’y’时匹配’x’，这被称为反向否定查找 |
  |x|y |匹配‘x’或者‘y’ |
  |{n} | n 是一个正整数，匹配了前面一个字符刚好出现了 n 次 |
  |{n,} | n是一个正整数，匹配前一个字符至少出现了n次 |
  | {n,m} |n 和 m 都是整数。匹配前面的字符至少n次，最多m次 |
  |[xyz] |一个字符集合。匹配方括号中的任意字符 |
  | [^xyz] |匹配任何没有包含在方括号中的字符 |
  | \b | 匹配一个词的边界，例如在字母和空格之间 |
  |\B |匹配一个非单词边界 |
  | \d | 匹配一个数字 |
  | \D |匹配一个非数字字符 |
  |\f | 匹配一个换页符 |
  |\n |匹配一个换行符 |
  |\r |匹配一个回车符 |
  |\s | 匹配一个空白字符，包括空格、制表符、换页符和换行符 |
  |\S |匹配一个非空白字符 |
  |\w | 匹配一个单字字符（字母、数字或者下划线） |
  |\W | 匹配一个非单字字符 |

---

• 正则表达式标记

标志	描述
g	全局搜索。
i	不区分大小写搜索。
m	多行搜索。
s	允许 . 匹配换行符。
u	使用unicode码的模式进行匹配。
y	执行“粘性(sticky)”搜索,匹配从目标字符串的当前位置开始。

应用场景

• 验证qq合法性(5-15位，数字，不是0开头)：

const reg=/^[1-9][0-9]{4,14}$/
const isvalid=reg.exec(s)

• 校验用户账号合法性(5-20以字母开头，可带数字"_""."等字符串)

const reg=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/
const isvalid=reg.exec(s)

vue:什么是虚拟DOM？

虚拟DOM这个概念相信大家都不陌生，从React到Vue，虚拟DOM位这两个框架都带来了跨平台的能力(React-Native和weex)

实际上它只是一层对真实DOM的抽象，以JavaScript 对象 (VNode 节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上

在Javascript对象中，虚拟DOM 表现为一个 Object对象。并且最少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，不同框架对这三个属性的名命可能会有差别

为什么需要虚拟DOM？

DOM是很慢的，其元素非常庞大，页面的性能问题，大部分都是由DOM操作引起的

很多人认为虚拟 DOM 最大的优势是 diff 算法，减少 JavaScript 操作真实 DOM 的带来的性能消耗。虽然这一个虚拟 DOM 带来的一个优势，但并不是全部。虚拟 DOM 最大的优势在于抽象了原本的渲染过程，实现了跨平台的能力，而不仅仅局限于浏览器的 DOM，可以是安卓和 IOS 的原生组件，可以是近期很火热的小程序，也可以是各种GUI