前言
笔试结束过两天打电话来约面试时间,阿里的面试官感觉更有点面试经验,会抓住某个点,往下深入;并且话题的转移不生硬。面试官一开场先根据你的笔试的回答情况为切入点,他问我最后一题中的优化策略,为什么要这么做。
面试时长: 50 分钟
题目列表:
- 优化策略中,为什么 css 放在
<head>
,js 放在<body>
尾部 - 有没有其他方法取代 js 放在
<body>
尾部的方法 - 介绍一下 defer 和 async
- *1.js 2.js 3.js 他们defer 的执行顺序
- 减少请求次数,展开讲
- https
- https 判断伪造
- *https 加密过程
- 简历上的项目的模块
- 项目中,组件如何复用
- 项目的后端框架
- 原型链
- ES6 class super
- A类继承B类,重写B类的方法
- 闭包
- 闭包什么时候可用,什么时候不建议
- *js如何实现 private 可见性
- *typescript 转成 js 的源码你有看吗
- 做前端你最有成就感的事情
- *$.fn 是 jquery 对象这个你有了解过吗
题目
1.优化策略中,为什么 css 放在<head>
,js 放在 <body>
尾部
浏览器渲染规则,script 标签会阻塞,并且 js 有权利操作dom。
2.有没有其他方法取代 js 放在 <body>
尾部的方法
defer async
3.介绍一下 defer 和 async
defer 和 async 都是异步加载,但是defer 会在文档解析完毕之后才运行,async是加载完之后立刻运行,仍会阻塞。
4. *1.js 2.js 3.js 他们defer 的执行顺序
关于defer:
- defer
只适用于外联脚本,如果
script标签没有指定
src属性,只是内联脚本,不要使用
defer` - 如果有多个声明了
defer
的脚本,则会按顺序下载和执行 - defer脚本会在
DOMContentLoaded
和load
事件之前执行
所以,是按顺序下载和执行的。
5.减少请求次数,展开讲
如果不减少请求:
- tcp建立连接和断开连接是有一定开销的
- 而且每次http请求都带有http头,头部里面也可能有我们不关注的信息,但是它们也占有一定开销。
- 如果网站使用的是https,每一次的http请求都要经过加密解密的过程,也会消耗内存和CPU。
6.https
https = http + ssl
7.https 判断伪造
SSL使用 证书的手段确定通信方
8.*https 加密过程
- 客户端发送 hello 报文开始SSL通信。报文中含SSL版本,加密组件列表等信息。
- 服务器端回送 hello 报文。报文中亦包含SSL版本及加密组件。
- 服务器端发送 Certificate 报文。报文中含 公开密钥证书。
- 服务器发送 hello done 报文通知客户端。最初的 SSL 握手协商部分技术。
- 客户端发送 client key exchange 报文。报文中包含通信加密中使用的 pre-master secrect 的随机密码串。该报文已被3 中的公钥进行加密。
- 客户端发送 change cipher spec 报文。该报文提示服务器,在此报文后的通信会采用 pre-master secret 密钥加密。
- 客户端发送 Finished 报文。该报文包含连接至今全部报文的整体校验值。这次握手协商能否成功,要以服务器是否能正确解密该报文作为判定标准。
- 服务器发送 change cipher spec 报文。
- 服务器发送 finished 报文。
10.SSL 建立完成。
9.简历上的项目的模块
略。
10.项目中,组件如何复用
做成类,采用 $.fn.extend 扩展 jquery 库
11.项目的后端框架
springboot框架,持久层用mybatis,数据库用 mysql,接口设计为REST
12.原型链
我讲述了__proto__
和 prototype
的区别,对象的 隐式原型 指向 构造函数的 显式原型,并且在调用方法时会有向原型链寻找的动作。
13.ES6 class super
当一个类继承另一个类,则必须在 constructor 构造函数中 先调用 super ,才可以使用 this,super 指代父类。
14.A类继承B类,重写B类的方法
js 中只要函数名一致,在调用函数时就会沿着原型链寻找,至于参数是否一致不重要。然后只需要在子类同名函数中使用 super.xxxx()
就可以调用父类的函数了
15.闭包
描述了一下自己对闭包的理解,以及闭包的好处和坏处
16.闭包什么时候可用,能用来干嘛,什么时候不建议
闭包可用:收敛权限,比如属性可见性。
闭包不可用:不要滥用,能不用就不用
17.*js如何实现 private 可见性
proxy 和 Object.defineProperty 设置 getter setter
我提到了 typescript 可以很方便地直接设置 private 可见性
18.*typescript 转成 js 的源码你有看吗
我说没有,可读性有点差。。
19.做前端你最有成就感的事情
我说按照自己的思路封装出一个表格组件并且可行的时候,后面详细地交流了这个组件。
还聊到这个组件使用的是代理模式。
20.*$.fn 是 jquery 对象这个你有了解过吗
没有。。。
感想
阿里的面试官其实是很有水平的,我遇到的这位不太严厉,并且还知道我封装组件的时候的想法和使用到的设计模式。