乐趣区

金山面试总结

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

首先是自我介绍,然后面试官致命三连:之前有实习经历吗?答:没有(笑);之前有写过 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
答:不了解(笑)


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

退出移动版