社招面试总结

￡神魔★判官ぃ 2022-05-01 12:51 334阅读 0赞

### JS ###

**js继承**

组合继承：利用call继承父类的属性，用子类的原型等于父类实例去继承父类的方法；

function Parent(name) \{

this.name = name;

Parent.prototype.say = function() \{

console.log(this.name);

\};

function Child(name) \{

Parent.call(this, name)

*Child.prototype = new Parent;*

let c = new Child("YaoChangTuiQueDuan"); c.say()

寄生组合继承

利用call继承父类的属性，用一个干净的函数的原型去等于父类原型，再用子类的原型等于干净函数的实例；

function Parent(name) \{ this.name = name; \}

Parent.prototype.say = function() \{ console.log(this.name); \};

function ExtendMiddle() \{\}

function Child(name) \{ Parent.call(this, name) \}

ExtendMiddle.prototype = Parent.prototype;

Child.prototype = new ExtendMiddle let c = new Child("YaoChangTuiQueDuan"); c.say()

**常用的es6**

let、const/模板字符串/解构赋值/Promise/Class/Set/Map/箭头函数/模块化

**js基本数据规范**

不要在同一行声明多个变量

使用===/！==比较true/false或者数值

使用对象字面量替代new Array

不要使用全局函数

Switch必须带有default分支

IF语句必须使用大括号

for in 循环中的变量 应该使用var关键字明确限定作用域

**this****的指向**

指向调用函数的那个对象，一般情况下，是全局对象global,作为方法调用，this指这个对象

**作用域链**

作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被种植，作用域链向下访问变量是不允许的

简单的说，作用域就是变量和函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期

typeOf:检测基本数据类型

instanceOf:引用数据类型

isPrototypeOf():

**call,apply,bind**

都会改变this指向；call和apply传入参数列表形式不同,apply:最多两个参数;

call和apply适用于在运行时改变this,bind会返回一个新的函数，新函数由bind传入的参数决定

**闭包：**

能够读取其他函数内部变量的函数  
优点：读取函数内部的变量让局部变量保存在内存中，实现变量数据共享；  
缺点：由于闭包函数内部变量都被保存在内存中，内存消耗大。

## CSS ##

**三栏布局**

（两侧定宽，中间自适应）

flex;浮动布局；绝对定位实现；表格布局；

**CSS3新特性**

RGBA和透明度；  
background-image;  
word-wrap;  
text-shadow;  
font-face;  
border-radius;  
box-shadow;

**水平垂直居中**

flex+justify-content+align-items

transform:translate(-50%,-50%);

table-cell

**div垂直水平居中**  
居中布局：  
行内：text-align:center  
块级：margin:0 auto  
flex+justify-content:center  
垂直居中：  
line-height:height  
flex+align-items:center  
vertical-align:middle  
table  
水平垂直居中  
flex+align-items+justify-content  
**浮动**  
引起的问题：  
父元素高度无法被撑开，影响与父元素同级的元素  
与浮动元素同级的非浮动元素会紧随其后  
清除方式：  
clear:both  
父级设置高度  
overflow:hidden  
**BFC**

如何生成BFC：（即脱离文档流）

*  1、根元素，即HTML元素（最大的一个BFC）
 *  2、float的值不为none
 *  3、position的值为absolute或fixed
 *  4、overflow的值不为visible（默认值。内容不会被修剪，会呈现在元素框之外）
 *  5、display的值为inline-block、table-cell、table-caption

BFC布局规则：

*  1.内部的Box会在垂直方向，一个接一个地放置。
 *  2.属于同一个BFC的两个相邻的Box的margin会发生重叠
 *  3.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此, 文字环绕效果，设置float
 *  4.BFC的区域不会与float box重叠。
 *  5.计算BFC的高度，浮动元素也参与计算

BFC作用：

*  1.自适应两栏布局
 *  2.可以阻止元素被浮动元素覆盖
 *  3.可以包含浮动元素---清除内部浮动 原理：触发父div的BFC属性，使下面的子div都处在父div的同一个BFC区域之内
 *  4.分属于不同的BFC时，可以阻止margin重叠

**选择器优先级**  
！important>行内样式>\#id>.class>tag>\*>继承>默认\\

## HTML ##

**h5新特性**：  
canvas：绘画  
video和audio媒介回放  
语义化更好的内容元素：artical footer header nav  
表单控件 calendar date time email url

## 浏览器 ##

**call,apply,bind区别，怎么实现call,apply方法**

都是用来改变this指向

第一个参数都是this要指向的对象

都可以利用后续参数传参

call（this,1,2,3)

apply(this,\[1,2,3\])

bind返回值为一个新的函数

手动实现call方法：

Function.prototype.myCall=function(context=window,...rest)\{

context.fn=this;

let result=context.fn(...rest);

delete context.fn;

return result;

**深拷贝和浅拷贝**

浅拷贝：解构赋值，Object.assign(\{\},obj)

深拷贝：Json.Parse && Json.stringfy

function deepClone(obj)\{

let objClone=Array.isArray(obj)?\[\];\{\};

let toString=Object.prototype.toString;

for(key in obj)\{

if(obj.hasOwnProperty(key))\{

if(toString.call(obj\[key\])==="\[object object\]"||toString.call()==="\[object Array\]")\{  
objClone\[key\]=deepClone\[key\]);  
\}else\{

objClone\[key\]=obj\[key\];  
\}

return objClone;

**插入几万个dom，如何实现页面不卡顿**

1：分页，懒加载，每次接受一定的数据

2：setInterval,setTimeout,requestAnimationnFrame分批渲染，

3:virtual-scroll 虚拟滚动；指根据容器元素的高度以及列表项元素的高度来显示长列表数据中的某一个部分，而不是去完整地渲染长列表，以提高无限滚动的性能

**优化手段：**

减少http请求，把图标合并到一张图片中，用background-position控制。

首次加载时使用懒加载（监听浏览器的滚动事件，结合clientHeight,offfsetHeight,,计算图片是否在可视区域，如果是的话就替换src。滚动事件主要是节流）。尽量在需要的时候加载它，占位符要指定宽度和高度，避免图片加载完成之后替换图片浏览器会进行回流（影响了页面的结构）；

使用iconfont字体图标

减少DNS查询

将css放在头部，js放在页面下面

压缩js和css:减少文件体积，去除不必要的空白符，格式符，注释，移除重复，无用的代码，使用gzip

使用浏览器缓存

避免css选择器嵌套太深

高频触发时间使用防抖节流

使用ajax缓存

使用cdn

**前端路由**

hash模式

onhashchange:可以在window事件上监听这个对象，在hash变化时，浏览器会记录历史，并且触发回调，地址栏中会带有\#.而且只能改变\#后面的url片段.

history

VirtualDOM:

在之前，渲染数据时，会直接替换掉 DOM 里的所有元素，换成新的数据，为了渲染无用 DOM 所造成的性能浪费，所以出现了 Virtual DOM, Virtual DOM 是虚拟 DOM，是用 js 对象表示的树结构，把 DOM 中的属性映射到 js 的对象属性中，它的核心定义无非就几个关键属性，标签名、数据、子节点、键值等。当数据改变时，重新渲染这个 js 的对象结构，找出真正需要更新的 DOM 节点，再去渲染真实 DOM。 *Virtual DOM 本质就是在 JS 和 DOM 之间做了一个缓存*

**为什么操作真实 dom 有性能问题**

因为 DOM 是属于渲染引擎中的东西，而 JS 又是 JS 引擎中的东西。当我们通过 JS 操作 DOM 的时候，其实这个操作涉及到了两个线程之间的通信，那么势必会带来一些性能上的损耗。操作 DOM 次数一多，也就等同于一直在进行线程之间的通信，并且操作 DOM 可能还会带来重绘回流的情况，所以也就导致了性能上的问题。

var arr = \[ \[1, 2, 2\], \[3, 4, 5, 5\], \[6, 7, 8, 9, \[11, 12, \[12, 13, \[14\] \] \] \], 10\];

编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组

方法一：

function handleArr(arr) \{

let flatten = (arr) => arr.push ? arr.reduce((pre, current) => \[...pre, ...flatten(current)\], \[\]) : \[arr\]; return \[...new Set(flatten(arr))\].sort((a, b) => a - b);

方法二： \[...new Set(arr.toString().split(",").map(Number))\].sort((a,b)=> a - b)

方法三： \[...new Set(arr.flat(Infinity))\].sort((a,b)=>\{ return a - b\})

**重绘和回流**

重绘：节点需要更改外观而不影响布局的，改变color

回流：布局或者几何属性需要改变

**浏览器解析url**

解析 url 到 dns 服务器 dns 服务器返回 ip 地址到浏览器 跟随协议将 ip 发送到网络中 经过局域网到达服务器 进入服务器的 MVC 架构 Controller 经过逻辑处理，请求分发，调用 Model 层 Model 和数据进行交互，读取数据库，将最终结果通过 view 层返回到网络回到浏览器 浏览器根据请求回来的 html 和关联的 css, js 进行渲染 在渲染的过程中，浏览器根据 html 生成 dom 树，根据 css 生成 css 树 将 dom 树和 css 树进行整合，最终知道 dom 节点的样式，在页面上进行样式渲染 浏览器去执行 js 脚本 最终展现页面

**Web安全**（[juejin.im/post/59dc2b…][juejin.im_post_59dc2b]）

*XSS*:通过注入非法的html标签或javascript代码，从而当用户浏览该网页时，控制用户浏览器。

分为DOM xss(浏览器的DOM解析);反射型 xss（url中）;存储型xss(提交xss代码被服务器端接收存储)

影响：利用虚假表单骗取用户个人信息；获取用户cookie值，被害者在不知情情况下，帮助攻击者发送恶意请求；显示伪造的图片和文章；

防御：避免使用eval,new Function,使用httpOnly；过滤（输入检查，HtmlEncode,javascriptEnCode)

*CSRF*:跨站点请求伪造，冒充用户发起请求，完成一些违背用户意愿的事情。

防御：验证码；尽量使用post;请求来源限制，token；避免登录的session长时间存储在客户端中

*点击劫持*：利用透明的按钮或连接做成陷阱，覆盖在web页面之上，诱使用户在不知情的情况下，点击。

防御：x-frame-options http响应头是用来给浏览器指示允许一个页面可否在<frame>中展现的标记。

**跨域(**[juejin.im/post/5c2399…][juejin.im_post_5c2399]**)**

允许跨域访问的标签：<img> <link> <script>

解决方案

JSONP:<script>标签：

cors:需要浏览器和后端的支持

postmessage

websocket

ngix反向代理：中转nginx服务器，用于转发请求。

iframe

**ajax跨域**

**拷贝**  
浅拷贝：以赋值的形式拷贝对象，仍指向同一个地址，修改原对象也会受到影响  
Object.assign  
(..展开运算符)  
深拷贝：完全拷贝一个新对象，修改时原对象不再受到任何影响  
JSON.parse(JSON.stringfy(obj))：性能最快

**浏览器兼容问题：**

png24在ie上出现背景，解决方案是做成png8

不同浏览器的默认标签margin和padding不一样：\*\{margin:0;padding:0\}

chrome中文界面会默认将小于12px的文本强制按照12px显示，可加入：-webkit-text-size-adjust:none解决；

IE双边距bug;

透明性IE用filter 其他浏览器用opacity 0.6;

**websoket**:

H5单个TCP连接上进行全双工通讯的协议。浏览器和服务器只需要做一个握手动作，然后浏览器和服务器之间就形成了一个快速通道

**一次完整的http流程**

域名解析，

发起TCP的三次握手，

建立TCP连接后发起http请求，

服务器端响应HTTP请求，浏览器得到html代码

浏览器解析html代码，并请求html代码中的资源

浏览器对页面进行渲染呈现给用户

**cookie、sessionStorage和localStorage的区别**

cookie数据始终在同源的HTTP请求中携带。

sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径(path)的概念，可以限制cookie只属于某个路径下。

存储大小限制不同

cookie数据不能超过4KB,同时因为每次HTTP请求都会携带cookie,所以cookie只适合保存很小的数据。

sessionStorage和localStorage也有存储限制，但是要大的多

数据有效期不同:

sessionStorage:仅在当前浏览器窗口关闭前有效。

localStorage:始终有效，窗口或浏览器关闭也一直保存。

cookie:只要在设置的cookie过期时间之前一直有效

作用域不同：

sessionStorage不在不同的浏览器窗口中共享(我们可以不可以通过使用sessionStorage实现跨域).localStorage在所有同源串口都是共享的。cookie在所有同源窗口都是共享

**Seo优化**

titel>description>keywords

语义化的HTML

重要内容HTML代码放在最前

重要内容不要用js输出：爬虫不会执行js获取内容

少用iframe：搜索引擎不会抓取iframe中的内容

非装饰图片必须加alt

**seo**

meta标签优化

关键词分析

付费给搜索引擎

合理的标签使用

**前端安全**

**XSS****：**跨站脚本攻击  
它允许用户将恶意代码植入到提供给其他用户使用的页面中，可以简单的理解为一种javascript代码注入。  
XSS的防御措施： 过滤转义输入输出  
避免使用eval、new Function等执行字符串的方法，除非确定字符串和用户输入无关  
使用cookie的httpOnly属性，加上了这个属性的cookie字段，js是无法进行读写的  
使用innerHTML、document.write的时候，如果数据是用户输入的，那么需要对象关键字符进行过滤与转义

**CSRF****：**跨站请求伪造  
其实就是网站中的一些提交行为，被黑客利用，在你访问黑客的网站的时候进行操作，会被操作到其他网站上  
CSRF防御措施：  
检测http referer是否是同域名  
避免登录的session长时间存储在客户端中  
关键请求使用验证码或者token机制 其他的一些攻击方法还有HTTP劫持、界面操作劫持

**重绘和节流**

重绘：当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要UI层面的重新像素绘制，因此损耗较少

回流：当元素的尺寸，结构或触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要经过计算，计算后还需要重新布局，因此是较重的操作。

**Http性能优化**

减少http请求，合并css和js文件，把图标合并到同一张图片里面，用backgroung-position控制。首次加载时使用懒加载（监听浏览器的滚动事件，结合clientHeight,offfsetHeight,,计算图片是否在可视区域，如果是的话就替换src。滚动事件主要是节流）。尽量在需要的时候加载它，占位符要指定宽度和高度，避免图片加载完成之后替换图片浏览器会进行回流（影响了页面的结构）；

合理利用缓存。把CSS和js使用外链的形式。

把CSS放在头部，JS放底部；

webpack减少js体积。babel-plugin-import.

转载于:https://juejin.im/post/5cb15e37f265da038e549a92

[juejin.im_post_59dc2b]: https://juejin.im/post/59dc2b7a6fb9a0451869ae3a
[juejin.im_post_5c2399]: https://juejin.im/post/5c23993de51d457b8c1f4ee1