别人经历过的面试题目

约定不等于承诺〃 2022-06-06 10:05 171阅读 0赞

**1.alert(1&&2),alert(1||0)**

1    alert(1&&2)的结果是2  
2    只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值;  
3    只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值;  
4  
5    alert(0||1)的结果是1

6    只要“||”前面为false,不管“||”后面是true还是false，都返回“||”后面的值。

7    只要“||”前面为true,不管“||”后面是true还是false，都返回“||”前面的值。

**2.mouseenter 和 mouseover 的区别**

1    不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout  
2    只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave

**3. 用正则表达式匹配字符串，以字母开头，后面是数字、字符串或者下划线，长度为 9-20**

1  var re=new RegExp("^\[a-zA-Z\]\[a-zA-Z0-9\_\]\{9,20\}$");

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

String.prototype.trim = function ()\{   
   returnthis.replace(/(^\\s\*)|(\\s\*$)/g,'');  
 \};

**5.三道判断输出的题都是经典的题**

1  *//5.1*  
2  var a=4;  
3  functionb()\{   
4     a=3;  
5   console.log(a);  
6   functiona()\{\};  
7  \}  
8 b();  
9*//明显输出是3，因为里面修改了a这个全局变量，那个function a()\{\}是用来干扰的，虽然函数声明会提升，就被a给覆盖掉了，这是我的理解*  
10*//5.2*  
12*//不记得具体的就类似如下*  
13  var baz=3;  
14  var bazz=\{    
15   baz: 2,  
16   getbaz: function()\{   
17         returnthis.baz  
18   \}  
19  \}  
20  console.log(bazz.getbaz())  
21  var g=bazz.getbaz;  
22  console.log(g()) ;  
23   *//第一个输出是2，第二个输出是3，这题考察的就是this的指向，函数作为对象本身属性调用的时候this指向对象，作为普通函数调用的时候就指向全局了*  
24  *//5.3var arr=\[1,2,3,4,5\];*  
25  for(var i=0;i<arr.length;i++)  
26  \{     
27   arr\[i\]=function()\{   
28  alert(i)  
29  \}  
30  \}  
31  arr\[3\]();  
32  *//典型的闭包啊，看都不用看，肯定弹出5啊*

**6.写出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” 属性进行规定

***7*. 写一个 div+css 布局，左边图片右边文字，文字环绕图片，外面容器固定宽度，文字不固定（这是后来根据面试官描述的，笔试题上只有图我就不放上来了)**

直接加 p 标签，图片加个对齐方式  align="left" 就可以了 <p style="height: 100px;width: 500px;"><img src="xxx" height="100"  align="left" hspace="5" vspace="5">text</p>

**8. 讲述你对 reflow 和 repaint 的理解**

repaint 就是重绘，reflow 就是回流。repaint 主要是针对某一个 DOM 元素进行的重绘，reflow 则是回流，针对整个页面的重排。

严重性：在性能优先的前提下，性能消耗 reflow 大于 repaint。

体现：repaint 是某个 DOM 元素进行重绘；reflow 是整个页面进行重排，也就是页面所有 DOM 元素渲染。

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

常见触发场景：

触发 repaint：

1  color的修改，如color=#ddd；
    2  text-align的修改，如text-align=center；
    3  a:hover也会造成重绘。
    4  :hover引起的颜色等不导致页面回流的style变动。

触发 reflow：

1  width/height/border/margin/padding的修改，如width=778px；
    2  动画，:hover等伪类引起的元素表现改动，display=none等造成页面回流；
    3  appendChild等DOM元素操作；
    4  font类style的修改；
    5  background的修改，注意着字面上可能以为是重绘，但是浏览器确实回流了，经过浏览器厂家的优化，部分background的修改只触发repaint，当然IE不用考虑；
    6  scroll页面，这个不可避免；
    7  resize页面，桌面版本的进行浏览器大小的缩放，移动端的话，还没玩过能拖动程序，resize程序窗口大小的多窗口操作系统。
    8 读取元素的属性（这个无法理解，但是技术达人是这么说的，那就把它当做定理吧）：读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))；

如何避免：

尽可能在 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，那么每一帧动画都会进行计算，性能消耗不容小觑。*