快捷搜索:
来自 新京葡娱乐场网址 2019-12-13 21:15 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

面试必会,2018阿里巴巴前端面试总结

面试分享:2018阿里巴巴前端面试总结(题目 答案)

2018/04/14 · 基础技术 · 面试

原文出处: 梦魇小栈   

脑子混了记得不多了,记得多少就记录多少吧。。。。

 

(1) 执行上下文
其实就是在代码执行过程中,为其确定一个适当的执行顺序
包括:
全局环境下的变量定义、函数声明
局部环境下的变量定义、函数声明,this和arguments的确定

使用css实现一个持续的动画效果

animation:mymove 5s infinite; @keyframes mymove { from {top:0px;} to {top:200px;} }

1
2
3
4
5
animation:mymove 5s infinite;
@keyframes mymove {
from {top:0px;}
to {top:200px;}
}

主要考:animation 用法

描述
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

(2) this
this的值在执行时才能确认值,定义时无法确认
包括:
a. 作为构造函数执行:指向该构造函数的实例对象
b. 作为对象属性执行
c. 作为普通函数执行
d. call,apply,bind
e. 箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。正是因为它没有this,所以也就不能用作构造函数。

使用js实现一个持续的动画效果

最开始的思路是用定时器实现,最后没有想的太完整,面试官给出的答案是用requestAnimationFrame

  • 定时器思路
var e = document.getElementById('e') var flag = true; var left = 0;
setInterval(() => { left == 0 ? flag = true : left == 100 ? flag
= false : '' flag ? e.style.left = ` ${left  }px` : e.style.left =
` ${left--}px` }, 1000 / 60)

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6a51a0975288217752-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0975288217752-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6a51a0975288217752-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0975288217752-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6a51a0975288217752-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0975288217752-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6a51a0975288217752-7">
7
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6a51a0975288217752-1" class="crayon-line">
var e = document.getElementById('e')
</div>
<div id="crayon-5b8f6a51a0975288217752-2" class="crayon-line crayon-striped-line">
var flag = true;
</div>
<div id="crayon-5b8f6a51a0975288217752-3" class="crayon-line">
var left = 0;
</div>
<div id="crayon-5b8f6a51a0975288217752-4" class="crayon-line crayon-striped-line">
setInterval(() =&gt; {
</div>
<div id="crayon-5b8f6a51a0975288217752-5" class="crayon-line">
    left == 0 ? flag = true : left == 100 ? flag = false : ''
</div>
<div id="crayon-5b8f6a51a0975288217752-6" class="crayon-line crayon-striped-line">
    flag ? e.style.left = ` ${left  }px` : e.style.left = ` ${left--}px`
</div>
<div id="crayon-5b8f6a51a0975288217752-7" class="crayon-line">
}, 1000 / 60)
</div>
</div></td>
</tr>
</tbody>
</table>
  • requestAnimationFrame
    由于之前没有用过这个 API 所以是现学的。
/兼容性处理 window.requestAnimFrame = (function(){ return
window.requestAnimationFrame || window.webkitRequestAnimationFrame
|| window.mozRequestAnimationFrame || function(callback){
window.setTimeout(callback, 1000 / 60); }; })(); var e =
document.getElementById("e"); var flag = true; var left = 0;
function render() { left == 0 ? flag = true : left == 100 ? flag =
false : ''; flag ? e.style.left = ` ${left  }px` : e.style.left =
` ${left--}px`; } (function animloop() { render();
requestAnimFrame(animloop); })();

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6a51a0979877799923-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0979877799923-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6a51a0979877799923-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0979877799923-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6a51a0979877799923-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0979877799923-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6a51a0979877799923-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0979877799923-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f6a51a0979877799923-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0979877799923-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f6a51a0979877799923-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0979877799923-12">
12
</div>
<div class="crayon-num" data-line="crayon-5b8f6a51a0979877799923-13">
13
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0979877799923-14">
14
</div>
<div class="crayon-num" data-line="crayon-5b8f6a51a0979877799923-15">
15
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0979877799923-16">
16
</div>
<div class="crayon-num" data-line="crayon-5b8f6a51a0979877799923-17">
17
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0979877799923-18">
18
</div>
<div class="crayon-num" data-line="crayon-5b8f6a51a0979877799923-19">
19
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0979877799923-20">
20
</div>
<div class="crayon-num" data-line="crayon-5b8f6a51a0979877799923-21">
21
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0979877799923-22">
22
</div>
<div class="crayon-num" data-line="crayon-5b8f6a51a0979877799923-23">
23
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0979877799923-24">
24
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6a51a0979877799923-1" class="crayon-line">
/兼容性处理
</div>
<div id="crayon-5b8f6a51a0979877799923-2" class="crayon-line crayon-striped-line">
window.requestAnimFrame = (function(){
</div>
<div id="crayon-5b8f6a51a0979877799923-3" class="crayon-line">
  return  window.requestAnimationFrame       ||
</div>
<div id="crayon-5b8f6a51a0979877799923-4" class="crayon-line crayon-striped-line">
          window.webkitRequestAnimationFrame ||
</div>
<div id="crayon-5b8f6a51a0979877799923-5" class="crayon-line">
          window.mozRequestAnimationFrame    ||
</div>
<div id="crayon-5b8f6a51a0979877799923-6" class="crayon-line crayon-striped-line">
          function(callback){
</div>
<div id="crayon-5b8f6a51a0979877799923-7" class="crayon-line">
            window.setTimeout(callback, 1000 / 60);
</div>
<div id="crayon-5b8f6a51a0979877799923-8" class="crayon-line crayon-striped-line">
          };
</div>
<div id="crayon-5b8f6a51a0979877799923-9" class="crayon-line">
})();
</div>
<div id="crayon-5b8f6a51a0979877799923-10" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f6a51a0979877799923-11" class="crayon-line">
var e = document.getElementById(&quot;e&quot;);
</div>
<div id="crayon-5b8f6a51a0979877799923-12" class="crayon-line crayon-striped-line">
var flag = true;
</div>
<div id="crayon-5b8f6a51a0979877799923-13" class="crayon-line">
var left = 0;
</div>
<div id="crayon-5b8f6a51a0979877799923-14" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f6a51a0979877799923-15" class="crayon-line">
function render() {
</div>
<div id="crayon-5b8f6a51a0979877799923-16" class="crayon-line crayon-striped-line">
    left == 0 ? flag = true : left == 100 ? flag = false : '';
</div>
<div id="crayon-5b8f6a51a0979877799923-17" class="crayon-line">
    flag ? e.style.left = ` ${left  }px` :
</div>
<div id="crayon-5b8f6a51a0979877799923-18" class="crayon-line crayon-striped-line">
        e.style.left = ` ${left--}px`;
</div>
<div id="crayon-5b8f6a51a0979877799923-19" class="crayon-line">
}
</div>
<div id="crayon-5b8f6a51a0979877799923-20" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f6a51a0979877799923-21" class="crayon-line">
(function animloop() {
</div>
<div id="crayon-5b8f6a51a0979877799923-22" class="crayon-line crayon-striped-line">
    render();
</div>
<div id="crayon-5b8f6a51a0979877799923-23" class="crayon-line">
    requestAnimFrame(animloop);
</div>
<div id="crayon-5b8f6a51a0979877799923-24" class="crayon-line crayon-striped-line">
})();
</div>
</div></td>
</tr>
</tbody>
</table>

不足之处请指正(毕竟是现学的)顺便查了一下优势:

  • 浏览器可以优化并行的动画动作,更合理的重新排列动作序列,并把能够合并的动作放在一个渲染周期内完成,从而呈现出更流畅的动画效果
  • 解决毫秒的不精确性
  • 避免过度渲染(渲染频率太高、tab 不可见暂停等等)
    注:requestAnimFrame 和 定时器一样也头一个类似的清除方法 cancelAnimationFrame

(3) 作用域
变量和函数的可访问范围
包括:
a. 没有块级作用域,只有函数和全局作用域
b. 作用域链
b. 闭包的两个场景
d. 词法作用域

右边宽度固定,左边自适应

第一种:

<style> body{ display: flex; } .left{ background-color: rebeccapurple; height: 200px; flex: 1; } .right{ background-color: red; height: 200px; width: 100px; } </style> <body> <div class="left"></div> <div class="right"></div> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
body{
    display: flex;
}
.left{
    background-color: rebeccapurple;
    height: 200px;
    flex: 1;
}
.right{
    background-color: red;
    height: 200px;
    width: 100px;
}
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

第二种

<style> div { height: 200px; } .left { float: right; width: 200px; background-color: rebeccapurple; } .right { margin-right: 200px; background-color: red; } </style> <body> <div class="left"></div> <div class="right"></div> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
    div {
        height: 200px;
    }
    .left {
        float: right;
        width: 200px;
        background-color: rebeccapurple;
    }
    .right {
        margin-right: 200px;
        background-color: red;
    }
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

暂时想到了两种。

(4) 闭包
包括:
a. 函数作为返回值

水平垂直居中

第一种

#container{ position:relative; } #center{ width:100px; height:100px; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); }

1
2
3
4
5
6
7
8
9
10
11
12
#container{
    position:relative;
}
 
#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

第二种

#container{ position:relative; } #center{ width:100px; height:100px; position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px; }

1
2
3
4
5
6
7
8
9
10
11
12
#container{
    position:relative;
}
 
#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px 0 0 -50px;
}

第三种

#container{ position:relative; } #center{ position:absolute; margin:auto; top:0; bottom:0; left:0; right:0; }

1
2
3
4
5
6
7
8
9
10
11
12
#container{
    position:relative;
}
 
#center{
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

第四种 flex

#container{ display:flex; justify-content:center; align-items: center; }

1
2
3
4
5
#container{
    display:flex;
    justify-content:center;
    align-items: center;
}
function f1(){
   var a = 100;

   return function(){
       console.log(a)
   }
}

var f2 = f1();
var a = 200;
f2();

b. 函数作为参数来传递

function f1(){
var a = 100;

    return function(){
        console.log(a)
    }
}

var f2 = f1();

function f3(fn){
    var a = 200;
    fn():
}

f3(f2)

闭包特性
(1) 闭包可以读取函数内部变量
(2) 将函数内部变量的值始终保存在内存中

四种定位的区别

  • static 是默认值
  • relative 相对定位 相对于自身原有位置进行偏移,仍处于标准文档流中
  • absolute 绝对定位 相对于最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以body元素为偏移参照基准, 完全脱离了标准文档流。
  • fixed 固定定位的元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙。

(5) 什么是异步?
不阻塞后面程序的进程

Flex布局用的多吗?

因为项目考虑兼容 IE9 所以直接说用的不多

(6) 前端使用异步的场景:
包括:
a. 定时任务:setTimeout, setInterval
b. 网络请求:ajax请求,动态<img>加载
c. 事件绑定

移动端适配怎么做的?

使用媒体查询做的响应式布局,根据不同屏幕宽度加载不同css.

(7) DOM的本质
DOM的本质是为了操作文档出现的API,浏览器把拿到的html代码,结构化一个浏览器能识别并且js可操作的一个模型而已

let与var的区别?

letES6 新添加申明变量的命令,它类似于 var,但是有以下不同:

  • var 声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象
  • let 声明的变量,其作用域为该语句所在的代码块内,不存在变量提升
  • let 不允许重复声明.

(9) 请描述一下 cookie,sessionStorage和localStorage的区别
回答点:容量、是否会携带到ajax中,API易用性
包括:
a. cookie只有4kb,而sessionStorage和localStorage最大容量5M
b. cookie每次都会携带到ajax中,而sessionStorage和localStorage不会
c. sessionStorage和localStorage用起来比较简单,getItem,setItem就可以
d. sessionStorage在会话结束后,就会清理,locationStorage需要手动清理,不会自动清理

为什么 var 可以重复声明?(这个就不知道了)

当我们执行代码时,我们可以简单的理解为新变量分配一块儿内存,命名为a,并赋值为2,但在运行的时候编译器与引擎还会进行两项额外的操作:判断变量是否已经声明:

  • 首先编译器对代码进行分析拆解,从左至右遇见var a,则编译器会询问作用域是否已经存在叫 a 的变量了,如果不存在,则招呼作用域声明一个新的变量a,若已经存在,则忽略var 继续向下编译,这时a = 2被编译成可执行的代码供引擎使用。
  • 引擎遇见a=2时同样会询问在当前的作用域下是否有变量a,若存在,则将a赋值为2(由于第一步编译器忽略了重复声明的var,且作用域中已经有a,所以重复声明会发生值得覆盖而并不会报错)。若不存在,则顺着作用域链向上查找,若最终找到了变量a则将其赋值2,若没有找到,则招呼作用域声明一个变量a并赋值为2
    参考链接

(10) AMD
包括:
a. require.js
b. 全局 define 函数
c. 全局 require 函数
d. 依赖JS会自动、异步加载、按需加载

封装一个函数,参数是定时器的时间,.then执行回调函数。

function sleep (time) { return new Promise((resolve) => setTimeout(resolve, time)); }

1
2
3
function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

(11) CommonJS
nideJS模块化规范,现在被大量用于前端

一个关于 this 指向的问题

obj = { name: 'a', getName : function () { console.log(this.name); } } var fn = obj.getName obj.getName() var fn2 = obj.getName() fn() fn2()

1
2
3
4
5
6
7
8
9
10
11
12
obj = {
    name: 'a',
    getName : function () {
        console.log(this.name);
    }
}
 
var fn = obj.getName
obj.getName()
var fn2 = obj.getName()
fn()
fn2()

差不多应该是这样,记不太清了

(12) AMD和CommonJS使用场景
a. 需要异步加载JS,使用AMD
b. 使用 npm 之后建议使用 CommonJS

CommonJS 中的 require/exports 和 ES6 中的 import/export 区别?

  • CommonJS 模块的重要特性是加载时执行,即脚本代码在 require 的时候,就会全部执行。一旦出现某个模块被”循环加载”,就只输出已经执行的部分,还未执行的部分不会输出。
  • ES6 模块是动态引用,如果使用 import 从一个模块加载变量,那些变量不会被缓存,而是成为一个指向被加载模块的引用,需要开发者自己保证,真正取值的时候能够取到值。
  • import/export 最终都是编译为 require/exports 来执行的。
  • CommonJS 规范规定,每个模块内部,module 变量代表当前模块。这个变量是一个对象,它的 exports 属性(即 module.exports )是对外的接口。加载某个模块,其实是加载该模块的 module.exports 属性。
  • export 命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。

(13) 页面加载过程:从输入url到得到html的详细过程
包括:

一行代码实现数组去重?

[...new Set([1,2,3,1,'a',1,'a'])]

1
[...new Set([1,2,3,1,'a',1,'a'])]
  1. 加载资源的形式
  2. 加载一个资源的过程
    a. 浏览器根据 DNS 服务器得到域名的 IP 地址
    b. 向这个 IP 的机器发送 http 请求
    c. 服务器收到请求,处理并返回
    d. 浏览器得到返回内容
  3. 浏览器渲染页面过程
    a. 根据 HTML 结构生成 DOM Tree
    b. 根据 CSS 生成 CSSOM
    c. 将 DOM 和 CSSOM 整合成 RenderTree
    d. 根据 RenderTree 开始渲染和展示
    e. 遇到 <script> 时,会执行并阻塞渲染

使用addEventListener点击li弹出内容,并且动态添加li之后有效

<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>

1
2
3
4
5
6
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

这个题没答出来

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:面试必会,2018阿里巴巴前端面试总结

关键词: