（-）1.自我介绍 主要按照自己的简历从头到尾简单介绍了一遍。 （ 最近这几年的项目都是前后端分离，同会同时去开发前端和后端 我应该属于全栈，目前的后端技能重一些，前端技能主要是使用JS和jQuery去开发，vue有使用过，那时主要是为了解决数据绑定功能的需求。以后有机会再慢慢研究vue，react，nodejs ） （-）2.能挑简历里的一个项目具体说一说吗？ 腾讯的面试官普遍偏向于深挖简历里写的项目，所以对于写在简历里的内容一定要非常熟练，做到张口就来。这并不意味着面试前端岗位面试官就不会问你其他技术栈的项目，我简历里有几个深度学习的项目，腾讯的每个面试官都会问几句。面试就以这个项目涉及的技术栈贯穿始终。 （ 那我举最近的一个项目，同时也是我开发时间最长的项目。 统计处的前端和后端都有参与，同时用不同语言去开发。其中里面有一个搜索系统从设计和开发都是我一个人独立完成，后端是自己写php MVC框架，前端是用原生js写的应用。前端主要通过ajax和后端交流数据实现无刷新更新数据。交流过程用到了主流的json web token做签名验证。整个搜索系统从前端和后端也融合了第三方系统的的API交流，例如统计处有一个人工智能分析部门，他们写了一个系统，那个系统就融合到了我的mvc框架里面，前端用ajax方式获取数据到后端，然后后端用php调用他们的python系统，同时需要对他们的python系统做一些修改，以配合两个系统的无缝结合。 这里面大概实现了微服务架构的思想，主要通过API将不同的系统和不同语言融合在一起。 ） 技术栈：React + antd, React hook + TypeScript 涉及领域：toB管理端，视频web播放端，互动直播web客户端 （     typeof运算符，用来检测一个变量的类型     或者，Object.prototype.toString.call，能判断所有类型 ） 3.React的生命周期，说说你知道的生命周期函数。 （-）4.如何验证用户登录，第三方登录（微信登录）的原理是什么。 {     第一步：请求code     第二步：通过code获取access\_token     第三步：通过access\_token调用接口 } Vue的特点： 1.轻量级的框架 2.双向数据绑定 3.指令化 4.插件化 vue原理 1.建立虚拟DOM Tree 2.通过Object.defineProperty()进行数据变化拦截 3.截取到的数据变化，通过发布者-订阅者模式，触发观察者模式,从而改变虚拟DOM中的具体数据 4.通过改变虚拟DOM元素值，从而改变最后渲染dom树的值，完成双向绑定 因为我有提到在项目里做了用户登录和第三方登录，所以面试官问得很细。 （-）5.cookie是什么？cookie的字段有哪些？ {     储存在用户本地终端上的数据，一般是纯文本文件。     name字段：名称     value字段：cookie的值     domain字段：为可以访问此cookie的域名，顶级域名只能设置domain为顶级域名，不能设置为二级域名或者三级域名，否则cookie无法生成。二级域名能读取设置了domain为顶级域名或者自身的cookie，不能读取其他二级域名domain的cookie。所以要想cookie在多个二级域名中共享，需要设置domain为顶级域名，这样就可以在所有二级域名里面或者到这个cookie的值了。     path字段：为可以访问此cookie的页面路径。 比如domain是abc.com,path是/test，那么只有/test路径下的页面可以读取此cookie。     Size字段：设置cookie的大小     http字段：cookie的httponly属性。若为true，则只有在http请求头中会带有此cookie的信息，而不能通过document.cookie来访问此cookie     expires/Max-Age字段：设置cookie的过期时间。不设置的话默认值是Session，意思是cookie会和session一起失效。当浏览器关闭(不是浏览器标签页，而是整个浏览器) 后，此cookie失效。     secure字段：设置是否只能通过https来传递此条cookie } cookie的缺点，最大存储4KB http请求时需要发送到服务端，增加请求数据量 （-）6.浏览器缓存知道哪些？Local storage和cookie的区别是什么？ 1.浏览器缓存：缓存文件，比如html、css、js、image(jpg\\png\\gif) pdf、MP4、MP3等-----提升访问速度； 2.cookie：http header 里的一个字段，保持一些很小的信息，会随着http request发送到后端，一般代码使用key：value ，可保存登录状态； 3.local storage：跟cookie类似，但不会发送到服务器，记录用户的一些行为和配置。 （-）7.Local storage、session storage有什么区别？ （ localstorage数据会永久存储，除非代码或手动删除 sessionStorage数据只存在于当前会话，浏览器关闭则清空 主流项目中，localstorage使用会多一些 ） （-）8.在项目里如何运用cookie处理用户信息的？ {     获取 cookie - this.cookie     cookie 配置     设置 cookie - this.cookie("theme", "default"); //将 cookie theme 值设置为 default } （-）9.有涉及到web安全方面吗？说说常见的攻击方式？XSS和CSRF，解决方案 {     XSS（跨站脚本攻击）防御（一般在用户保存内容时）     1.替换特殊字符，和转义字符，如英文括号， < 变为的 &gt;     1.1.在js敏感代码，如的左右括号转化为专用字符（&lt;script&gt;） 直接显示，而不会作为脚本执行 1.2.内容出现单双引号，需要替换 CSRF（跨站请求伪造）防御     1.使用POST接口，增加了跨域成本，因为需要服务端通过跨域设置，大大避免了CSRF攻击     2.增加验证，如密码，短信验证码，指纹等 } （-）10.跨域问题及解决方案？JSONP、CORS代理 { 在浏览器中，为了保护用户的数据的私密性，出现了一种限制规则，叫做“同源策略”，这个策略的诞生就是浏览器对协议不同，域名不同，端口号不同的两个服务器各自的数据进行的一种保护。 解决跨域的三种方式，JSONP、CORS、服务器代理。一般推荐使用CORS方法 CORS全称是"跨域资源共享"（Cross\-originresourcesharing）。 CORS方法是解决跨域最简单粗暴的一种方法，只要服务器实现了CORS接口，就可以跨源通信。在我们项目开发中，后端（node搭建的express服务器）可以在接口响应中加入下面代码，则前端就可以访问后端接口了，但是这种方式是需要后端给前端开放权限才可以。 因此，实现CORS通信的关键是服务器。 前端可以使用可以处理JSON数据格式的script标签来解决跨域，而JSONP的核心理念就是目标页面回调本地页面的方法,并带入参数。 一般带src属性的标签imgscriptiframe这三个标签都不受是否跨域的影响，使用回调＋script标签的src属性来跳过浏览器的同源策略限制，请求接口，而这种方式，也称之为JSONP。 一般不会使用的方法：由于后端不存在跨域，临时新建一个解决跨域的服务端，获取数据源，再返回前端。 } （-）11.说说你知道的http状态码 （ 常用得状态码 200成功 301永久重定向（配合location，浏览器自动处理） 302临时重定向（配合location，浏览器自动处理） 304资源未被修改 403没有权限 404资源未找到 500服务端错误 504网关超时 1xx服务器收到请求 2xx请求成功200 3xx重定向如302 4xx客户端错误如404 5xx服务端错误如500 ） http得method get获取数据 post新建数据 patch/put更新数据 delete删除数据 restfulapi 一种新的API设计方法 传统API设计：把每个url当作一个功能 restfulapi设计：把每个url当作一个唯一的资源 （-）12.js异步加载的方式有哪些？ { 使js文件脱离html解析的瀑布流加载，从而使js可以并行下载。     1.比较常用的写法是动态的添加一个script标签，叫做ScriptDOMElement     2.$(document).ready() 需要引入jquery，兼容所有浏览器     3.使用onload方法实现异步加载 4.标签的async\="async"属性 5.标签的defer\="defer"属性 } （-）13.webpack用过吗？简单说一说 ( 有了解。Webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 Webpack可以将多种静态资源js、css、less转换成一个静态文件，减少了页面的请求。 主要承担如下功能：     1.打包：将多个文件打包成一个文件，减少服务器压力和下载带宽     2.转换：将预编译语言转换成浏览器识别的语言     3.优化：性能优化 ) （-）14.从输入URL到浏览器显示页面经过了什么？ { // 这个过程可以大致分为两个部分：网络通信和页面渲染。 // 网络通信：应用层、传输层、网络层、数据链路层。 // 在浏览器中输入url // 1.应用层DNS解析域名 // 2.应用层客户端发送HTTP请求 // 3.传输层TCP传输报文 // 4.网络层IP协议查询MAC地址 // 5.数据到达数据链路层 // 6.服务器接收数据 // 7.服务器响应请求 // 8.服务器返回相应文件 这个过程可以大致分为两个部分：加载过程和页面渲染。 在浏览器中输入url: 加载过程：     1.DNS解析：域名\->IP地址     2.浏览器依据IP地址向服务器发起http请求     3.服务器处理http请求，并返回给浏览器 浏览器渲染页面的过程：     1.依据HTML代码生成DOMTree     2.依据CSS代码生成CSSOM     3.将DOMTree和CSSOM整合行程RenderTree     4.依据RenderTree渲染页面     5.遇到则暂停渲染，优先加载并执行JS代码，完成再继续     6.直至把RenderTree渲染完成 } ( ajax请求get和post的区别？ get一般用于查询操作，post一般是用户提交操作 get参数拼接在url上，post放在请求体内（数据体积可更大） 安全性：post易于防止CSRF call和apply的区别？ ) （-）15.浏览器缓存机制，强缓存、协商缓存？ { 缓存定义: 1.浏览器在本地磁盘上将用户之前请求的数据存储起来，当访问者再次需要改数据的 时候无需再次发送请求，直接从浏览器本地获取数据 1.强缓存 1.不会向服务器发送请求，直接从本地缓存中获取数据 2.请求资源的的状态码为: 200ok(frommemorycache) 2.协商缓存 1.向服务器发送请求，服务器会根据请求头的资源判断是否命中协商缓存 2.如果命中，则返回304状态码通知浏览器从缓存中读取资源 3.强缓存 & 协商缓存的共同点 1.都是从浏览器端读取资源 4.强缓存VS协商缓存的不同点 1.强缓存不发请求给服务器 2.协商缓存发请求给服务器，根据服务器返回的信息决定是否使用缓存 } 16.vue和react的区别都有什么？ 17.与ES5相比，React的ES6语法有何不同？ 18.什么情况会引起组建重渲染？ 19.setState()函数是同步的还是异步的？ 20.介绍一下ReactRedux的工作流程。 21.解释Reducer的作用。 22.项目中有用到react路由吗？简单说一下。 23.情景题：目前需要实现一个组件，它会根据父组件提供的参数自动生成多个表单，如何实现？传参设计，内部生成form如何设计，如何保证每个表单是独立的... （-）24.讲一下你知道的前端性能优化方式。 { 多使用内存，缓存或其他方法 减少CPU计算量，减少网络加载耗时 压缩文件资源，例如css，js 减少刷新页面的操作，多用js做无刷新的更新数据 减少直接访问数据库，尽量避免重负获取相同数据，适当时候做一下数据缓存 防止别人盗链 适当使用CDN，可以就近获取所需资源，更快的访问速度 } 防抖debounce 用户输入结束或暂停时，才会触发change事件 节流throttle 无论拖拽速度多快，都会每隔100ms触发一次 25.说说js操作数组的API （-）26.ts和js的区别？ {     1.ts是静态类语言，可以做到声明即文档，js是动态类语言相对更灵活。     2.ts是js的超集，即你可以在ts中使用原生js语法。     3.ts更易于维护和拓展     4.ts对比js基础类型上，增加了void/never/any/元组/枚举/以及一些高级类型     5.js没有重载概念，ts有可以重载     6.JS在在运行时，才会抛出错误，而ts在不运行的时候也发现错误 } 27.useEffect()怎么使用？ 28.useEffect()怎么使用？ 算法题 套路简单题 1.快速排序 vararr = \[1, 3, 5, 2, 4\]; for (vari\=0;i < arr.length;i++) {  } 2.二分搜索