浏览器是怎样解析CSS选择器的？介绍几个前端性能优化方案？

前端面经

浏览器是怎样解析CSS选择器的？

• CSS选择器的解析是从右向左解析的。
• 若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。
• 若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。
• 两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。 而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

介绍几个前端性能优化方案

• 三个方面来说明前端性能优化
• 一： webapck优化与开启gzip压缩
  • 1.babel-loader用 include 或 exclude
    来帮我们避免不必要的转译，不转译node_moudules中的js文件 其次在缓存当前转译的js文件，设置
    loader: ‘babel-loader?cacheDirectory=true’
  • 2.文件采用按需加载等等
  • 3.具体的做法非常简单，只需要你在你的 request headers 中加上这么一句： accept-encoding:gzip
  • 4.图片优化，采用svg图片或者字体图标
  • 5.浏览器缓存机制，它又分为强缓存和协商缓存
• 二：本地存储——从 Cookie 到 Web Storage、
  • IndexedDB， 说明一下SessionStorage和localStorage还有cookie的区别和优缺点。
• 三：代码优化
  • 1.事件代理
  • 2.事件的节流和防抖
  • 3.页面的回流和重绘
  • 4.EventLoop事件循环机制
  • 5.代码优化等等