金山面试总结

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

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

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

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

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

• 1.2 点透问题的出现原因

  ① 当手指触摸到屏幕的时候，系统生成两个事件，一个是touch 一个是click
  ② touch事件先执行，执行完后从文档上消失
  ③ click事件有100~300ms延迟，所以后执行
  ④ 但touch事件执行的时候触发的元素已经消失了, 对应的位置现在是下面的元素, 所以就触发了下面元素的click事件

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

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

  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解决这个问题
  ③ 使用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网页打分：页面渲染、下载速度、页面流畅度

利用 window.performance.timing 可以访问到这些属性

DNS查询耗时 = domainLookupEnd - domainLookupStart
TCP链接耗时 = connectEnd - connectStart
request请求耗时 = responseEnd - responseStart
解析dom树耗时 = domComplete - domInteractive
白屏时间 = domloadng - fetchStart
domready时间 = domContentLoadedEventEnd - fetchStart
onload时间 = loadEventEnd - fetchStart

8.promise相关的东西

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

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

11.存在隐式转换的场景

12.闭包是啥，垃圾回收机制
只答上来了引用计数，还有一个是标记清除（我发誓我真的都知道，但是当时忘记了）

13.Render Tree和CSSOM Tree的区别

15.原型链是干啥的

16.如何异步执行js代码
答：promise
问：还有呢
（当时有点慌张了，应该把知道的都说一下的）

17.如果一个页面被访问多次，如何优化（其实就是问防抖和节流）
答：可以采用函数防抖
问：那防抖和节流的区别是啥（也答了）

18.了解gulp和grunt吗
内心：我刚刚说了最近了解了webpack
答：不了解（笑）

---

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