社招面试总结

时间 2019-11-30

标签面试总结栏目快乐工作繁體版

原文原文链接

JS

js继承javascript

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

function Parent(name) {html

this.name = name;前端

} java

Parent.prototype.say = function() { webpack

console.log(this.name); nginx

}; es6

function Child(name) { web

Parent.call(this, name)ajax

}

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：（即脱离文档流）

一、根元素，即HTML元素（最大的一个BFC）
二、float的值不为none
三、position的值为absolute或fixed
四、overflow的值不为visible（默认值。内容不会被修剪，会呈如今元素框以外）
五、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…）

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…)

容许跨域访问的标签：<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.