前端|每天5道面试题（10）补充面试题

_noob
2,845 阅读4分钟

每天背5道，务必背熟记住，希望能对找工作的小前端有点帮助

第十期了，大部分的高频面试题都收录的差不多了，今天补充几个遗漏的题目，这个系列也该和大家说再见了~~

1、重排、重绘

重排（Reflow）是什么？

  • 定义：DOM中各个元素都有自己的盒子模型，需要浏览器根据样式进行计算，并根据计算结果将元素放到特定位置，这就是Reflow
  • 触发Reflow的条件
    • 增、删、改、移DOM
    • 修改CSS样式
    • Resize窗口
    • 页面滚动
    • 修改网页的默认字体

重绘（Repaint）是什么？

  • 定义：当各种盒子的位置、大小以及其他属性改变时，浏览器需要把这些元素都按照各自的特性绘制一遍，这个过程称为Repaint。
  • 触发Repaint的条件：
    • DOM改动
    • CSS改动

如何减少重绘、避免重排？

本质上，就是合并修改。具体的措施有：

  • DOM层面：DocumentFragment本质上是一个占位符，真正插入页面的是它的所有子孙节点，所以，将需要变动的DOM节点先汇总到DocumentFragment，然后一次性插入，可以减少DOM操作的次数。
  • CSS层面：操作多个样式时，可以先汇总到一个类中，然后一次性修改

2、css3动画常用的属性

  • transition动画：

transition-property：　　　 参与过渡的属性

transition-duration：　　　 过渡的持续时间

transition-delay：　　　　　延迟过渡的时间

transition-timing-function：过渡的动画类型

复合写法：

transition: 属性值1  属性值2  属性值3  属性值4
  • animation关键帧动画：

animation-name：设置对象所应用的动画名称

animation-duration：设置对象动画的持续时间
animation-timing-function：设置对象动画的过渡类型
animation-delay：设置对象动画延迟的时间
animation-iteration-count：设置对象动画的循环次数（默认情况下循环1次）
animation-direction：设置对象动画在循环中是否反向运动
animation-play-state：设置对象动画的状态 

常常结合transform使用：

  平移：transfrom：translate(X,Y)

  旋转：transform: rotate()

  斜切：ransform:skew(X,Y)

  缩放：transform：scale(X,Y)

例如：

.box{
    height:200px;
    width: 200px;
    position: relative;
    margin:200px auto;
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    transform:rotateX(20deg) rotateY(20deg);
    animation:one 5s linear infinite;
    -webkit-animation:one 5s linear infinite;
}
@keyframes one{
    from{
        transform:rotateX(-20deg) rotateY(0deg) ;
    }
    to{
        transform:rotateX(340deg) rotateY(360deg) ;
    }
}

3、事件委托

事件捕获和冒泡允许我们实现一种被称为 事件委托 的强大的事件处理模式。

这个想法是，如果我们有许多以类似方式处理的元素，那么就不必为每个元素分配一个处理程序 —— 而是将单个处理程序放在它们的共同祖先上。

在处理程序中，我们获取 event.target 以查看事件实际发生的位置并进行处理。

4、JS哪些操作会造成内存泄露

内存泄漏是指一块被分配的内存既不能使用，也不能回收，直到浏览器进程结束。 

  • 意外的全局变量 
  • 闭包 
  • 没有清理的dom元素 dom元素赋值给变量，又通过removeChild移除dom元素。但是dom元素的引用还在内存中 
  • 被遗忘的定时器或者回调

5、说几条写JavaScript的基本规范？

  • 1、不要在同一行声明多个变量
  • 2、使用===或!==来比较
  • 3、使用字面量的方式来创建对象、数组，替代new Array这种形式
  • 4、不要使用全局函数
  • 5、switch语句必须要带default分支
  • 6、函数不应该有的时候有return，有的时候没有return
  • 7、fon-in循环中的变量，用var关键字说明作用域，防止变量污染
  • 8、变量的声明遵循驼峰命名法，声明构造函数时首字母大写，定义常量的时候尽量用大写字母，用_分割
  • 9、三元表达式可以替代if语句
  • 10、&&和||是可以短路的，使用&&时如果前面一个值是错的，那么后面的值不用判断，使用||时，如果前面一个值是对的，那么后面的值不用判断
  • 11、比较数据类型以下6种情况是false，其他都是true：false、""、0、null、NaN、undefined
  • 12、数据类型检测用typeof，对象类型检测用instanceof
  • 13、异步加载第三方的内容
  • 14、单行注释//，多行注释/**/
  • 15、使用命名空间解决变量名冲突
  • 16、多人协作开发，新建一个js文件，const声明常量，在js文件中引用，用常量名替代方法名，这样做可以防止命名冲突

本着能为找工作中的前端帮一点小忙的初衷，借鉴了掘金里面很多大佬的文章，如有侵权请告知

avatar
文章
阅读
粉丝