小虾米~
互联网大海中的一只小虾米

1

2,mouseenter和mouseover的区别 

3..js字符串两边截取空白的trim的原型方法的实现

正则:

4,写出position不同值和区别:

  1. absolute: 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。(不占位)
  2. relative: 生成相对定位的元素,相对于其正常位置进行定位。因此,”left:20” 会向元素的 LEFT 位置添加 20 像素。(占位)
  3. static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)inherit:规定应该从父元素继承 position 属性的值。
  4. fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
  5. inherit:规定应该从父元素继承 position 属性的值。

5,

reflow和repaint的理解 

repaint就是重绘,reflow就是回流。repaint主要是针对某一个DOM元素进行的重绘,reflow则是回流,针对整个页面的重排 
严重性: 
在性能优先的前提下,性能消耗 reflow大于repaint。

体现: 
repaint是某个DOM元素进行重绘;reflow是整个页面进行重排,也就是页面所有DOM元素渲染。(web前端学习交流群:328058344 禁止闲聊,非喜勿进!)

如何触发: 
style变动造成repaint和reflow。不涉及任何DOM元素的排版问题的变动为repaint,例如元素的color/text-align/text-decoration等等属性的变动。除上面所提到的DOM元素style的修改基本为reflow。例如元素的任何涉及长、宽、行高、边框、display等style的修改。

如何避免: 
尽可能在DOM末梢通过改变class来修改元素的style属性:尽可能的减少受影响的DOM元素。

避免设置多项内联样式:使用常用的class的方式进行设置样式,以避免设置样式时访问DOM的低效率。

设置动画元素position属性为fixed或者absolute:由于当前元素从DOM流中独立出来,因此受影响的只有当前元素,元素repaint。

牺牲平滑度满足性能:动画精度太强,会造成更多次的repaint/reflow,牺牲精度,能满足性能的损耗,获取性能和平滑度的平衡。

避免使用table进行布局:table的每个元素的大小以及内容的改动,都会导致整个table进行重新计算,造成大幅度的repaint或者reflow。改用div则可以进行针对性的repaint和避免不必要的reflow。

避免在CSS中使用运算式:学习CSS的时候就知道,这个应该避免,不应该加深到这一层再去了解,因为这个的后果确实非常严重,一旦存在动画性的repaint/reflow,那么每一帧动画都会进行计算,性能消耗不容小觑。

 

 

 

 

posted on 2018-03-17 16:49  小虾米~  阅读(94)  评论(0)    收藏  举报