金山面试总结

本来是想一面过了再发出来的（想给人一种深藏功与名的感觉），可是一面没有过哦。个人觉得还是基础知识不够扎实（深度和广度都不够），除了技术，其他方面表现的都还行哈哈哈哈（可是有什么用？？？！！！）

首先是自我介绍，然后面试官致命三连：之前有实习经历吗？答：没有（笑）；之前有写过 c ++，java 吗？答：暂时还没有学习后台语言，等工作了前端学好了会学习一门后台语言的（内心 os：我要是会，我还会来应聘前端岗？）；之前有学过其他语言吗？答：没有（其实大一学过 C 语言，但是不敢回答，害怕被提问）

1. 移动端点透问题的处理

• 1.1 移动端点透问题是啥？

  当一个元素放覆盖了另一个元素, 覆盖的元素监听 touch 事件, 如果被覆盖的元素监听 click 事件，touch 事件触发后覆盖的元素就消失了, 那么就会出现点透问题

• 1.2 点透问题的出现原因

  ① 当手指触摸到屏幕的时候，系统生成两个事件，一个是 touch 一个是 click

  ② touch 事件先执行，执行完后从文档上消失

  ③ click 事件有 100~300ms 延迟，所以后执行

  ④ 但 click 事件执行的时候触发的元素已经消失了, 对应的位置现在是下面的元素, 所以就触发了下面元素的 click 事件

• 1.3 移动端点透问题解决方案

  ① 在 touch 事件中添加 event.preverDefault(); 阻止事件扩散

     let oClick = document.querySelector(".click");
     let oTap = document.querySelector(".tap");
     oTap.ontouchstart = function (event) {
          this.style.display = "none";
          event.preventDefault(); // 阻止事件扩散};
          oClick.onclick = function () {console.log("click");
     }
  

  ② 使用 Zepto, 需要注意老版本的 Zepto 也会出现点透问题，但是新版本已经解决了这个问题

  ③ 使用 Fastclick, 最早解决点透问题的插件

2. 两个元素重叠，点击上面的元素如何告知浏览器想要点击的是下面那个元素（其实就可以理解为点透问题）

• 2.1 我说了用 js 处理（捕获 & 冒泡）的方法，面试官：我就要用 css 呢
  内心：CSS 可以吗？可以？吗？后来翻了翻笔记，确实可以
• 2.2 告诉浏览器当前元素不需要接收事件，可以设置pointer-events: none;

• 2.3 注意区分：cursor: pointer;

  cursor 属性规定要显示的光标的类型（形状）。
  auto 默认。浏览器设置的光标。
  default 默认光标（通常是一个箭头）
  pointer 光标呈现为指示链接的指针（一只手）

3.css 的 flex

伸缩容器中的两个伸缩项，一个宽度已经固定，想让另外一项占满整个伸缩容器，给该元素设置 flex: 1; 即可

4. 如何判断某个浏览器是否支持某 css 属性

答：有些有 -webkit- 前缀的就是 chrome 浏览器的私有属性；有 -ms- 前缀的就是 IE 浏览器私有属性
面试官：除了这个方法呢？我：不知道

5.css 画三角形

6. 手写动画最小时间间隔最合适是多少，为什么？

（这题遇两次了。。。）
多数显示器默认频率是 60HZ，即一秒刷新 60 次，所以理论上最小间隔使 1 /60*1000ms=16.7ms

7. 给你一个页面，如何判断网页性能的好坏？（可以理解为哪些指标可以反映一个网页的性能）

面试现场还原：（我还真不知道如何判断，瞎说了一些带宽、响应时间啥的）我给面试官说：我知道如何优化一个网页，但是我还真不了解如何判断 …
面试官：你得知道哪里不好才能优化吧？我倒 …

• 7.1 页面加载时间：从页面开始加载到页面 onload 事件触发的时间。一般来说 onload 触发代表着直接通过 HTML 引用的 CSS，JS，图片资源已经完全加载完毕。
• 7.2 全部页面载入时间：指从最初启动浏览开始，直到所有元素都被加载完成后，在 2 秒后仍然没有网络活动的时间。
• 7.3 首字节时间：从开始加载到收到服务器返回数据的第一字节的时间
• 7.4 使用长连接：连接视图展现了页面加载过程中创建的（keepalive）连接，以及通过每个连接所加载的资源。
• 7.5 DNS 时间：进行域名解析所需要的时间
• 7.6 TCP 时间：客户端建立连接的时间
• 7.7 HTTP 网页打分：页面渲染、下载速度、页面流畅度

8.promise 相关的东西

promise 的状态，all 方法

9.parseInt()方法和 Number()方法的区别

10. 数据转为字符串的方法

11. 存在隐式转换的场景

12. 闭包是啥，闭包的回收机制

只答上来了 引用计数 ，还有一个是 标记清除（我发誓我真的都知道，但是当时忘记了）

13.Render Tree 和 CSSOM Tree 的区别

15. 原型链是干啥的

16. 如何异步执行 js 代码

答：promise
问：还有呢
答：动态创建 script 标签（当时有点慌张了，应该把知道的都说一下的）

17. 如果一个页面被访问多次，如何优化（其实就是问防抖和节流）

答：可以采用函数防抖
问：那防抖和节流的区别是啥（也答了）

18. 连接 gulp 和 grunt 吗

内心：我说了最近刚刚了解了 webpack
答：不了解（笑）

总结：反正全程都是“还有呢？？？”应该还有一些问题，暂时想起来的就是这些，记起来的都是答得不咋样的，总之还是基础知识不扎实 …（菜是原罪，哭）