实战分享:我的面试经历和前端知识总结(第二部分)
八股文对应届生来说是面试的重中之重,它决定了你能否找到一份不错的工作;对于已经工作的人来说,八股文可以对工作中遇到的问题提供解决办法的基础,当然,积累解决问题的经验同样重要。
1. 数组对象有哪些原生方法
pop、push、shift、unshift、slice、splice、concat、reverse、join、toString、split、forEach、every、indexOf
2. object.is() 的作用
用于确定两个值是否相同,它接受两个参数,这两个参数是要比较的值,并返回一个布尔值指示两个参数是否相同
Object.is(value1,value2)
3. Vue是单向数据流还是双向数据流
单向数据流
4. TS 和 JS的区别
- TS引入了”类“的概念
- TS引入了模块概念,可以把声明,数据,函数和类封装在模块中
- JS没有重载概念,TS有重载
- TS增加了接口interface、泛型、类、类的多态、继承等
- JS有的类型:boolean类型、number类型、string类型、array类型、null、undefined
TS新增的类型:tuplpe类型(元素类型)、enum类型(枚举类型)、any类型(任意类型)、void类型、never类型
5. TCP三次握手
第一次握手:建立链接时,客户端发送syn包到服务器,并进入SYN_SEND状态,等待服务器确认
第二次握手:服务器收到SYN包,必须确认客户的SYN,同时自己也发送一个SYN包,即SYN+ACK包此时服务器进入SYN_RECV状态
第三次握手:客户端收到服务器的SYN+ACK包,向服务器发送确认包ACK,此包发送完毕,客户端和服务器进入ESTABLISHED状态,完成三次握手
注意:
1)必须要三次握手
2)三次握手未完成不能携带数据
6. 3开头的状态码
3XX 重定向
301:永久移动
302:临时移动
304:未修改
7. 与协商缓存有关的响应头与请求头
- 响应头:Last-Modified(资源的最后修改时间) 请求头:If-Modified-Since
- 响应头:ETag(若服务器资源更新,则ETag也会更新) 请求头:If-None-Match
ETag 和 Last-Modified 的区别:ETag是用hash内容对比判断是否资源发生改变
Last-Modified是通过最后一次修改时间来判断资源是否发生改变
8. ElenentUI命名的根据
根据BEM——前端命名方法论,避免命名冲突
9. 什么是原型链?为什么要使用原型链?
一、什么是原型链
原型链就是实例对象和原型对象之间的链接,每个函数都有一个prototype属性,这个prototype属性就是原型对象,我们拿这个函数通过new构造函数创建出来的实例对象,这个实例对象自己会有一个指针(_proto_)指向它的构造函数的原型对象,这样构造函数和实例对象之间就通过(_proto_)连接在一起形成链子
二、为什么要使用原型链1)为了实现继承,简化代码,实现代码重用
2) 只要是这个链条上的内容,都可以被访问和重用
10. 浏览器事件模型
浏览器事件模型主要分为三个阶段:1)捕获阶段 2)目标阶段 3)冒泡阶段
11. JS执行机制(事件循环)
- 先执行执行栈中的同步任务
- 异步任务(回调函数)放入任务队列中
- 一旦任务栈中所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行
12. JS原型继承的方式
1)原型链继承
2)构造函数继承
3)组合继承
4)原型式继承
5)寄生组合式继承
13. ES6中是怎么实现原型链的
Class类
在ES6中新增类的概念,使用class关键字声明一个类,之后这个类来实例化对象,类抽象了对象的公共部分,它泛指某一大类(class)对象特指某一个,通过类实例化一个对象
14. Promise解决了什么问题
- 回调地狱
- 代码的可读性问题
- 信任问题
15. JS的排序方法
- 冒泡排序
- 选择排序
- 插入排序
- 归并排序
- 快速排序
16. CSS中如何修改父元素的前三个子元素的样式
:nth-child() 选择器
1)选择列表中的偶数标签 :nth-child(2n)
2)选择列表中的奇数标签 :nth-child(2n-1)
3)选择从第六个开始的,直到最后 :nth-child(n+6)
4)选择第一个到第六个 :nth-child(-n+6)
5)选择第六个到第九个 :nth-child(n+6):nth-child(-n+9)
所以,前三个 :nth-child(-n+3)
17. CSS选择器优先级
id >= 类 = 属性 = 伪类 > 标签 = 伪元素 > 相邻元素 (>)= 子元素 (>)= 后代
18. CSS中unset,revert,initial,inherit代表什么
- initial 初始
初始默认值- inherit 继承
继承直接父级的对应属性值- unset未设置
表示该属性默认可继承,则值为inherit,否则initial- revert还原
表示样式表中定义的元素属性的默认值。若用户定义样式表中显式设置,则按此设置;否则,按照浏览器定义样式表中的样式;否则等价于unset
19. JS中Number_MAX_SAFE_INTEGER怎么来的
Number.MAX_SAFE_INTEGER是JS里整数的安全的最大值,由于JS用的是IEEE754双精度浮点,可以安全地表示[-2^53+1, 2^53-1]这个范围
20. Vue路由的实现方法
1)编写页面导航,编辑App.vue,添加导航链接
2)页面中组件视图展示设置:编辑入口文件App.vue
3)编写路由映射规则,创建路由模块:src / router / index.js
4)路由对象必须挂在到Vue实例上才能生效,编辑main.js挂载到router
21. 数字证书的作用
- 身份认证作用
- 保密性作用
- 完整性作用
- 防抵赖作用
22. cookie中SameSite属性
Strict / Lax / None
cookie的SameSite属性用来限制第三方Cookie,从而减少安全风险
23. 判断数据类型的方法
一、typeof
typeof返回值 "object", "number", "undefined", "function", "string", "symbol"
typeof返回的值都是字符串类型二、instanceof —— 不能判断基本数据类型,只能判断引用数据类型
instanceof 用来判断数据是否是某个对象的实例,返回一个布尔值
三、constructor
返回布尔值
四、Object.prototype.toString.call()
"万能方法",工作中发常用且准确
24. new操作符都做了什么事
定义:new操作符用于创建一个给定构造函数的实例对象
new做了以下工作:
1)先创建了一个新的对象newObject
2)将新对象newObj与构造函数通过原型链进行链接
3)将构造函数的this绑定到新对象newObj
4)根据构造函数返回类型做判断,如果是值类型,返回newObj;如果是引用类型,就返回这个引用类型得对象
25. 手写new
function newFunc(Func, ...args) {
//1.创建一个实例对象
let newObj = {}
//2.将新对象newObj与构造函数通过原型链进行连接
newObj._proto_ = Func.prototype
//3.将构造函数得this绑定到新对象newObj
const result = Func.apply(newObj, args)
//4.根据构建函数返回类型做判断,如果是值类型,返回newObj;如果是引用类型,就返回这个引用类型得对象
return result instanceof Object ? result :newObj
}
26. CSS中得定位方式
- 静态定位——static
- 相对定位——relative
- 绝对定位——absolute (脱离文档流)
- 固定定位——fixed (脱离文档流)
27. 绝对定位设置top:50%相当于谁来说得
距离它最近得已经定位得父元素得高度
28. git如何把master合并到自己分支
1)切换到主支
git checkout master2)使用git pull把master代码拉到本地
git pull3)切换到自己分支
git checkout XXX4)使用merge把主分支得代码合并到自己分支
git merge master
5)最后push你分支得代码就和主支一样了
git push
29. git常用操作
一、从master仓库拉取
git clone 地址
二、查看所有分支
git branch -a
三、切换到目标分支
git checkout 某分支名
四、拉取目标分支更新内容
git fetch origin 某分支名
五、提交代码
1)查看本地操作(添加,修改,删除)了得文件
git status
2)从远程拉取最新修改
git pull
3)将本地修改了得文件添加到暂存区git add 文件路径(上面status里查到的)
4)添加评论
git commit -m "说明内容"
5)将暂存区得文件提交到远程分支上
git push
git push origin 分支名
六、新建本地分支
git checkout -b 新分支名
把新分支推送到远端
git push origin 新分支名
将本地分支与远端分支进行关联
git branch -- set-upstream-to = origin / 新分支名
七、回退版本
1)reset,回退之后后面的版本就找不到了
git log //查看提交记录,获取到版本号
git reset -- hard 目标版本号 //回退到指定版本
git push -f //强制提交
2)revert 回退之后后面的版本就找不到了
git log //产看提交记录,获取到版本号
git revert --n 目标版本号 //回退到指定版本
git commit -m xxx //提交
git push //推送到远程
30. flex 属性
容器属性:
flex-direction 主轴方向 flex-wrap 如何换行
flex-flow:flex-direction flex-wrap简写形式
justify-content 主轴对齐方式 align-content 多轴对齐方式
align-item 交叉轴对齐方式
项目属性:flex-grow 项目放大比例(默认0) flex-shrink 项目缩小比例(默认1)
flex-basis 占据主轴空间(默认auto)
flex:flex-grow flex-shrink flex-basis 简写形式(默认 0 1 auto)
flex:auto(1 1 auto) flex:none(0 0 auto)
flex:initial(0 1 auto)
31. 常用的深拷贝办法
- JSONparse(JSON.stringify(obj))
- for in 遍历对象,逐个拷贝值
- lodash库 lodash.cloneDeep()
32. for of 和 for in 的区别
for in 适合遍历对象;for of 适合遍历数组
for in 遍历的是key;for of 遍历的是值
33. 判断一个对象是不是数组的方法
1)Array.isArray(arr)
2)arr instanceof Array
3)Object.prototype.toString.call(arr)
34. 事件委托
事件委托,又叫事件代理,就是把原本要绑定在子元素得响应事件委托给父元素,让父元素担当事件监听得职务,原理是DOM元素得事件冒泡
有点是减少内存得占用,新增子对象得时候不再重新绑定。
35. watch 和 computed 的区别
1 computed是计算属性,支持缓存,只有依赖的数据发生了变化,才会重新计算 watch不支持缓存,监听到数据的变化会立刻触发相应的操作 2 computed默认第一次加载的时候就监听 watch如果需要首次加载监听需要设置immediate:true 3 computed不支持异步 watch支持异步监听
36. 手写深拷贝,考虑边缘情况
myDeepClone = function (target,hash = new WeakMap()) {
if (target == null) return target;
if (target !== 'object') return target
if (target instanceof HTMLElement) return target
if (target instanceof RegExp) return new RegExp(target);
if (target instanceof Date) return Date(target);
//避免重复
if (hash.get(target)) return hash.get(taeget);
//创建新的克隆对象或数组
const cloneTarget = Array.isArray(target) ? [] : {};
hash.set(target, cloneTarget)
//返回自身的键组成的数组,且用来处理Symbol作为键名的情况
Reflect.ownKeys(target).forEach(key => {
cloneTarget[key] = myDeepClone(target[key], hash);
})
return cloneTarget
}
37. addEventListener 第三个参数
默认是false,false为冒泡事件,true为捕事件
38. CSS中权重比较
!import > 内联样式 > 内部样式 > 外部样式 > 浏览器默认样式
39. CSS盒模型
一、什么是CSS盒模型
CSS的盒模型有里到外:content、padding、border、margin
CSS盒模型有两种:标准模型、IE模型
二、区别
标准盒模型(content-box) IE盒模型(border-box) 内容就是盒子的边界 边框才是盒子边界 元素的宽度width=内容高度 内容宽度元素的宽度width=内容宽度
40.能不能创建一个没有原型的对象
Object.create(null)
41. CSS用top left定位和transform的区别
1)元素位置
使用top left 定位是直接改变元素真实位置
用transform只是改变了视觉位置
2)两种定位本身的语法
做效果的时候transform比较方便,因为transform的视角是元素本身
3)效率
transform不改变CSS布局,因为渲染行为大多数情况下在元素本身,所以效率比top left要高
42. http1 与 http2 的主要区别
1)二进制传输
http2采用二进制传输,相较于文本传输的http1来说更见安全可靠
2)多路复用
http1 一个连接只能提交一个请求,而http2可以同时处理无数个请求,可以降低连接的占用量,进一步提升网络的吞吐量
3)头部压缩
http2通过gzip与compress对头部进行压缩,并且在客户端与服务端各维护了一份头部索引表,只需要根据索引id就可以进行头部信息的传输,缩小了头部容量,间接提升了传输效率
4)服务端推送
服务端可以主动推送资源给客户端,避免客户端花过多的事件逐个请求资源,这样可以降低整个请求的响应时间
43. XSS是什么以及如何防范
Cross-Site Scripting —— 跨站脚本攻击
(代码注入攻击,攻击者通过在目标网站注入恶意脚本,使之在用户的浏览器上运行,利用这些恶意脚本,攻击者可以获取用户的敏感信息如Cookie,SessionID等,进而危害数据安全)
类型 恶意代码存放的位置 由谁取得恶意代码,并插入到网页上 存储型XSS
后端数据库 HTML 反射性XSS URL HTML DOM型XSS 后端数据库/前端存储/URL 前端JavaScript
- 存储型XSS防范 & 反射型XSS防范
1)改成前端渲染,把代码和数据分离开
2)对HTML做充分转义- DOM型XSS防范
本质上是网站前端JS代码不够严谨,把不可信的数据当作代码执行了,在使用 innerHTML,document.write()要小心,不要把不可信的数据作为HTML插到页面上,而尽量使用 textContent,setAttribute()等
44. https中客户端对公钥证书的验证过程
1)客户端取出提前内置在手机内部的认证机构的公钥
2)用认证机构的公钥去解密公钥证书里的数字签名,从而得到数字指纹
3)客户端对公钥证书的服务器公钥进行数字摘要算法,从而生成数字指纹
4)对比客户端自己生成的数字指纹与解密得到的数字指纹,如果一致则公钥证书验证通过,就可以进行接下来的握手步骤了
45. fadeOut、fadeIn、fadeToggle、fadeTo
- fadeOut 淡出可见元素
- fadeIn 淡入
- fadeToggle 在淡入淡出间切换
- fadeTo 渐变为给定的不透明值
46. 跨域实现方式
一、jsonp请求
利用script标签的跨域特性
二、document.domain
用在主域名相同子域名不同的跨域访问中
三、window.name
window的name属性有了特征:在一个窗口(window)的生命周期内,窗口载入的所有页面都是共享一个window.name,每个页面都有对其重写的权限,并且window.name持久存在在载入过的页面中,不会因为新页面在载入重置
四、window.postMessage
html5新写法,可以通过它向其他的window对象发消息,无论这个window是否同源
五、CORS
使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功或失败
六、Web Sockets
在JS创建了Web Sockets之后,会有一个HTTP请求发送到浏览器以发起连接,取得服务器响应之后,建立的连接会使用HTTP升级从HTTP协议交换为Web Sockets协议
47. 闭包在实际开发中的应用
1)setTimeout,setInterval
当定时器中函数使用函数作用域链的变量时,其实就是闭包
2)回调函数
将某个作用域链的函数传给另一个作用域链,且执行,就是闭包
3)jquery
立即执行函数内,定义的对象,变量,构造函数,构造函数的原型,都可以通过一个闭包放在jquery对象上,供外部使用
48. Vue 组件之间传参方式
- (父子传参)props 父传子
- (父子传参)$emit 子传父
- (父子传参)parents/children
- (父子传参)v-model
- (父子传参).sync (可以帮我们实现父组件向子组件传递的数据的双向绑定)
- (父子传参)attrs/listener(常用于原生组件的封装)$attrs可以获取父组件传进来但没有通过props接收的属性
- (父子/跨级传参)Bus 常用于任意两个组件之间通讯
- (父子/跨级传参)provide/inject (祖先及其后代传值)常用于一些多个组件嵌套封装,一个顶层组件内部的后代组件需要用到顶层组件的数据,就是用这种方式
- (父子/兄弟/跨级传参)$root (可以拿到App.vue里的数据和方法)
- (父子/兄弟/跨级传参)slot (把子组件的数据通过插槽的方式传给父组件使用,然后再插回来)
- (父子/兄弟/跨级传参)$refs常用于父组件调用子组件的方法(如:列表数据变化通知子组件重新渲染)
- (父子/兄弟/跨级传参)Vuex用于任意组件的任意通讯
49. 首屏加载慢怎么排查
一、首屏加载慢的原因
1)网络延时问题
2)资源文件是否过大问题
3)资源是否重复发送请求去加载问题
4)加载脚本的时候,渲染内容堵塞问题
二、解决方案1)路由懒加载
以函数的形式加载路由,只有在解析给定路由的时候才会加载对应的路由组件2)静态资源本地缓存
前端合理使用localStorage,sessionStorage等缓存方式
3)图片压缩
4)减少重复请求
5)UI框架按需加载
借助babel-plugin-component
6)开启GZip压缩
7)优化代码
1. v-if,v-show 的合理使用
2. 使用v-for时为item设置唯一key值
3. 细分vuejs组件
4. 减少watch的数据
8)使用SSR服务端渲染
将指定的异步数据在服务端提前渲染好,再返回给客户端
1. vue可使用Nuxt.js 框架实现服务端渲染
2. react可使用koa2等技术的实现方案
9)使用CDN
1. 解决打包时间太长,打包后代码体积太大,请求慢
2. 服务器网络不稳定带宽不高,使用cdn刻意回避服务器带宽问题
50. 如果定义a:active, a:link, a:visited, a:hover 使之都生效,正确的顺序是?
a:link ——> a:visited ——> a:hover ——> a:active
推荐阅读
-
纯干货分享 | 研发效能提升——敏捷需求篇-而敏捷需求是提升效能的方式中不可或缺的模块之一。 云智慧的敏捷教练——Iris Xu近期在公司做了一场分享,主题为「敏捷需求挖掘和组织方法,交付更高业务价值的产品」。Iris具有丰富的团队敏捷转型实施经验,完成了企业多个团队从传统模式到敏捷转型的落地和实施,积淀了很多的经验。 这次分享主要包含以下2个部分: 第一部分是用户影响地图 第二部分是事件驱动的业务分析Event driven business analysis(以下简称EDBA) 用户影响地图,是一种从业务目标到产品需求映射的需求挖掘和组织的方法。 在软件开发过程中可能会遇到一些问题,比如大家使用不同的业务语言、技术语言,造成角色间的沟通阻碍,还会导致一些问题,比如需求误解、需求传递错误等;这会直接导致产品的功能需求和要实现的业务目标不是映射关系。 但在交付期间,研发人员必须要将这些需求实现交付,他们实则并不清楚这些功能需求产生的原因是什么、要解决客户的哪些痛点。研发人员往往只是拿到了解决方案,需要把它实现,但没有和业务侧一起去思考解决方案是否正确,能否真正的帮助客户解决问题。而用户影响地图通常是能够连接业务目标和产品功能的一种手段。 我们在每次迭代里加入的假设,也就是功能需求。首先把它先实现,再逐步去验证我们每一个小目标是否已经实现,再看下一个目标要是什么。那影响地图就是在这个过程中帮我们不断地去梳理目标和功能之间的关系。 我们在软件开发中可能存在的一些问题 针对这些问题,我们如何避免?先简单介绍做敏捷转型的常规思路: 先做团队级的敏捷,首先把产品、开发、测试人员,还有一些更后端的人员比如交互运维的同学放在一起,组成一个特训团队做交付。这个团队要包含交付过程中所涉及的所有角色。 接着业务敏捷要打通整个业务环节和研发侧的一个交付。上图中可以看到在敏捷中需求是分层管理的,第一层是业务需求,在这个层级是以用户目标和业务目标作为输入进行规划,同时需要去考虑客户的诉求。业务人员通过获取到的业务需求,进一步的和团队一起将其分解为产品需求。所以业务需求其实是我们真正去发布和运营的单元,它可以被独立发布到我们的生产环境上。我们的产品需求其实就是产品的具体功能,它是我们集成和测试的对象,也就是我们最终去部署到系统上的一个基本单元。产品需求再到了我们的开发团队,映射到迭代计划会上要把它分解为相应的技术任务,包括我们平时所说的比如一些前端的开发、后端的开发、测试都是相应的技术任务。所以业务敏捷要达到的目标是需要去持续顺畅高质量的交付业务价值。 将这几个点串起来,形成金字塔结构。最上层我们会把业务目标放在整个金字塔的塔尖。这个业务目标是通过用户的目标以及北极星指标确立的。确认业务目标后再去梳理相应的业务流程,最后生产。另外产品需求包含了操作流程和业务规则,具需求交付时间、工程时间以及我们的一些质量标准的要求。 谈到用户影响的地图,在敏捷江湖上其实有一个传说,大家都有一个说法叫做敏捷需求的“任督二脉”。用户影响地图其实就是任脉,在黑客马拉松上用过的用户故事地图其实叫督脉。所以说用户影响地图是在用户故事地图之前,先帮我们去梳理出我们要做哪些东西。当我们真正识别出我们要实现的业务活动之后,用户故事地图才去梳理我们整个的业务工作流,以及每个工作流节点下所要包含的具体功能和用户故事。所以说用户影响地图需要解决的问题,我们包括以下这些: 首先是范围蔓延,我们在整张地图上,功能和对应的业务目标是要去有一个映射的。这就避免了一些在我们比如有很多干系人参与的会议上,那大家都有不同想法些立场,会提出很多需求(正确以及错误的需求)。这个时候我们会依据目标去看这些需求是否真的是会影响我们的目标。 这里提到的错误需求,比如是利益相关的人提出的、客户认为产品应该有的、某个产品经理需求分析师认为可以有的....但是这些功能在用户影响地图中匹配不到对应目标的话,就需要降低优先级或弃掉。另外,通常我们去制定解决方案的时候,会考虑较完美的实现,导致解决方案括很多的功能。这个时候关键目标至关重要,会帮助我们梳理筛选、确定优先级。 看一下用户影响到地图概貌 总共分为一个三层的结构: 第一层why,你的业务目标哪个是最重要的,为什么?涉及到的角色有哪些? 第二层how ,怎样产生影响?影响用户角色什么样的行为? (不需要去列出所有的影响,基于业务目标) 第三层what,最关键的是在梳理需求时不需一次把所有细节想全,这通常团队中经常遇到的问题。 我们用这个例子来看一下 这是一个客服中心的影响地图,业务目标是 3个月内不增加客服人数的前提下能支持1.5倍的用户数。此业务目标设定是符合 smart 原则的,specific非常的具体,miserable 是可以衡量的,action reoriented是面向活动的, real list 也是很实际的。 量化的目标会指引我们接下来的行动,梳理一个业务目标,尽量去量化,比如 :我们通过打造一条什么样的流水线,能够提高整个部署的效率,时间是原来的 1/2 。这样才是一个能量化的有意义的目标。 回到这幅图, how 层级识别出来的内容,客服角色:想要对它施加的影响,把客户引导到论坛上,帮助客户更容易的跟踪问题,更快速的去定位问题。初级用户:方论坛上找到问题。高级用户:在论坛上回答问题。通过我们这些用户角色,进行活动,完成在不增加客户客服人数的前提下支持更多的用户数量。 最后一个层级,才是我们日常接触比较多的真正的功能的特性和需求,比如引导到客户到论坛上,其实这个产品就需要有一个常见问题的论坛的链接。这个层次需要我们团队进一步地在交付,在每个迭代之前做进一步的梳理,细化成相应的用户故事。 这个是云智慧团队中,自己做的影响地图的范例,可以看下整个的层级结构。序号表示优先级。 那我们用户影响地图可以总结为:
-
实战分享:我的面试经历和前端知识总结(不断更新中)
-
实战分享:我的面试经历和前端知识总结(第二部分)