【秋招面经】菜鸟前端题目总结

前言

本次主要搬运阿里系菜鸟面试的常问问题

问题总结

---

h5的兼容性怎么测试 ？

移动端点击穿透的问题

移动端不同屏幕尺寸的兼容性

用rem、em这种相对单位，em与px的转换，1em等于多少px，em的值是不是固定的 ？

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px

怎么在代码里面监听路由发生的变化 ？

Vue监听路由变化的几种方法

在原生js里面怎么判断一个url是否发生了变化 ？

使用addEventListener，又问的具体监听的哪一个事件

hash模式下应该是window下的hashchange ？

查找和排序的方式，快排是不是稳定的，为什么 ？

查找算法：顺序查找、二分查找、哈希表查找、二叉排序树查找。
排序算法：插入排序、冒泡排序、归并排序、快速排序等。
快排是不稳定排序
查找和排序

移动端和pc端开发的差异？

1、PC端在开发过程中考虑的是浏览器兼容性，移动端开发中考虑的是手机兼容性问题，做移动端开发，更多考虑的是手机分辨率的自适应和不同手机操作系统的略微差异化；

2、在部分事件的处理上，移动端自然是偏向于触屏的，另外包括移动端弹出的手机键盘该如何处理，这样的问题在PC上肯定不会遇到，但在移动端，如果你没有经验，处理起来是相当麻烦的；

3、布局上，移动端开发是要做到页面布局自适应的，而PC端页面布局的比例会相对固定；

4、在动画效果处理上，PC端要考虑IE的兼容性，通常用JS做动画的通用性会好一些，但相比CSS3却牺牲了较大的性能，而在手机端，如果要做一些动画、特效等，第一选择肯定是CSS3，既简单，效率又高。
移动端与pc端区别

前端的异步方法，具体的api？

前端异步编程六种方案

事件队列？

JavaScript的事件队列

缓存以及使用场景？

JS每日一题: 前端的缓存有哪些？都适用什么场景？区别是什么？

前端安全以及对应的解决方法？

【秋招面经】搬运深信服以及360前端面经之xss
CSRF攻击指的是跨站请求伪造攻击，攻击者诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求，如果用户在被攻击网站中保存了登录状态，那么攻击者就可以利用这个登录状态，绕过后台的用户验证，冒充用户向服务器执行一些操作。CSRF攻击的本质是利用cookie会在同源请求中携带发送给服务器的特点，以此来实现用户的冒充。
常见的CSRF攻击有三种：

• GET类型的CSRF攻击，比如在网站中的一个img标签里构建一个请求，当用户打开这个网站的时候就会自动发起提交。
• POST类型的CSRF攻击，比如构建一个表单，然后隐藏它，当用户进入页面时，自动提交这个表单。
• 链接类型的CSRF攻击，比如在a标签的hrf属性里构建一个请求，然后诱导用户去点击。

怎么去预防csrf攻击？

• 阻止不明外域的访问
  同源检测
  Samesite Cookie
• 提交时要求附加本域才能获取的信息
  CSRF Token
  双重Cookie验证

模块化？

模块化已经是现代前端开发中不可或缺的一部分了，把复杂的问题分解成相对独立的模块，这样的设计可以降低程序复杂性，提高代码的重用，也有利于团队协作开发与后期的维护和扩展
从 ECMAScript2015 开始引入了模块的概念，我们称为：ECMAScript Module，简称：ESM。

• 核心：
  独立的作用域与依赖关系处理
  如何导出模块内部数据
  如果导入外部模块数据
• 模块化解决的问题
  解决命名污染，全局污染，变量冲突等问题
  内聚私有，变量不能被外面访问到
  怎么引入其它模块，怎样暴露出接口给其它模块
  引入其他模块可能存在循环引用的问题
  前端模块化

对跨端的理解？

浅谈跨端技术

H5页面如何保存原生的登陆状态？

抓包工具背后的原理是什么？

抓包工具会在网络传输的某个层次或节点截获收发的数据
抓包工具原理与实践

如何解决长列表渲染问题？

提升页面的秒开率的手段有哪些？

接口请求耗时过长怎么办？

函数式组件和类组件有什么区别？

如何加快webpack的打包速度？

wepack 的打包优化没有固定的模式，需要我们针对项目去进行分块、拆包、压缩等，常见的优化思路主要分为四部分

• 优化搜索时间，即开始打包时获取所有的依赖模块的时间
• 优化解析时间，即根据配置的 loader 解析相应文件所花费的时间
• 优化压缩时间，即 wepack 对代码进行优化压缩所花费的时间
• 优化二次打包时间，即重新打包时所花费的时间

include和exclude的使用场景？

多个entry还是SPA吗？

webpack的分包策略了解过吗？

Tree Shaking背后的原理？

说说对事件代理的理解？

promise背后的原理是什么？

说一下V8垃圾回收机制？

哪些情况会造成内存泄漏？

Array.sort的实现原理？快排讲一下

知道Sleep吗？怎么实现？

用过promise吗？说下原理？

普通函数和箭头函数区别

Let、const和var的区别

怎么在ul里面插入li?

  <script>
        let ul = document.querySelector('ul'); //获取父元素
        let li = document.createElement('li'); //获取子元素
        li.innerText = '子元素'; //给子元素添加文字
        ul.appendChild(li) //插入到父元素中
    </script>

1
2
3
4
5
6
7

css权重怎么判断？用过not么

说下盒子模型?

positional的属性及含义？如果absolute外面再包一个absolute,是什么效果？

当absolute元素覆盖另一个absolute元素，且HTML端不方便调整DOM的先后顺序时，需要设置z-index: 1

做过移动端么？Rem和em的区别？vm和vh的区别？

• vw
  css3新单位，view width的简写，是指可视窗口的宽度。假如宽度是1200px的话。那10vw就是120px
  举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。
• vh
  css3新单位，view height的简写，是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px
  举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。
• vm
  css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm 举个例子：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px。

https和http区别，https连接过程？怎么优化网络链接速度？

tcp/ip协议了解么？说说拥塞控制与滑动窗口？

图片懒加载的原理？

懒加载原理 一张图片就是一个 < img> 标签，浏览器是否发起请求图片是根据 < img> 的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给 < img> 的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。

说说vue的生命周期钩子？

写过哪些自定义hooks,怎么实现的？

flex:1是什么含义，flex都用过哪些属性？

实现两栏布局有哪些方法（左边盒子给或不给宽度），怎么画一个三角形？

CSS-两栏布局六种实现方式
【css面试题】三角形的做法

说下暂时性死区与作用域？

ES6新增的let、const关键字声明的变量会产生块级作用域，如果变量在当前作用域中被创建之前被创建出来，由于此时还未完成语法绑定，如果我们访问或使用该变量，就会产生暂时性死区的问题，由此我们可以得知，从变量的创建到语法绑定之间这一段空间，我们就可以理解为‘暂时性死区’
作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。换句话说，作用域决定了代码区块中变量和其他资源的可见性。
JS中的作用域

知道函数防抖节流么？箭头函数手写防抖看看？

讲一下apply？箭头函数的特点？

ES6哪些新特性？

介绍下set,map及其遍历方法

知道WeakMap,WeakSet？

js v8与nodejs的区别？

和直接操作DOM元素相比，Vue是操作虚拟DOM元素的，这有什么好处吗？

速度快，减小了页面渲染过程的次数
vue 的虚拟 DOM 有什么好处？

JavaScript中数组的sort方法实现的底层原理是什么？（不知道）你了解哪些排序算法？

当 n<=10 时，采用插入排序；
当 n>10 时，采用三路快速排序；
10 n>1000，每隔 200~215 个元素挑出一个元素，放到一个新数组中，然后对它排序，找到中间位置的数，以此作为中位数。

你做的项目中你认为最困难的部分是什么？你如何解决的呢？有做首页优化吗？优化的标准是什么？

计算数组中，最大连续增长子序列的长度，如：[1,2,3,4,1,2,3,4,5,1,2,3]结果为5？

手写flat

滑动窗口最大值A

至多包含两个不同字符的最长子串不会

为什么js是单线程的？

这主要和js的用途有关，js是作为浏览器的脚本语言，主要是实现用户与浏览器的交互，以及操作dom；这决定了它只能是单线程，否则会带来很复杂的同步问题。
举个例子：如果js被设计了多线程，如果有一个线程要修改一个dom元素，另一个线程要删除这个dom元素，此时浏览器就会一脸茫然，不知所措。所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变

ES6解构语法？

手写：防抖和节流A

手写：树形结构转换题

前端手写题之 树

手写：发布订阅+观察者，说出区别

// 发布订阅模式
class EventEmitter {
    constructor() {
        // 事件对象，存放订阅的名字和事件
        this.events = {};
    }
    // 订阅事件的方法
    on(eventName,callback) {
       if (!this.events[eventName]) {
           // 注意时数据，一个名字可以订阅多个事件函数
           this.events[eventName] = [callback]
       } else  {
          // 存在则push到指定数组的尾部保存
           this.events[eventName].push(callback)
       }
    }
    // 触发事件的方法
    emit(eventName) {
        // 遍历执行所有订阅的事件
       this.events[eventName] && this.events[eventName].forEach(cb => cb());
    }
    // 移除订阅事件
    removeListener(eventName, callback) {
        if (this.events[eventName]) {
            this.events[eventName] = this.events[eventName].filter(cb => cb != callback)
        }
    }
    // 只执行一次订阅的事件，然后移除
    once(eventName,callback) {
        // 绑定的时fn, 执行的时候会触发fn函数
        let fn = () => {
           callback(); // fn函数中调用原有的callback
           this.removeListener(eventName,fn); // 删除fn, 再次执行的时候之后执行一次
        }
        this.on(eventName,fn)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

算法：最短回文串

214. 最短回文串

算法：两个自然数组成的数组um1,num2,选出若干个数字组合成一个数，要求取出的数字顺序保持一致，求满足该条件的最小数，返回一个表示该最小数的长度为k的数组。

为什么要阻止跨域？有具体例子嘛？

浏览器阻止跨域请求的原因是同源策略"，"同源策略"主要解决的问题是浏览器的安全问题，同源是协议、域名、端口都相同，非同源是只要协议、域名、端口有一个不同就会造成非同源。
跨域访问会造成很多安全问题，下面我们来看一下常见的两种跨域请求：
ajax 请求：A.com 中 请求 B.com 的接口，这个时候请求会带上 B.com 的 cookie，通常会有登录信息之类的，我们称之为 CSRF攻击
dom 操作：A.com 中使用 iframe 嵌套了 B.com 的广告，这时候如果 B.com 对 A.com 中的 dom 任意操作，那么主网站 A.com 就崩了

如何实现跨域？

聊聊HTTP缓存？

聊聊HTTPS？

聊聊HTTP2 vs HTTP3？

聊聊CDN？

CDN的全称是Content Delivery Network，即内容分发网络。由于CDN是为加快网络访问速度而被优化的网络覆盖层，因此被形象地称为“网络加速器”。
CDN可以加快用户访问网络资源的速度和稳定性，减轻源服务器的访问压力。
前端必需了解的CDN知识

你对Node.js多了解？

History改动怎么监听？

JavaScript如何实现history路由变化监听

Vue如何实现双向绑定的？

vue的双向绑定指的是数据变化更新视图，视图变化更新数据。
视图变化更新数据一般就采用事件监听的方式就可以了，数据变化更新视图就需要涉及响应式原理。
vue2.x的响应式原理的基础是Object.defineProperty属性。利用Object.defineProperty劫持对象的访问器，在属性值发生变化时我们可以获取变化，然后根据变化进行后续响应

原生DOM API熟悉嘛？

JS中常见原生DOM操作API

JS继承的几种方式，有什么差异度？

聊聊你对不同网络请求Method的理解？

聊聊从URL输入到页面展示的过程？

跨域请求的JsonP是怎么实现的

你对浏览器的cookie和本地存储了解多少？

有个应用场景，你在淘宝登录之后请求到天猫页面（不同子域），登录状态是保留的，如何实现的？

简单来说，单点登录就是在多个系统中，用户只需一次登录，各个系统即可感知该用户已经登录。

说一下浏览器的渲染过程

js对同一个DOM元素进行重复读写，会引起几次重排，会出什么问题，怎么解决？

前端性能优化的方案？

前端性能优化 24 条建议

首屏加载怎么优化？

1. http缓存（强缓存和协商缓存), 性价比最高的一个优化方式。需注意的是，浏览器不缓存XHR接口，自己可根据业务特性动态地选择缓存策略。比如一个体积很大的接口，但内容变更频率不是很频繁，这种情况就适合用协商缓存。
2. cdn分发（减少传输距离）。通过在多台服务器部署相同的副本，当用户访问时，dns服务器就近（物理距离）选择一台文件服务器并返回它的ip。
3. 前端的资源动态加载：

• 路由动态加载
• 组件动态加载
• 图片懒加载(offScreen Image)，越来越多的浏览器支持原生的懒加载，通过给img标签加上loading="lazy来开启懒加载模式。

4. 合并请求。这点在串行接口的场景中作用很明显，比如有两个串行的接口A和B，需要先请求A，然后根据接口A的返回结果去请求接口B。假如server和client的物理距离为D，那么这个串行的场景传输的物理路程为4D。如果合并成一个接口，物理路程可减小为2D。
5. 页面使用骨架屏。意思是在首屏加载完成之前，通过渲染一些简单元素进行占位。骨架屏的好处在于可以减少用户等待时的急躁情绪。这点很有效，在很多成熟的网站都有大量应用。没有骨架屏的话，一个loading图也是可以的。
6. 使用ssr渲染。
7. service worker：通过sw离线更新缓存的能力，理论上能做到每次访问页面都无需下载html，且所有静态资源都已经在本地有缓存。
8. 引入http2.0。http2.0对比http1.1，最主要的提升是传输性能，在接口小而多的时候性能优势会更加明显。
9. 利用好http压缩。即使是最普通的gzip，也能把bootstrap.min.css压缩到原来的17%。可见，压缩的效果非常明显，特别是对于文本类的静态资源。另外，接口也是能压缩的。接口不大的话可以不用压缩，因为性价比低（考虑压缩和解压的时间）。值得注意的是，因为压缩算法的特性，文件越大，压缩效果会越好。

前端工程化webpack是如何使用的？

webpack的loaders和plugins的区别？有自己写过或者去了解自定义Lloaders、plugins吗？

有使用nodejs搭建后端应用吗

说一下ES6的异步编程吧，generator?promise?

有移动无线端的开发经验吗？有去了解相关技术吗？

cookie的同源，path，domain？

Cookie的domain以及path详解

重定向状态码：301 302 分别什么意思？

301 redirect: 301 代表永久性转移(Permanently Moved)
302 redirect: 302 代表暂时性转移(Temporarily Moved )

拿到一个需求，是怎么需求设计分析的，讲讲思路？

1、准确理解并描述客户需求

2、帮助客户挖掘需求

3、分析客户需求的可行性

4、剔除不合理的客户诉求

5、将离散需求进行整合

js中判断变量类型的方法有哪些

追问：如何判断变量是null类型？

object.prototype.toString.call(nul);     //"[object null]"

1
2

谈谈this指向问题，改变this指向的方法以及区别?

更改this指向的方法及其区别

canvas的一些图像操作为什么对图片有跨域限制？

对于首屏加载的优化有哪些？

• Vue-Router路由懒加载（利用Webpack的代码切割）
• 使用CDN加速，将通用的库从vendor进行抽离
• Nginx的gzip压缩
• Vue异步组件
• 服务端渲染SSR
• 如果使用了一些UI库，采用按需加载
• Webpack开启gzip压缩
• 如果首屏为登录页，可以做成多入口
• Service Worker缓存文件处理
• 使用link标签的rel属性设置 prefetch（这段资源将会在未来某个导航或者功能要用到，但是本资源的下载顺序权重比较低，prefetch通常用于加速下一次导航）、preload（preload将会把资源得下载顺序权重提高，使得关键数据提前下载好，优化页面打开速度）

组件懒加载实现原理？

用过哪些页面性能分析工具？

8 种用于前端性能分析工具

谈谈对JS的理解?

原型链的概念，obj.prototype.a=1,obj.prototype.b=[],对于obj的实例obj1以及obj2,修改obj1.a=2的值，obj2.a的值为多少？调用obj1.b.push(1),obj2.b的值为多少？

谈谈对http2.0的理解

谈谈对闭包的理解以及闭包的作用

介绍JS的事件机制?

追问：事件冒泡的应用场景

追问：自定义事件的实现

ajax跨域的解决方法

追问：JSONP的实现原理?

如何实现多页面数据共享

介绍如何在两个页面之间共享、传输数据，ajax、jsop、cors等相关

追问：如何实现不同域名下的多页面数据共享?

追问：如何用localStorage实现不同域名下的多页面数据共享?

100个红球和100个蓝球，放在两个箱子里，只能拿一个球，怎么让红球拿到的概率更大？

怎么保持登陆状态？

token的含义?

md5加密如何实现

单线程与多线程应用各自的优劣

说一下对webpack的了解?

说一下原生ajax发送请求的过程?

说一下对前端安全防御的了解

说一下flex实现居中?

说一下栅格布局如何实现

说一下同步和异步，阻塞和非阻塞的区别

同步一定是阻塞的吗？

说一下css中的px,em和rem

了解服务端渲染吗？

spa应用的缺点？

1.首屏加载速度慢
首屏时需要请求一次，同时还要发送一次请求，两次请求回来了，首屏才会展示出来。相对于多页应用，首屏时间慢。
2.不易于SEO
SEO效果差，因为搜索引擎只认识里的内容，不认识的内容，而单页应用的内容都是靠渲染生成出来的，搜索引擎不识别这部分内容，也就不会给一个好的排名，会导致SPA应用做出来的网页在百度和谷歌上的排名差。

问flex布局如何实现三等分？

<style>
        .wrap{
            display: flex;
            width: 500px;
            height: 200px;
        }
        .item{
            border: 1px solid #000;
            flex: 1;
        }
 </style>
<div class="wrap">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

vue生命周期，

父子兄弟组件通信

webpack build原理?

Webpack 的运行流程是一个串行的过程,从启动到结束会依次执行以下流程 :

1. 初始化参数：从配置文件和 Shell 语句中读取与合并参数,得出最终的参数。
2. 开始编译：用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译。
3. 确定入口：根据配置中的 entry 找出所有的入口文件。
4. 编译模块：从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。
5. 完成模块编译：在经过第 4 步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系。
6. 输出资源：根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会。
7. 输出完成：在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。

在以上过程中,Webpack 会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。

项目目录配置