找工作流程

看面试题 > 写简历 > 投简历 > 与hr交流 > 电话联系 > 获取到面试机会 > 开始面试（腾讯会议、现场面试）
开始面试：
第一步：自我介绍，项目，项目经历
第二步：进入问题环节
第三步：还有什么要问的
第四步：结束
image.png

前端学什么

  1. 首先知道是什么数据类型
  3. 技术（一定要掌握） + 原理（和表达有关）+ 综合考察、应用场景、性能、安全、

[HTML]

  1. HTML4.0、HTML5
  3. 1、简述一下src与href的区别 【GET请求】
  5.     src：script、img、iframe，audio，video
  7.     href：link、a
  1. // 用于当前文档和引用文档之间建立联系
  2. <a href="http://baidu.com"></a>
  3. <link rel="stylesheet" type="text/css" href="http://baidu.com"/>
  5. // 用户替换当前的内容
  6. <script type="text/javascript" src="http://baidu.com"></script>
  7. <img src="http://baidu.com"/>
  8. <iframe src="http://baidu.com" width="" height=""></iframe>
  9. <audio src="http://baidu.com"></audio>
  10. <video width="800" height="">
  11.     <source src="myvideo.mp4" type="video/mp4"></source>
  12. </video>

[CSS]

  1. CSS2.0、CSS3
  3. 1、盒模型有几种，有什么区别
  5.     标准盒模型和怪异盒模型<br />        标准：元素的尺寸 = 宽度 + 内边距 + 边框 + 外边距 box-sizing: contet-box;
  7.     IE:        元素的尺寸 = 设置宽度                                    box-sizing: border-box;
  9. 2、弹性盒布局模型
  11. 3、css选择器和权重

[JavaScript]

  1. 包括：变量、数据类型、线程、其他

1、数据类型（分类，区别，浅拷贝，深拷贝） typeof、instanceof

  1.     基本数据类型：[https://www.cnblogs.com/Mr-Rshare/p/11434186.html](https://www.cnblogs.com/Mr-Rshare/p/11434186.html)
  3.     number、string、boolean、undefined、null、symbol
  5.     拷贝：[https://www.cnblogs.com/echolun/p/7889848.html](https://www.cnblogs.com/echolun/p/7889848.html)
  7.     浅拷贝：父子对象产生了关联，修改父对象、子对象也会跟着修改
  9.     深拷贝：父子对象没有产生关联、修改父对象、子对象也不会跟着修改
  11.     如何实现深拷贝？思路：使用递归，除了递归，我们还可以借用JSON对象的parse和stringify
  1. /**
  2.  * 通过递归的方式,开辟新的内存地址
  3.  */
  4. function deepCloneByRecursion(obj) {
  5.     var objClone = Array.isArray(obj) ? [] : {};
  6.     if (obj && typeof obj === 'object') {
  7.         for(var key in obj) {
  8.             if (obj[key] && typeof obj[key] === 'object') {
  9.                 objClone[key] = deepCloneByRecursion(obj[key])
  10.             } else {
  11.                 objClone[key] = obj[key];
  12.             }
  13.         }
  14.     }
  15.     return objClone;
  16. }
  1. // 笔试题
  2. // 引用类型值传递
  3. // 当引用类型作为参数传递时，传递到函数内部的不是该参数的值，而是该参数在内存中的引用地址，这和引用类型的定义完全吻合。
  4. function fun1(obj) {
  5.     obj.name = '王二'
  6.     obj.age = 20
  7.     console.log(obj)
  8. }
  9. var o = {
  10.     name: '张三',
  11.     age: 18
  12. }
  13. fun1(o)
  14. console.log(o)     //    {name:'王二',age:20}

2、数组 的常用方法，那些可以改变数组，数组常用的遍历方法有那些？

3、forEach和map有什么区别

4、数组和对象有哪些遍历方式

  1. 对象
  2. 1、for in循环
  3. 2、对象自身的方法
  5. 数组
  6. 1、for 循环
  7. 2、for of循环
  8. 3、数组自带的方法：forEach、map、filter

5、什么是递归、闭包是什么，有哪些应用场景 - function

  1.     闭包应用场景：[https://blog.csdn.net/weixin_48659263/article/details/109264312?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2](https://blog.csdn.net/weixin_48659263/article/details/109264312?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2)defaultCTRLISTdefault-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2defaultCTRLISTdefault-1.nonecase
  1. 什么是递归：所谓的递归函数就是在函数体内调用n次本函数。
  2. 什么是闭包：1.函数嵌套函数，内部函数可以引用外部函数的参数和变量（返回一个函数）
  3. 闭包使用场景：setTimeout、回调、函数防抖、封装私有变量

6、创建对象有那些方式、对象Object有哪些静态方法，有哪些实例方法 -object

7、事件循环

  1. 引擎在不停地检查，一遍又一遍，只要同步任务执行完了，引擎就会去检查那些挂起来的异步任务，是不是可以进入主线程了。这种循环检查的机制，就叫做事件循环

8、说说同步和异步、常见异步操作的几种常见处理方法

  1.     异步操作的几种常见处理方法：[https://www.jb51.net/article/186252.htm](https://www.jb51.net/article/186252.htm)
  3.     1、回调函数（setTimeout，setInterval）也称：匿名函数
  1. 问题：setTimeout()中函数加双引号和不加有什么区别？
  2. 关于setTimeout()方法的第一个参数是否加双引号的问题
  3. 第一种参数，传递的是一个global()方法，该方法会在全局变量中寻找。
  5. 使用指针形式作为参数
  6. 第二种参数，传递的是一个global函数名，该方法会在局部变量中寻找
  1.         setTimeout 与 setInterval 会立即执行，但是里面的回调函数进入任务队列
  3.         什么是回调函数：用通俗易懂的白话来说就是一个函数以传参的方式传给另一个函数调用 那么这个函数就叫做是回调函数
  5.         回调地狱问题？    [https://www.cnblogs.com/kaizhadiyishuai/p/12359807.html](https://www.cnblogs.com/kaizhadiyishuai/p/12359807.html)
  7.         回调函数运行原理？回调函数就是一个通过函数指针调用的函数
  9.         回调函数也是闭包（暂时不考虑）
  1. function foo(x) {
  2.     var tmp = 3;
  3.     return function (y) {
  4.         alert(x + y + (++tmp));
  5.     }
  6. }
  7. var bar = foo(2);     // bar 现在是一个闭包
  8. bar(10);              //    16
  1.     2、事件的 发布/订阅【事件模型、事件种类】
  3.         订阅：声明函数
  5.         发布：执行
  7.     3、Promise的方式（优化回调为链式） Promise 提供了一种机制来处理异步操作的结果和错误
  9.         resolve、rejuect | promise().then().catch().finally()
  11.     4、generator
  13.         yield, next()
  1. // Generator 有两个区分于普通函数的部分：    // 一是在 function 后面，函数名之前有个 * ；    // 函数内部有 yield 表达式。function* fn() {    }
  1.     5、优雅的 async/await
  3.         修饰符
  1. // await 命令后面是一个 Promise 对象，它也可以跟其他值，如字符串，布尔值，数值以及普通函数。// await针对所跟不同表达式的处理方式：    // Promise 对象：await 会暂停执行，等待 Promise 对象 resolve，然后恢复 async 函数的执行并返回解析值。    // 非 Promise 对象：直接返回对应的值。function awaitFn() {    return new Promise((resolve) => {        setTimeout(function() {            console.log('testAwait');    // 先执行            resolve();        }, 1000);    });}async function fn() {    await awaitFn();                    // 执行完成才能执行下面的代码    console.log('__asnyc_fn');            // 后执行    return '__asnyc';}

9、js执行顺序、主线程、同步任务、异步任务、微任务、宏任务、任务队列、事件循环机制

  1.     js引擎工作是单线程的，浏览器是多进程的
  3.     GUI渲染线程
  5.     定时器触发线程
  7.     事件触发线程
  9.     异步http请求线程
  11.     [任务队列（容器）、主线程、同步任务、异步任务、宏任务、微任务、事件循环 Event Loop（行为）]
  13.         主线程：单个脚本只能在一个线程上运行
  15.         任务队列：存放异步任务
  17.         同步任务：在主线程上排队执行的任务
  19.         异步任务： 被引擎放在一边，不进入主线程、而进入任务队列的任务;异步任务的写法通常是回调函数
  21.         事件循环（动作）：
  23.             引擎在不停地检查，一遍又一遍，只要同步任务执行完了，引擎就会去检查那些挂起来的异步任务，是不是可以进入主线程了。                这种循环检查的机制，就叫做事件循环
  25.         宏任务：script(整体代码)、setImmediate【IE只有】，setTimeout、setInterval、I/O、UI Rending
  27.         微任务：Promise，process.nextTick（nodejs）、MutationObserver（监听DOM变动接口）、Object.observe（草案）
  29.         macrotask 和 microtask 表示【异步任务】的两种分类。
  31.         面试题：两个异步任务同时存在
  1. setTimeout(function(){    console.log('1')});new Promise(function(resolve){    console.log('2');    resolve();}).then(function(){    console.log('3')});console.log('4');// 最终输出：2，4，3，1
  1. js异步执行的机制：
  3.     [https://blog.csdn.net/lc237423551/article/details/79902106](https://blog.csdn.net/lc237423551/article/details/79902106)
  5.     script整体（第一次事件循环宏任务） > 微任务 > 宏任务

10、浏览器的标签页之间是如何通信的

  1. 本题主要考察数据存储的知识方法一：使用localStorage方法二、使用cookie+setInterval

11、如何统计淘宝首页标签使用前三？

  1. var els = document.getElementsByTagName('*');var elArray = Array.prototype.slice.call(els);var temp = [];var rank = {};elArray.forEach(function(item, index) {    if (temp.indexOf(item.tagName) == -1) {        temp.push(item.tagName);          }    if (!rank[item.tagName]) {        rank[item.tagName] = 1;    } else {         rank[item.tagName] += 1;    }    elArray[index] = item.tagName;});var total = [];for(var key in rank) {    var _obj = {        key: key,        value: rank[key]    };    total.push(_obj);}total.sort(function(a, b) {    return b.value - a.value;})// 标砖参考：https://blog.csdn.net/weixin_44369568/article/details/102548258elArray.reduce(function(item1, item2, index, array) {    return item1[item2] = (item1[item2] || 0) + 1;})

12、前端页面的体验和访问速度

  1. 1、组件懒加载2、图片懒加载3、UI组件按需加载4、对于文件比较大的可以使用cdn5、webpack优化    打包去除.Map文件    压缩JS代码    压缩图片    开启gzip6、使用SSR【服务端渲染】

13：for in 和for of 的区别和原理？

  1.     [https://blog.csdn.net/chengxin123456789/article/details/112386430](https://blog.csdn.net/chengxin123456789/article/details/112386430)
  1. 以下数据结构的有iterator【迭代器】接口的：数组StringArrayMapSetarguments对象Nodelist对象，类数组凡是部署了iterator接口的数据结构都可以使用数组的扩展运算符(…)，和解构赋值等操作 for of。for in 值适合遍历对象for of: 数据结构只要部署里 interator 就可以使用

14：web常见的攻击方式有哪些

  1. 1、XSS (Cross Site Scripting)，跨站脚本攻击    例如input中可以使用：<script>alert('XSS');</script>恶意代码2、CSRF（Cross-site request forgery）跨站请求伪造：    攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求3、SQL注入    是通过将恶意的 Sql查询或添加语句插入到应用的输入参数中

15：防抖（throttle）和 节流（debounce）

  1. 节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时相同点：    都可以通过使用 setTimeout 实现    目的都是，降低回调执行频率。节省计算资源防抖在连续的事件，只需触发一次回调的场景有：    搜索框搜索输入。只需用户最后一次输入完，再发送请求    手机号、邮箱验证输入检测    窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。    节流在间隔一段时间执行一次回调的场景有：    滚动加载，加载更多或滚到底部监听    搜索框，搜索联想功能

15：事件模型

  1. 事件流都会经历三个阶段：    事件捕获阶段(capture phase)    从上到下    处于目标阶段(target phase)        触发    事件冒泡阶段(bubbling phase)    从下到上组织事件传播：event.stopPropagation()阻止默认行为：event.preventDefault();element.addEventListener('click', function() {}, '是否在捕获阶段触发 || 默认是false')

16: 说说this

  1. 指向问题1、构造函数的this指向 实例化的对象2、普通函数中的this指向 window对象3、在对象中的方法调用，this指向当前对象4、bind,apply,call 方法调用，this指向第一个参数5、定时器中的this 指向window对象6、ES6中的 this指向父级的this，定义的时候就已经指定了

[ES6]

  1. 1、es6有哪些新特性
  3. 2、变量 和 数据类型 以及 数据类型新增的方法
  5. 3、普通函数和箭头函数最大的区别是
  7. 4、结构赋值
  9. 5、Promise对象、Generator函数 和 async函数

[TypeScript]

  1. 重点还是 Type

[Vue技术栈]

面试题集合：

https://blog.csdn.net/MingL520/article/details/88549999

https://www.cnblogs.com/lanyueff/p/6400785.html

[vue.js]
  1. 由中国人尤雨溪开发
  3. 1、vue的生命周期
  5. 2、组件通信、父组件和孙组件
  7. 3、watch和computed区别
  9.         vue如何监听对象
  1. computed 计算属性    1. 支持缓存，只有依赖数据发生改变，才会重新进行计算    2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化watch 侦听属性    1. 不支持缓存，数据变，直接会触发相应的操作；    2.watch支持异步；    3、监听数据必须是data中声明过或者父组件传递过来的props中的数据，        immediate：组件加载立即触发回调函数执行，　　        deep: 深度监听，　　        obj: {　　            deep: true,　　            handler: function() {　　                　　            }　　        }
  1. 4、nextTick
  1. 下一个任务开始
  1. 5、vue项目怎么初始化
  3. 6、created和mounted有什么区别
  1. created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
  1. 7、v-if 与 v-show 有什么区别
  3. 8、知道slot吗
  1. 默认插槽具名插槽：子组件用name表示插槽的名字，不传为默认插槽    定义：v-slot:content    使用：<template v-slot:content>内容...</template>作用域插槽    父组件使用 v-slot:（简写：#）获取子组件的信息    定义：<slot name="footer" testProps="子组件的值">              <h3>没传footer插槽</h3>         </slot>    使用：        <template v-slot:footer #default="slotProps">          来⾃⼦组件数据：{{slotProps.testProps}}        </template>
  1. 9、什么是虚拟DOM
  1. VNode：虚拟节点用JS对象，来模拟DOM元素和嵌套关系;为了实现页面元素的高效更新；定义真实的DOM虚拟DOM 使用了diff的算法
  1. 10、组件通信
  1. 通过 props 传递【父组件传给子组件】通过 $emit 触发自定义事件【子组件传给父组件】使用 ref 【父组件使用子组件】$parent 或$root【子组件调用父组件】EventBus【兄弟组件】attrs 与 listeners 【祖先传递数据给子孙】Provide 与 Inject 【祖孙之间进行传递】Vuex 【复杂关系的组件数据传递】

11、如何刷新组件

  1. 1、使用v-if2、路由替换

12、vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？

  1. 前端权限控制可以分为四个方面：接口权限    一般用token按钮权限    通过v-if判断    通过自定义指令进行按钮权限的判断菜单权限    菜单与路由分离，菜单由后端返回    菜单和路由都由后端返回路由权限    通过路由钩子做权限判断    且在路由上标记相应的权限信息，每次路由跳转前做校验

13、Vue项目中你是如何解决跨域的呢

  1. JSONP    jsonp缺点：只能实现get一种请求。CORS    CORS （Cross-Origin Resource Sharing，跨域资源共享）    CSRF(跨站请求伪造)Proxy

14、你是怎么处理vue项目中的错误的？

  1. 主要的错误来源包括：1、后端接口错误    通过axios的interceptor实现网络请求的response先进行一层拦截2、代码中本身逻辑错误    设置全局错误处理函数 Vue.config.errorHandler

[VueRouter]
  1. 1、路由的跳转方式有那些（4种）
  5.     router.push
  7.     router.replace
  9.     router.go
  11.     相关知识：HTML5 History新属性
  13. 2、路由传参有几种方式（三种）
  15.     params 和 query  还有 router-link，url中传递参数 :参数
  17. 3、说说路由的生命周期
  19.     实例方法：
  21.     beforeEach
  23.     afterEach
  25. 4、pushState了解吗
  27.     vue-router默认是hash模式，另一种是history模式
  29.     history模式：利用了history.pushState api完成URL的跳转，无需重新加载页面
  31.     1、最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的，history怕刷新
  33.         hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响
  35.     2、404问题
  37.     3、实现模式 pushState、replaceState，state
  39. 5、路由有那些方式
  41.     1、动态路由，路劲相同、组件复用、监听$route，重新渲染
  43.     2、嵌套路由 children
  45.     3、命名路由 name属性 和 params参数
  47.     4、命名视图

[vuex]
  1. 状态管理模式
  3. state > getters > mutations > actions > modules
  5. 1、vuex常见的属性有那些
  7. 2、如何修改state中的值
  9. 3、mutations 和 actions 有什么区别

[vue cli]
  1. 尤雨溪团段开发维护
  3.  Vue.js 开发的标准工具
  5. 可以通过 npm 进行安装

[工具的使用 - vue-cli]

[nodejs]
  1. OpenJS Foundation 开发和维护

[npm]
  1. 由 美国人 isaacs 开发
  3. 包管理器，目前被github收购，GitHub属于微软

[webpack]
  1. OpenJS Foundation 维护
  3. 构建 web 静态文件的工具
  5. webpack 会先打包，然后启动开发服务器，请求服务器时直接给予打包结果
  7. vite是直接启动开发服务器，请求哪个模块再对该模块进行实时编译、按需编译
  • Vite 在开发模式下不需要打包可以直接运行，使用的是 ES6 的模块化加载规则；Vue-CLI 开发模式下必须对项目打包才可以运行
  • Vite 基于缓存的热更新，Vue-CLI 基于 Webpack 的热更新

[Babel]
  1. 下一代 JavaScript 的语法编译器

[ESLint]
  1. OpenJS Foundation 维护
  3. lint：检查程序潜在的错误和代码分析

[PostCSS]
  1. vue中的 scoped 就是通过给元素添加属性 data-v-hash的 模式

[PWA]

[大前端]

硬技术：HTML + CSS + TypeScrit + 框架技术细节、底层原理（Vue、React、小程序、App）

技能：node.js + npm + git

工具：webpack + Jest

服务端语言：Node.js + HTTP + 安全

英文：vuejs.org EngLish

俄文：ru.vuejs.org Русский

中文：cn.vuejs.org 中文

日文：jp.vuejs.org 日本語

韩文：kr.vuejs.org 한국어

越南：vi.vue.js.org Tiếng Việt