360公司

原文影石insta360提前批前端一面面经 8.23

自我介绍
为什么学前端？（我本科专业是物联网的）
项目问题（此处省略20分钟）
输入 url 到渲染出页面的过程
引申出怎样将html文件渲染到页面上（不太会答）
BFC
css垂直居中
用到哪些浏览器存储方式？答：localStorage、sessionStorage
还有吗？（不太清楚了）
localStorage的应用场景
es6了解吗？
Promise的出现是为了解决什么问题的？答：回调地狱
具体是怎样的回调地狱？为什么解决了？（答的不是很好）
forEach和map的异同
使用nodejs来做什么？Express框架是做什么的？（这里好久没看了没答出来，太紧张了）
vuex是什么？用来做什么的？
vue中computed和watch的区别
组件间传参方式
做前端遇到的最有挑战性/记忆最深刻的点是什么？以及怎么克服/解决的？
未来的职业规划。
介绍公司及项目组情况。
反问

中间可能有些问题忘了，总的来说问题还是比较简单的，无奈自己准备的不够充分再加上有点紧张，回答的可能不算很好，还不知道结果怎么样。面试官体验也还不错，比较喜欢深挖问题，项目方面也问的比较多。

原文lnsta360影石前端开发一面

主要过程

（答只是思路，而且是我说的，不一定对，勉强回忆到如下内容，不完全）

自我介绍
输入 url 到渲染出页面的过程

答：DNS 解析域名，访问 ip，获得 html，dom 树，加载 js，加载 css 渲染样式
js 的加载方式，然后引申到 async 和 defer 的区别
http为什么是无状态的
src 和 href 的区别
TCP三次握手（没直接问，原问法已忘，我不会回答原问法，引申到这里）
css 如何实现元素水平垂直居中（以前只会水平或垂直居中，好久没复习，没答出来T^T）
visibility 和 hidden区别
闭包、高阶函数有了解吗？
es6了解吗？答：知道Promise（其实也看过class，当时紧张又没想起）
forEach() 和 map() 的区别（我两个记得不是很清楚，只记得一个修改原数组，一个返回新数组）
讲讲Promise。答：是异步解决方案，resolve()后执行回调
讲讲原型链
webpack的配置
Vue 的路由方式：hash 和 map
组件传参方式答：props、自定义事件、eventbus
从上问引申到Vuex，共享数据和传参效果类似
怎么自学前端的，为什么学前端（其实这个在开头问）
职业规划

反问环节

我问了“因为看过公司官网商城商品页特效很酷，是不是css更重要些”，答并没有

“数码产品出新品比较慢，没有新页面开发时前端做些什么”，答维护、更新一些新功能

“有导师带新员工吗”，答有且一对一

总结

整体体验很好，你能感受到面试官在发掘你的亮点，答不上来的时候我很紧张只能不停说抱歉，不过面试官也会说没有关系，然后换一个问题。

晚上7点面的，应该是加班时间了吧，面试官还是很认真、很有耐心，非常谢谢这位面试官。

题外话

又要写毕业论文又要搞毕设的一些调研工作（小组工作让我一个人做，我觉得研一师兄在摸鱼），还要开毕设会议，没有充分的时间准备面试啊，这周末还得交论文初稿。好累...

希望能挺过5月...

原文360前端一二面

自我介绍+项目介绍
问了一大堆微前端问题
前端场景题：请求一个url+参数，参数变化前端向服务器端请求资源并返回资源再渲染列表的过程。
针对参数变化怎么监听到变化，然后如果url有两个参数，其中一个参数发生改变了，1秒后另一个参数发生改变，如何做到只发送一个axios请求。（我是从防抖方面回答的，但面试官想要的答案是让vue-router监听完整的url发生改变这种方式）

可以使用computed属性
了解防抖吗，手写一个防抖或节流函数
算法题：一个数组中找重复数字，并返回这个数字（要求多种方法）他想要的答案是用索引位和当前数据相等来判断这个思路。

就想起来这么多...

原文360前端面经1面

一面：

介绍项目
iframe页面通信
iframe与页面的适应
问了一些fineport的东西（项目中用到了）
事件循环
使用element-ui遇到哪些问题
echarts用过哪些图
promise
async await
原型链
HTTP协议
手写：
给定一个数组，返回数组中重复出现过的元素

0.自我介绍
1.js的作用域有哪些，都讲讲
2.let和var的区别讲讲
3.ES6新特性
4.typescript有没有了解
5.一个项目搭建部署你用了哪些技术或者说工具
6.webpack用来做什么的
7.loader用来做什么的
8.你用过哪些loader
9.浏览器存储 cookie webstorage
10.跨域请求
11.jsonp的原理
12.http状态码
13.盒子模型
14.垂直居中方案
15.最后一个算法题跳台阶

原文奇虎360 前端实习面经连续三面

1、自我介绍（滴滴、好未来集团都有自我介绍）建议写好自我介绍背下来，注意语速。

2、学没学操作系统、计算机网络、数据结构？问到这里我就知道一会肯定会问。

3、到这里才开始真正的问前端的知识。vue双向数据绑定的原理？

4、父子组件如何通信？

5、对vuex和vue-router了解吗？那么请说一下vuex的store分为哪几部分？分别代表什么意思

6、怎么创建动态路由？

7、http状态码常用的有哪几个？

8、进程和线程的区别

9、tcp和udp的优缺点

10、面试官想问算法说了句，这算法也没法面呐。。。。。。我心里暗暗窃喜，可先场面还是逃不过算法的

11、平时写算法用js还是java？js和java都有什么特点

12、vue的生命周期

一面主要问技术了二面聊了聊项目没怎么问问题三面就是hr了

好未来

原文

原文好未来面试8.20

一面

1.CDN

2.强语言转弱语言

3.http/https

4.去重

5.找最长不重复子串


/**
 * @param {string} s
 * @return {number}
 */
const lenghtOfLonggestSubstring = function (s) {
    let left = 0; // 字符串左指针
    let right = 1; // 字符串右指针
    let max = 1; // 最大长度
    let str;
    while (right < s.length) {
        str = s.slice(left, right);
        console.log(s.charAt(right));
        if (str.indexOf(s.charAt(right)) > -1) {
            left++; // 存在重复字符，左指针前移，切掉原字符串第一个字符
            continue; // 结束本次循环
        } else {
            right++;
        }
        max = Math.max(max, right - left);
    }
    return max;  // 6 'vabcdf'
}

console.log(lenghtOfLonggestSubstring('abcabcbb'));

6.事件轮询机制

7.树形结构存储的优点

8.缓存

9.时间复杂度的概念、排序算法的时间复杂度

blog.csdn.net/weixin_4320…

二面

1.跨域

2.https加密

闭包

function a {
    var x = 0;
    return function () {
        return x++;
    }
}
var a1 = a; 
var a2 = a;

console.log(a1()); // ƒ (){ return x++;}
console.log(a2()); // ƒ (){ return x++;}

var a3 = a;
console.log(a3()); // ƒ (){ return x++;}
console.log(a3())  // ƒ (){ return x++;}

function a() {
    var x = 0;
    return function () {
        return x++;
    }
}
var a1 = a();
var a2 = a();

console.log(a1()); // 0
console.log(a2()); // 0

var a3 = a();
console.log(a3()); // 0
console.log(a3())  // 1

原型链

function a(){
   this.x='hello'
}
a.prototype.x='world';
a.x='123';
console.log(a.x);
delete a.x;
console.log(a.x);
delete a.x;
console.log(a.x);
a.x="undefined"
console.log(a.x);

思考💡：为什么 a.x 没有值？

解析
function a() {
    this.x = 'hello'
}
// delete删除的是构造函数中的属性，不能删除原型对象中的属性
a.prototype.x = 'world'; // a的原型上有{x:world}
a.x = '123';   // a.prototype.constrctor = {x:123}
console.log(a.x);// 123
delete a.x; // 删除构造函数的属性
console.log(a.x); // 'undefined'   // a.prototype.constrctor = f a()
delete a.x;  // a.prototype.constrctor = f a()
console.log(a.x); //  'undefined'
a.x = "undefined" //  a.prototype.constrctor = undefined
console.log(a.x); // // 'undefined'

思考💡：正常查找原型

function ClassA() {
    this.x = 'hello';
}

ClassA.prototype.x = 'world';

var a = new ClassA();
a.x = 'what'
console.log(a.x); // 'what'
delete a.x; // 删除了what
console.log(a.x) // 找原型 world
a.x = undefined;
console.log(a.x) // undefined

思考💡：继承构造函数属性

function ClassA() {
    this.x = 'hello';
}

ClassA.prototype.x = 'world';

var a = new ClassA();
console.log(a.x); // 'hello'
delete a.x; // 删除了what
console.log(a.x) // 找原型 world
a.x = undefined;
console.log(a.x) // undefined

5.强制缓存和协商缓存的区别 6.React实现一个dialog 7.实现水平垂直居中 8.闭包的应用 9.call、bind、apply区别

function a(x,y,z){
    cosnole.log(this,x,y,z)
}
a.bind({},'qq','ww')('aa','zz')

11.字符串转对象嵌套 12.es6新增的特性 13.BFC

经纬恒润

整体来说问的比较开放

1.问1<2<3和3<2<1返回什么

在关系运算符中：如果一个操作数是布尔值，则先将其转换为数值，然后再执行比较

console.log(1 < 2 < 3); // true
console.log(3 < 2 < 1); // true
console.log(3 < 2); // 输出false
console.log(false < 1); // false转成0   0<1 true

2.追问有上千个这样的进行比较，怎么快速得到结果我说可以用递归，面试官说reduce方法

3.谈谈你对函数式编程和面向对象编程的理解答不上来，说了下形式上的区别

4.两个毫无关系的页面怎么传递数据面试官科普：render层面、main层面、window层面、浏览器层面

vuex/localStorage

5.深拷贝和浅拷贝我讲了用递归实现深拷贝

6.面试官追问怎么快速实现深拷贝，浅拷贝我记得一个object.assign，完了其他的忘了面试官说基础不行，估计g了

JSON.parse(JSON.stringify)

v-if v-for，能否同时使用

不能，如果非要用的话，就加一个template，或者提前利用computed过滤掉

虚拟dom

将dom树抽象成一个对象

js：

let const
Set Map
箭头函数
异步方案，Promise具体怎么用举个例子，async/await怎么用，是generator的语法糖
class，还有哪些方法可以创建一个类 CSS：
水平垂直居中
flex，flex-grow
两列布局
BFC，如何触发

float 除了none以外的值 display：inline-block、flex overflow：除了visible以外的值 position：absolute、fixed

隐藏元素 display：none、visibility：hidden、opacity:0 计网：
HTTP报文

请求行，请求头，请求体

HTTP请求，GET/POST区别
浏览器缓存 cookie、localstroage、sessionStorage
协商缓存，相关字段

last-modified、ETag

last-modified-since、if-not-match

操作系统：进程/线程

数据结构：数组/链表

自我介绍

项目介绍

你觉得 JS 和 TS 有什么区别

聊聊你知道的 Three.js 的命令

了解过什么 svg 相关的

canvas 渲染原理

项目中的难点, 怎么解决

介绍一下其他项目

对 React 生命周期的了解

Vue 的传值方法

平时用什么工具打包

接触过首屏渲染优化吗

路由懒加载、代码压缩、

聊聊闭包

期望地点和薪资

首先问了一下怎么学习前端的，不是科班怎么会想要从事前端这个岗位，有在看哪些书籍吗。

css选择器有哪些

居中有哪些方案（我问了是水平还是垂直，然后都回答了有定位，flex，grid） js有问到var，let，const的区别

vue里面用到了哪些指令

v-bind :

v-on: @

v-if/v-else/v-show/v-for/v-model/v-cloak/v-pre/v-once

vue组件通信方式

vuex是什么

项目当中的难点是什么（我说了动态路由添加，公共组件的提取和封装）

http响应码

cookie，session，localStorage的区别

盒模型 content-box / border-box

es6常用的用法

箭头函数的特点

get和post的区别

递归求和1-100

数组去重

水平居中，垂直居中

闭包

状态码

百度

原文百度前端校招一二三面(已意向)

一面

1、数组去重

6种方法


let arr1 = [1, 2, 3, 1, 2, 8, 1, 2, 3];
let arr2 = [];
// 1.
for (let i = 0; i < arr1.length; i++) {
  if (arr2.indexOf(arr1[i]) === -1) {
    arr2.push(arr1[i]);
  }
}
console.log(arr2);
let arr3 = [];
// 2.
arr1.forEach((item, index, arr) => {
  arr1.indexOf(item) === index ? arr3.push(item) : null;
});
console.log(arr3);
// 3.
let arr4 = [];
arr4 = [...new Set(arr1)];
console.log(arr4);
// 4.
let arr5 = [];
arr5 = Array.from(new Set(arr1));
console.log(arr5);
// 5.
let arr6 = [];
arr6 = arr1.reduce((prev, cur) => {
  prev.indexOf(cur) === -1 && prev.push(cur);
  return prev;
}, []);
console.log(arr6);

set、forEach、...、Array.from

2、同步任务和异步任务区别

执行顺序、是否阻塞、事件循坏

3、 Promise.all和Promise.race

all ：全部是reslove，才是reslove，有一个是reject就返回reject，成功返回数组(数组顺序和传参顺序一致，但是内部执行顺序不一定书顺序执行)，失败返回reject值

race：返回跑的最快的那个promise的结果，不在乎resolve OR reject

4、 Array.map some forEach区别

map 返回新数组不可以使用return终止

some 返回boolean值有一项不符合就返回不在继续执行

forEach 没有返回值不可以使用return终止

5、三次握手（四次挥手）

未命名文件 (4).png

未命名文件 (3).png

6、http和https的区别

主要涉及收费、加密SSL、对称加密私钥、利用非对称加密公钥对对称加密私钥加密、默认端口、安全性

二面

1、 git常用命令，解释一下rebase作用

rebase会把dev的修改都复制到目标分支最新提交的后面

merge会把2个分支的提交记录按照提交的时间合并到master，并且把2个分支最新的commit合并成一个新的commit

2、js垃圾回收

标记清除、引用计数（循环引用无效）

js会对程序中不在使用的变量和对象等定期的进行内存回收，这个就是垃圾回收

3、常见的处理跨域的方法

jsonp

CORS

node+ webpack+ webpack-dev-server

window.name + iframe

location.hash + iframe

document.domain + iframe

三面

1、前端性能优化

减少http请求次数、减少单次请求时间、图片优化、本次存储、CDN、渲染

2、代理和反向代理

正向代理： 1:1 或者 N：1

反向代理： 1:1 或者 1：N

3、前端技术发展趋势

原文百度秋招提前批前端一二三面面经（已意向书）

一面

1、水平垂直居中的方式

relative + absolute + top 50% left 50% + transform(-50%, -50%)

margin + relative + top 50% + transform(-50%)

relative + absolute + margin auto + 0 0 0 0

relative + absolute + top: 50% left: 50%; + margin 负值

flex

伪元素

table

2、 position 的值

static 、 relative 、 absolute 、 fixed 、 sticky

3、问适配问题

media、rem

4、display:none 和 visivility:hidden 的区别

是否占据位置、是否会被子继承、是否会触发元素绑定的事件、是否支持transtions、是否会发生重绘和回流、是否会渲染

5、数组去重

6、v-show 和 v-if

v-if真正操作dom的增删，首次值如果是false，是不会渲染的，不经常变化用v-if

v-show 通过css的display：none控制，无论是什么值，都会渲染，频繁切换用v-show

7、用vue写一个登录组件

8、闭包（闭包是什么，一般如何产生闭包以及其使用场景）

闭包，是指函数内部再嵌套函数，且在嵌套的函数内有权访问另外一个函数作用域中的变量。

可以创建私有变量

可以延长一个函数中变量的生命周期

9、this（ this是什么以及使用场景）

this的4种调用模式、this的4种绑定方式

函数调用模式 =》默认绑定

方法调用模式 =》隐式绑定

构造函数调用模式 =》 new 绑定

call、apply、bind =》显示绑定

10 、props和 emit的传递

11 、webpack是一个什么样的东西，可以用来干嘛（模块打包工具， vue-cli 和 create-react-app ）

webpack是前端的一个打包工具，或者说是模块化构建工具

12、webpack问题：假设现在有svg等各种图片，这种图片还有各种大小限制。那 webpack如何处理呢？用 file-loader 和 url-loader

file-loader：文件输出到文件夹，并且返回相对的url

url-loader：和file-loader类似，但是文件小的时候，可以以base64的方式引入到代码中去

13、webpack问题：假设现在的代码很强大，有各种 promise 、ES6 等多种很新的语法，那如果想要在 ie 上可以看到，怎么处理？ babel-polyfill。然后问了用的是 webpack最新的版本吗，我说用的 4 。他说 webpack5 很强大，有时间可以去了解一下。

二面

1、设计一个组件需要考虑什么

2、假设让你设计一个主题组件(theme) ，这种组件相对来说比较全局，要你可以随时进行改变，你怎么设计呢~

3、协商缓存

ETag/Last-Modified if-Not-Match/ if-Modified-Since

4、平常自己是否有设计过一些指令，比如 v-bind，或者说现在就想让你设计一个 v-if，怎么设计

v-focus

v-debounce

自己实现v-if

5、前端安全 xss 和 csrf

xss- 跨站脚本攻击

恶意注入script代码，在不知情的情况下，访问了

csrf- 跨站请求伪造

需要登录，需要cookie

6、vuex localStorage 和 sessionStorage ， state 、 mutation 和 action

三面

无基础知识

原文百度秋招提前批前端一面凉经20210811

一面

1、Vue 响应式的原理

Object.defineProperty

发布订阅模式

new Vue、Observer、Complie、Dep、Watcher、View

2、Vue2 的 $set 的实现原理

$set(target,key,val)

判断target是不是基本数据类型，是的话，提示错误，不是的话，进行下一步

判断target是不是数组，是的话，使用数组的splice处理新增和删除，不是的话，进行下一步

target只能是对象了

判断key存在不，存在的话，直接更新，不存在的话，进行下一步

判断对象是不是响应式对象，不是的话，直接给key赋值，如果是响应式对象的话，就需要调用defineReactive，给新加的属性添加依赖了

3、CI/CD 流程的了解

cloud.tencent.com/developer/a…

4、dev server 热更新的实现原理

webapck实现热更新主要是通过webpack-dev-server提供的webpack-dev-middleware和HotModuleReplacementPlugin插件

webpack使用watch可以监听代码的变化，webpack-dev-server中的webpack-dev-middleware充当了中间件的作用，他可以调用webpack的API监听代码的改变，可以和浏览器端建立webSocket长连接，可以告知浏览器端打包的各个阶段，最重要的是发送新变化的hash值

浏览器通过jsonp去请求所有的hash值，然后拼接出文件名，在次请求文件，然后利用HMR完成更新。

5、ES6+ 的代码如何向下兼容

Babel 可以将es6代码转成向后兼容的代码

使用babel-polyfill 可以兼容ie浏览器

6、HTTP1、HTTP2，网络的东西

http1.0 每次请求都要建立连接，关闭连接

http1.1 实现了长连接，默认一直开启，这样就可以避免重复的tcp三次握手，四次挥手了

http2.0 实现了多路复用，最大的特点是一个连接，实现请求的并行发送、采用二进制传输、压缩头部文件

http3.0是基于udp的

7、HTTP 状态码

8、JS 的 sort() 是怎么实现的？常见排序算法有哪些？具体使用场景？时间复杂度分析、空间复杂度分析

9、重定向，永久重定向和临时重定向的区别？浏览器具体会有什么不同的操作？

301 永久重定向浏览器会记忆

比如从a.com 永久重定向到b.com ，浏览器下一次会直接请求b.com，因为浏览器缓存了DNS的解析记录

302 临时重定向浏览器不会记忆

比如从a.com 永久重定向到b.com ，浏览器下一次还是会先请求a.com，然后在跳转到b.com，浏览器不会缓存DNS的解析记录

10、手撕：数组去重，排序，多层嵌套的数组去重排序，含有对象的话怎么办？一步一步改善自己写的程序

前端面试题|各种公司面试题收集

360公司

原文影石insta360提前批前端一面面经 8.23

原文lnsta360影石前端开发一面

原文360前端一二面

原文360前端面经1面

原文0429三六零360前端二面(已offer)

原文奇虎360 前端实习面经连续三面

好未来

原文

原文好未来面试8.20

一面

二面

闭包

原型链

经纬恒润

百度

原文百度前端校招一二三面(已意向)

一面

二面

三面

原文百度秋招提前批前端一二三面面经（已意向书）

一面

二面

三面

原文百度秋招提前批前端一面凉经20210811

一面

前端面试题|各种公司面试题收集

360公司

原文影石insta360提前批前端一面面经 8.23

原文lnsta360影石前端开发一面

原文360前端一二面

原文360前端面经1面

原文0429三六零360前端二面(已offer)

原文 奇虎360 前端实习面经 连续三面

好未来

原文

原文 好未来面试8.20

一面

二面

闭包

原型链

经纬恒润

百度

原文 百度前端校招一二三面(已意向)

一面

二面

三面

原文百度秋招提前批前端一二三面面经（已意向书）

一面

二面

三面

原文百度秋招提前批前端一面凉经20210811

一面

原文奇虎360 前端实习面经连续三面

原文好未来面试8.20

原文百度前端校招一二三面(已意向)