阿里巴巴前端面试-2018.03.25

最新推荐文章于 2023-07-06 12:05:54 发布

csu_zipple

最新推荐文章于 2023-07-06 12:05:54 发布

阅读量1.7k

点赞数 3

分类专栏：前端杂事文章标签：阿里巴巴前端面试

本文链接：https://blog.csdn.net/csu_passer/article/details/79690661

版权

前端杂事专栏收录该内容

205 篇文章 6 订阅

订阅专栏

今天下午接到了阿里（杭州）的电话面试，整个面试过程半个小时，感觉还行….比头条的感受好多了…

在浏览器输入地址之后，页面加载的过程？

一上来就直接问了页面的加载过程，这种问题其实也很简单，大致有以下几步：
首先进行通过DNS进行域名解析，将请求发送到目标服务器上。服务器做出响应，返回html页面或者其他资源。（这里以HTML为例）
浏览器接收到页面以后就会进行HTML解析，在解析到link标签的时候会并行下载CSS文件并解析（边下载边解析吗？），而且不会阻塞浏览器解析DOM，而在加载到script标签的时候会阻塞，因为这个时候需要同步下载JS。（ps：JS为什么是同步加载呢？）
CSS解析会生成CSSOM，并依据此和DOM节点生成render树。如果使用了3d效果，会另外添加新的图层。也就是加载Render Layout Tree，最后与render tree 合并（图层合并）渲染成功。
(浏览器的页面排版引擎负责解析)

JS如何实现多重继承？

面试官：JS实现继承的基础是原型链，如果现在有一个class A 和 class B，还有一个class C，如何实现C继承自A和B？
很直观的，我是这么认为的。如果C要继承自A和B的话，就必须A继承B的所有属性，或者说是B继承A的所有属性。（C++貌似直接可以多重继承）

function A(name) {
    this.name = name||"initial A name"
}

function B(name){
    this.name = name||"initial B name"
}

function C(test) {
    this.test = test;
}

B.prototype = new A("B.prototype = new A");
C.prototype = new B("C.prototype = new B");
let c = new C();
console.log(c instanceof B);//true
console.log(c instanceof A);//true

这个时候面试官和我说，这样的话B的原型方法会不会就被覆盖了…我想了一下，还真是…面试官提示我说可不可以给原有的原型对象增加一个属性，并将其赋值为A的对象。
这样虽然可行，但是instanceof应该不会起作用了吧。。

B.prototype.supClass = new A("B.prototype = new A");
C.prototype = new B("C.prototype = new B");
let c = new C();
console.log(c instanceof B);//true
console.log(c instanceof A);//false
console.log(c.supClass.name);//B.prototype = new A

2018.03.26修改：
下面这种方法也可以实现多重继承，不过instanceof也不会起作用。

function C(test) {
    this.test = test;
    A.call(this);
    B.call(this);
}

let c = new C();
console.log(c instanceof B);//false
console.log(c instanceof A);//false

console.log(c.name);//initial B name

相同属性后面的会覆盖前面的

树的遍历方式，简单介绍一下方法

树的遍历方法有两种：深度优先和广度优先。
深度优先就是先遍历层级关系，而广度优先就是先遍历同层次的节点。

简单介绍一下你的项目，以及你所负责的工作

克里斯多…
websocket….

跨域的方式了解过哪些？

面试官看到ws了就问了跨域的方式。
当然我顺着就说了websocket。另外因为script标签是可以跨域的，所以JSONP也是可以的。还有html5中的新API，postMessage也可以。哦对，面试官提醒我还有CORS。。不过这个是服务端设置的（其实和前端关系不大吧嘿嘿），借这个机会和他扯了一下如何使用这个让外链链接我们网站的图片时显示默认图片。
面试官问我还有吗？
好吧因为是电话面试，我就说了前面那些…
然后又说了doucument,domain和window.name…

你最擅长的技术是什么？

这个，我不好回答。
最后就说了对界面实现和用户交互这块比较在行，另外就是组件化比较有经验。

说一下事件委托？

面试官看到我说了交互，就问这个和DOM操作息息相关的话题。事件委托就是利用冒泡机制将触发事件放置在父元素上面，而不是放在触发源上。这样可以减少内存占用，提高用户体验。经典代码是这样的：

　parent.onclick = function(e){
　　　　var e= e|| window.event;
　　　　var target = e.target || e.srcElement;//事件源
　　　　if(target.id == 'son'){
　　　　　　　 //your code here
　　　　}
　　}

有接触过CSRF吗？怎么防范？

web安全问题是每一个前端工程师都应该考虑的事情。简单说，CSRF直译过来就是跨站点伪造请求。典型的发生场景就是：你刚刚访问了一家安全网站，并且通过了身份认证。而这个时候你的浏览器中的cookie会携带你的身份认证，如果你恰好又访问了一家不安全的网站，这个不安全的网站还是用来攻击那个安全网站的，那你就危险了。这个不安全的网站就很有可能利用脚本给那个安全的网站发送请求（这个请求会携带浏览器的cookie），并且后台认为这个请求是你本人发送的。
那么如何防范呢？
验证码会破坏用户体验。
那就使用token吧，服务端生成随机码给前端，前端获取随机码储存在页面中而不是浏览器中。
不过这个时候可要好好防范XSS攻击了！可不能被XSS攻击获取到了你页面中的数据，然后配合CSRF….