css选择器权重
flex 父容器 子容器怎么垂直水平居中于父容器
sass和less的区别
vue 中选择 calss 的方法(1)
使用querySelector
this.$refs.tree.querySelector(".el-scrollbar__wrap").classList.add("lw-tree-scrollbar")
css继承请讲一讲
可以继承的属性很少，只有颜色，文字，字体间距行高对齐方式，和列表的样式可以继承。
- 所有元素可继承：visibility和cursor。
- 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
- 终端块状元素可继承：text-indent和text-align。
- 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
css 布局方式，各有什么特点
什么是BFC
样式权重
icon 和文字怎么水平居中
回流重绘
浏览器渲染页面默认采用的是流式布局模型（Flow Based Layout），这一点很重要。
由于浏览器渲染界面是基于流式布局模型的，也就是某一个 DOM 节点信息更改了，就需要对 DOM 结构进行重新计算，重新布局界面，再次引发回流，只是这个结构更改程度会决定周边 DOM 更改范围，即全局范围和局部范围，全局范围就是从根节点 html 开始对整个渲染树进行重新布局，例如当我们改变了窗口尺寸或方向或者是修改了根元素的尺寸或者字体大小等；而局部布局可以是对渲染树的某部分或某一个渲染对象进行重新布局。
回流 指的是，当元素的布局或显示等信息改变时，引起 Render 树部分或整体的重新构建，即网页布局的调整。
重绘 指的是，Render 树中节点属性的更新，回流必然会引起重绘，重绘不一定引起回流。
引起回流的操作
- 页面首次渲染
- 浏览器窗口大小发生改变
- 元素尺寸或位置发生改变
（width，height，border，position） - 元素内容变化（文字数量或图片大小等等）
- 元素字体大小变化
- 添加或者删除可见的DOM元素
- 激活CSS伪类（例如：:hover）
- 设置style属性
- 查询某些属性或调用某些方法
引起重绘的操作
相比回流，重绘就简单多了，所谓重绘，就是当页面中元素样式的改变并不影响它在文档流中的位置时，例如更改了字体颜色,浏览器会将新样式赋予给元素并重新绘制的过程称
与布局无关的元素属性操作将只引起重绘，否则将同时引起回流和重绘。常见引起浏览器绘制过程的属性包含：
回流的开销比重绘大。如果 body 顶部插入一个节点，将引起整个 body 的回流；如果尾部插入一个节点，将只引起部分内容的回流，因此开销较小。 浏览器为提升回流、重绘的性能，会构建队列以执行批量处理。但是，访问节点的 offsetTop, scrollTop, clientTop, width, height 类属性或调用了 getComputedStyle 方法， 将迫使浏览器提前执行队列以获得最新的样式。
性能优化
减少DOM操作
- className 或 cssText 批量更新样式，避免单属性操作引起的频繁回流或重绘
- 新创建的元素改完样式后，再插入文档；或者先将节点的 display 属性置为 none，调整样式后再置回显示状态
- 使用变量缓存元素的样式，避免频繁读取元素的样式，致使浏览器提前执行回流队列（以计算元素的布局信息）
- 指定图片的宽高，避免新加载的图片调整大小时引起的回流
- [慎用]使频繁回流、重绘的元素单独有一个 RenderLayer：借助 video 元素、WebGL、Canvas、CSS3 3D、CSS滤镜、
- 最小化DOM访问次数，尽量缓存访问DOM的样式信息，避免过度触发回流。
- 如果在一个局部方法中需要多次访问同一个dom，则先暂存它的引用
采用更优的API替代消费高的api
- 用querySelectorAll()替代getElementByXX()。
- 开启动画的GPU加速，把渲染计算交给GPU。
- 少用HTML集合（类数组）来遍历，因为集合遍历比真数组遍历耗费更高。
- 用事件委托来减少事件处理器的数量。
减少回流
- 避免设置大量的style属性，因为通过设置style属性改变结点样式的话，每一次设置都会触发一次reflow，所以最好是使用class属性
- 实现元素的动画，它的position属性，最好是设为absoulte或fixed，这样不会影响其他元素的布局
- 动画实现的速度的选择。比如实现一个动画，以1个像素为单位移动这样最平滑，但是reflow就会过于频繁，大量消耗CPU资源，如果以3个像素为单位移动则会好很多。
- 不要使用table布局，因为table中某个元素旦触发了reflow，那么整个table的元素都会触发reflow。那么在不得已使用table的场合，可以设置table-layout:auto;或者是table-layout:fixed这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围
css及动画处理
- 少用css表达式
- 减少通过JavaScript代码修改元素样式，尽量使用修改class名方式操作样式或动画；
- 动画尽量使用在绝对定位或固定定位的元素上；
- 隐藏在屏幕外，或在页面滚动时，尽量停止动画；
本节内容参考自：www.jianshu.com/p/33c222133…
