3年半前端阿里1-4面面经

一面 40min

• react hooks, useEffect和useCallback区别？

• react性能优化

• 简述diff算法？为什么是O(n3)

• currentTarget和target区别?

• webpack loader原理？plugin原理？手写过吗？

• 怎么进行代码分割？

• 浏览器性能优化

• 如何封装一个脚手架cli，如何感知脚手架的更新？

• 部署流程？静态资源如何部署？覆盖式更新和非覆盖式更新的区别？hash值的意义，max-age设置多久？200和304？from memory和from disk？

• git rebase? git merge --squash ? 团队中如何使用git?

• 如何理解js原型链？为什么这样设计？

• es5几种继承方式 优缺点？es6继承？

二面 60min

• flex布局？

• 左边固定，右边flex:1，如果右侧文字超出，左侧会被挤压吗？怎么解决？

• element、antd等组件库替换主题样式的原理是啥？

• 如何发布一个npm包？设计开发一个UI库怎么打包？如何按需加载？babel-import-plugin原理是啥？es5引入和es6引入有什么区别？如何进行tree-shaking, 是哪个plugin进行的？es moduleh和Commonjs的区别？

• Webpack打包优化?如何分chunk?如何按需加载组件？

• webpack-dev-server和dev-middleware、hotmiddleware的区别，原理能说说吗？

• 如何替换项目中所有https=>http? (css和js都得替换，css-loader和babel-loader-plugin)

• 移动端适配？post-css原理？

• redux原理？connect高阶组件的原理？如何连接store和业务组件？

• 如何写一个高阶组件？高阶组件有哪几种使用场景(反向继承，生命周期劫持)？

• react setState原理？diff原理？setState同步还是异步？

• react key的原理？

• react事件处理机制？

• react fiber为什么会出现？解决了什么场景下什么问题？

• react hooks为什么会出现？有什么优势？

• useEffect、useCallback、useMemo的区别？

• koa原理？洋葱模型？dispatch函数细节？

• new 原理？如何实现一个new ?

• 一个异步请求，如果5s内有返回就正常返回，如果5s内没返回就输出'超时'，如何用promise实现？

• 描述一下作用域和作用域链？作用域链是什么时候确定的？函数定义时会确定哪些东西？预编译阶段会发生了什么？描述一下AST?

• 浏览器性能优化？介绍一下浏览器缓存？打包出来的文件加hash值有什么用？

• 怼项目.

三面 90min

• 移动端适配方案 rem原理？物理像素和独立像素？

• 怎么判断机型是iphonx, 几种方案？

• css动画优化方案,如何开启gpu加速？

• 小程序遇到过哪些坑？tarojs原理？以前的版本和现在有什么区别？重运行时的优缺点？

• react组件性能优化方案

• http三次握手

• https原理

• https如何防止中间人攻击

• 跨域方案？jsonp原理？cors原理，描述一次完整的Cors请求？

• node掌握怎么样？高并发下有哪些处理？数据库被击穿怎么办？

• 这一面大部分时间在怼项目 怼业务场景

四面交叉面 30min

• axios的原理，和xhr、fetch区别，axios在node能使用吗？node怎么发起请求？

• tarojs原理？重编译轻运行时的优缺点？轻编译重运行时优缺点？

• promise几种状态？怎么实现promise.finally?

• 如果要实现一个请求5s内没正常返回就返回我想要的，比如'超时'，怎么用Promise实现?

• 怎么设计一个动态配置化表单？哪些场景使用？

• 剩下一半时间问项目

还有几道js题

\1. 实现函数字符串转对象

```
'a.b.c'
=>
a: {
  b: {
    c: null
  }
}
```

2.异步请求控制并发 LimitPromise

\3. 输入字符串 输出二维数组

```
`
12312

1  3
12 3
`
=>
[
['12312'],
['13'],
['123']
]
```

\4. 考this，输出什么？

```
function O() {
  this.x = 1
  this.print = function () {
    console.log(this.x)
  }
}
var o = new O()

var print = o.print
print()

var n = {x: 2, print: print}
n.print()
```

可惜5面hr+boss面挂了，缘分未到吧～明年再面

列出display的值，说明他们的作用。position的值， relative和absolute分别是相对于谁进行定位的？

block 象块类型元素一样显示。

inline 缺省值。象行内元素类型一样显示。

inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。

list-item 象块类型元素一样显示，并添加样式列表标记。

1. absolute 生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。

fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。

relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。

static 默认值。没有定位，元素出现在正常的流中

（忽略 top, bottom, left, right z-index 声明）。

inherit 规定从父元素继承 position 属性的值。

CSS3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow），

对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

增加了更多的CSS选择器 多背景 rgba

在CSS3中唯一引入的伪元素是::selection.

媒体查询，多栏布局

border-image

为什么要初始化CSS样式。

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

_最简单的初始化方法就是： _ {padding: 0; margin: 0;} （不建议）

淘宝的样式初始化：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }

body, button, input, select, textarea { font:12px/1.5tahoma, arial, \\5b8b\\4f53; }

h1, h2, h3, h4, h5, h6{ font-size:100%; }

address, cite, dfn, em, var { font-style:normal; }

code, kbd, pre, samp { font-family:couriernew, courier, monospace; }

small{ font-size:12px; }

ul, ol { list-style:none; }

a { text-decoration:none; }

a:hover { text-decoration:underline; }

sup { vertical-align:text-top; }

sub{ vertical-align:text-bottom; }

legend { color:#000; }

fieldset, img { border:0; }

button, input, select, textarea { font-size:100%; }

table { border-collapse:collapse; border-spacing:0; } 

对BFC规范的理解？

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。

（W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。）

解释下 CSS sprites，以及你要如何在页面或网站中使用它。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这样做了，因为有了http2。

html部分

说说你对语义化的理解？

1，去掉或者丢失样式的时候能够让页面呈现出清晰的结构

2，有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

3，方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

4，便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

（1）、\<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。

（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。

（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

你知道多少种Doctype文档类型？

该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。

XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。

Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks

（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

HTML与XHTML——二者有什么区别

区别：

1.所有的标记都必须要有一个相应的结束标记

2.所有标签的元素和属性的名字都必须使用小写

3.所有的XML标记都必须合理嵌套

4.所有的属性必须用引号""括起来

5.把所有\<和&特殊符号用编码表示

6.给所有属性赋一个值

7.不要在注释内容中使“--”

8.图片必须有说明文字

常见兼容性问题？

• png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.
• 浏览器默认的margin和padding不同。解决方案是加一个全局的{margin:0;padding:0;}来统一。
• IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
• 浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）

box{ float:left; width:10px; margin:0 0 0 100px;} 

  .bb{

   background-color:#f1ee18;/_所有识别_/

  .background-color:#00deff\\9; /_IE6、7、8识别_/

  \+background-color:#a200ff;/_IE6、7识别_/

  \_background-color:#1e0bd1;/_IE6识别_/ 

  } 

这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

• 渐进识别的方式，从总体中逐渐排除局部。

首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。

接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

• IE下,可以使用获取常规属性的方法来获取自定义属性,

也可以使用getAttribute()获取自定义属性;

Firefox下,只能使用getAttribute()获取自定义属性.

解决方法:统一通过getAttribute()获取自定义属性.

• IE下,event对象有x,y属性,但是没有pageX,pageY属性;

Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

• 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
• Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,

可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

• 超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:

L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

• 怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在可以使用html5推荐的写法：<doctype html>
• 上下margin重合问题

ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。

解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。

• ie6对png图片格式支持不好(引用一段脚本处理)

---

Last update: April 1, 2022