待归档

https://mp.weixin.qq.com/s/CjSXdns1URlJ8Yztk0vbtwJavaScript 基础，ES6语法、 script标签前端模块化整理归档目录 echarts动画实现原理了解canvas吗如何实现组件滑动切换效果对语义化的理解 HTML5有哪些语义化标签 网络通信，重点有浏览器缓存、Http2.0、Https通信过程、TCP与UDP、CDN缓存等。简述下 TLS 握手过程 px转其他单位 vue-router两种模式下如何实现的url到组件的映射 HTML和CSS，这块被问的内容比较少，重点从布局入手，比如单位、盒模型、定位、响应式布局等知识点。

前端框架，框架的底层原理是一定会问的，至少要深入掌握一个前端框架。目前业界内比较流行的框架是 React 和 Vue，React 的知识点有 React diff、生命周期、Fiber 架构、Hooks 等；Vue 的知识点有Vue diff、响应式原理、Vue3.0新特性等。

打包工具，主要围绕Webpack展开，比如loader和plugin原理、webpack构建流程、热更新原理、性能优化等。除此以外，打包界的新宠esbuild也可以了解下。

加分项，除了JavaScript外，还了解哪些编程语言

CSS换行

F12禁止用户复制和查看文本

如何防止网页内容被爬

v8内存管理

v8 unsafe

spa的优缺点

node模块引入的方式 module.export与其他与什么不同

异步加载的方式有哪些

async defer ajax 动态创建script标签 iframe引入模块引入

生命周期

cookie是直到指定时间，或者当前回话结束

session是到当前会话结束

local是一直有效

大小

cookie是4k

session和local是5M

共享

cookie是同域名共享

session是当前页签下同域名共享

local和cookie一样

JS数据类型有哪些,区别是什么？

string，number,boolean,null,undefined,symbol,bigint,object

你对闭包的理解？

闭包是将函数暴露出去，其中引用的变量就可以被外部访问到

比如模块或者回调函数

promise是什么与使用方法？

跨域是什么？如何解决跨域问题？

说一说BFC

Vuex是什么，每个属性是干嘛的，如何使用？

JavaScript有几种方法判断变量的类型？

样式优先级的规则是什么？

引用方式

important》行内》嵌入》外连

顺序

同优先级的后面会覆盖前面

选择器

id>class>tag=::after=prop>后代>子>*>默认

选择器判断规则，首先计算出ABC的个数

A：id选择器的个数
B：类，伪类，属性选择器的个数
C：标签和伪元素的个数
重复选择器计算在内，比如 .class.class
特殊选择器
- :not() :has() :is() 选括号中最复杂的一个选择器优先级
- :nth() 在上面的规则基础再加一个B
- :where() 优先级是0
其他都计算0

CSS权重在一开始是256，后来扩大，可以理解为无法进位，也就是ABC单独比较

JS实现异步的方法？

回调函数、事件监听

promise，生成器，async,await

Vue2.0 双向绑定的原理与缺陷？

Object.defineProperty监听

缺点是一次性递归开销比较大，无法监听对象属性增删，数组下表对应数据改变无法监听

数组去重都有哪些方法？

新建对象，遍历数组赋值，最后转为数组

新建数组，遍历数组，每次判断IndexOf

遍历方法可以使用reduce和filter优化

Set

null 和 undefined 的区别，如何让一个属性变为null

null不是对象，之所以typeof 判断会是object是因为null的二进制都是0，对象是判断前三位是否为0

es6中箭头函数？

没有this,不能new，没有argument,没有原型和super，

this指向（普通函数、箭头函数）？

箭头函数：定义时所在作用域，无法更改

普通：直接调用是全局，对象属性调用是对象，显示绑定就是绑定对象

说几个未知宽高元素水平垂直居中方法

flex,grid

absolute：top:50%;transform:traslateY(-50%)

JS变量提升？

变量在声明前就能使用，var会提升到当前作用域顶，只会提升声明，函数会提示声明与赋值，let和const声明提升后也无法访问，不用var声明a会在执行时提升和赋值，块级作用域内的函数提升会在块级作用域内外各提升一次

**HashRouter 和 HistoryRouter的区别和原理？

hash需要用#区分，history需要用/区分

hash直接部署即可使用，history需要后台配合解析路由

hash原理是监听url的location对象的hash值

history原理是history.pushState做页面跳转

事件循环Event loop，宏任务与微任务？

Vue3.0 实现数据双向绑定的方法？

说一下Diff算法？

patch

新节点存在，旧节点不存在，创建新节点
新节点不存在，旧节点存在，删除旧节点
都存在时使用patchVnode对内容比较

patchVnode

判断子节点情况
- 新子节点存在，旧的没有，创建新子节点
- 新子节点没有，旧的有，删除旧的
- 新旧都有，进行updateChildren函数对比

updateChildren

如果是文本节点，直接更新文本
不是文本节点，遍历对比
头头对比，尾尾对比，头尾对比，尾头对比，匹配成功则对比其他子节点
如果有key，则查找是否有匹配的key

垃圾回收机制

vue 的 keep-alive

XSS攻击是什么？

利用用户输入的数据，将恶意数据传输，使用编码过滤可以规避

反射型：诱导用户访问网址，url中拼接了恶意代码，可以插入数据到html或者插入js,css中

存储型：利用评论等表单页面提交恶意代码到服务器，导致服务器和其他用户都有可能被攻击

CSRF攻击是什么？

1 登陆网站A

2 未登出的情况下访问危险网站B

3 危险网站会诱导用户发出网站A的请求，比如发起一个跨域表单请求

可以通过验证码等操作来防护，但是用户体验差

校验referer字段，限制请求来源

使用token校验

js继承的方法和优缺点？

函数都有显式原型对象prototype，对象都有构造函数construtor以及隐式原型__proto__

对象可以通过隐式原型访问到构造函数的显式原型对象，以null为顶端

原型链继承：通过修改prototype直接继承父级的实例，优点是继承了父级的一切原型链上的属性，但是修改属性会影响其他实例

借用构造函数继承：在子构造函数中调用父级的构造函数，这样的话继承的属性修改不会影响其他实例，但是没有继承原型链

寄生式继承、原型式继承：与上面两种类似，但是子类继承的不是实例，而是一个继承父级原型链的空对象

寄生组合式继承：在空对象构造时再调用一次父级构造函数

defer和async区别？

都是异步加载，但是defer会等待页面加载完成后按顺序执行，async会立刻执行

浏览器如何渲染页面的？

解析html，生成dom树和样式树，遇到js会先加载和执行js

html被完成解析完成后。就会加载onload事件

生成渲染树

回流，重绘

构建DOM树

解析html标签属性等，如果文档格式良好，会解析很快

解析过程中遇到图片，css等静态资源，会继续解析，异步加载

遇到js会阻塞解析，预加载扫描器会加速这个过程

css加载不会影响html解析，但是会阻塞js

DOM每次更新时会更新AOM无障碍树

构建CSSOM树

和DOM树类似，但是速度很快，通常少于一次DNS查询所需的时间

JS编译

编译器对脚本进行编译，生成抽象语法树

解析的同时生成作用域

渲染

在解析步骤中创建的DOM树和CSSOM树组合为一个Render树。用于计算元素布局和绘制

布局，回流：第一次计算节点大小与位置叫布局，之后重新计算叫回流或者重排，比如图片加载后会有一次回流

绘制：将布局好的元素框转换为屏幕哈桑的实际像素，绘制在屏幕上

video，canvas，和css3的一些属性会让绘制过程在gpu层执行，能提升性能

合成

绘制会有多个层，所以相互重叠时要进行合成，确保以正确顺序显示

new会发生什么？

创建一个空对象，将对象的隐式原型指向构造函数的显式原型，关联原型链

绑定this指向对象本身

返回对象本身，如果构造函数有返回值时需要判断，是对象则返回，原始类型则返回新对象

浏览器输入URL发生了什么？

浏览器匹配url，查找域名对应ip，DNS解析，TCP连接，网关，防火墙，nginx代理，握手，请求，服务器处理逻辑并返回html，SetCookie,浏览器解析Html，下载静态资源，生成DOM，CSSOM，Render树，开始布局，分层绘制，组合，激活js

组件通信的方式？

props emit

attrs listeners

provoid inject

vuex

eventbus

创建ajax过程

const xhr = new XMLHttpRequest()
xhr.open('post','http://www.xxx.com/api',true)
xhr.setRequestHeader('Content-Type','application/x-www-form')
xhr.send('user=1&sex=male')
xhr.onreadystatechange = ()=>{}

fetch 请求方式？

fetch('http://www.xxx.com/api',{method:'POST',headers:{},body:''})
.then(res=>res.json())
.then(data=>console.log(data))

有什么方法可以保持前后端实时通信？

定时轮训:请求数会很多,但实现简单
长轮询：等待时间增长，但带宽资源消耗变大
iframe：能够实时达到，兼容性好，但是长期维持长连接开销增加
websocket：优点是性能好，实时性好，缺点是兼容性不能保证，不支持断开重连
SSE：单向推动数据

重绘、重排区别如何避免？

减少改变大小的频率，dom变化尽量一次性完成

尽量使用css3动画，会有gpu优化

创建BFC,独立渲染

Vue 列表为什么加 key

提高diff效率

v-for默认是使用就地复用原则，不会变动dom，而是直接更新元素属性内容，如果有key辅助定位，就可以直接移动dom，不用更新属性

vue-router 实现懒加载的方法？

components:()=>import(/*webpackchunkName:"a"*/../views.A.vue)

前端性能优化手段？

图片压缩、节流防抖，http缓存，本地缓存，keepalive，减少dom变化，ssr服务端渲染，缓存dom，路由懒加载，

性能优化有哪些性能指标，如何量化？

服务端渲染？

优点是减少了网络传输成本，响应快，用户体验好，首屏渲染快，对SEO友好

缺点是开发条件受限，部分生命周期的钩子函数无法使用，部署要求更多，需要Node来运行渲染器，并且对服务器的性能要求更高，因为server会消耗服务器资源

https和http比较，安全在哪里，怎么对数据加密；

他的数据不是明文的，是通过密钥加密的，并且浏览器堆SSL认证网址有标识，不容易被盗版网站引导

流程是浏览器先获取公钥，然后自己生成一个密钥，使用公钥加密，发到服务器，服务器使用私钥解密后得到了客户端密钥，用这个密钥进行会话

http2.0以后雪碧图还有没有意义

从http1.1以后，就默认支持长连接，多个http请求依次共享一个tcp连接，大大减少了请求消耗，但是有请求阻塞

http2.0多路复用更快了，反而应该将大文件拆分为模块，可以更好的提升速度

webpack 常用的配置项

entry output loader plugin

深拷贝

Object.assign可以实现外层深拷贝

JSON可以实现深拷贝，但是不支持undefined和symbol以及内置类型都不能拷贝

递归拷贝

lodash的cloneDeep函数

浏览器缓存

浏览器缓存在进程未关闭时会使用内存缓存，否则是硬盘缓存

没有缓存

浏览器发起请求，检查有没有缓存标识，没有命中缓存，则请求到服务器

服务器返回请求结果与缓存规则

浏览器将请求结果和缓存标识存入到浏览器缓存中

强缓存

浏览器请求缓存，命中缓存并且没失效，则直接使用缓存结果

控制强缓存的字段是expires和cache-control（优先级高），后者时间是相对值

expires：强缓存到期时间

Cache-Control：max-age=xxx 时间 no-cache 协商缓存 no-store 不缓存

协商缓存

具备缓存标识，但是强缓存已过期，会携带缓存标识发起http请求协商缓存

服务器使用缓存标识查看文件是否更新，如果没有更新则返回304，使用缓存，如果更新则返回200，返回浏览器最新的文件

协商缓存的标识有last-modified/if-modified-since 和 etag/if-none-match(优先级高)

待归档 ​

CSS换行 ​

F12禁止用户复制和查看文本 ​

如何防止网页内容被爬 ​

v8内存管理 ​

v8 unsafe ​

spa的优缺点 ​

node模块引入的方式 module.export与其他与什么不同 ​

异步加载的方式有哪些 ​

cookie sessionStorage localStorage 区别？ ​

生命周期 ​

大小 ​

共享 ​

JS数据类型有哪些,区别是什么？ ​

你对闭包的理解？ ​

promise是什么与使用方法？ ​

跨域是什么？如何解决跨域问题？ ​

说一说BFC ​

Vuex是什么，每个属性是干嘛的，如何使用 ？ ​

JavaScript有几种方法判断变量的类型？ ​

样式优先级的规则是什么？ ​

JS实现异步的方法？ ​

Vue2.0 双向绑定的原理与缺陷？ ​

数组去重都有哪些方法？ ​

null 和 undefined 的区别，如何让一个属性变为null ​

es6中箭头函数？ ​

this指向（普通函数、箭头函数）？ ​

说几个未知宽高元素水平垂直居中方法 ​

JS变量提升？ ​

**HashRouter 和 HistoryRouter的区别和原理？ ​

事件循环Event loop，宏任务与微任务？ ​

Vue3.0 实现数据双向绑定的方法 ？ ​

说一下Diff算法？ ​

垃圾回收机制 ​

** vue 的 keep-alive** ​

XSS攻击是什么？ ​

CSRF攻击是什么？ ​

js继承的方法和优缺点？ ​

defer和async区别？ ​

浏览器如何渲染页面的？ ​

构建DOM树 ​

构建CSSOM树 ​

JS编译 ​

渲染 ​

合成 ​

new会发生什么？ ​

浏览器输入URL发生了什么？ ​

组件通信的方式？ ​

创建ajax过程 ​

fetch 请求方式？ ​

有什么方法可以保持前后端实时通信？ ​

重绘、重排区别如何避免？ ​

Vue 列表为什么加 key ​

vue-router 实现懒加载的方法？ ​

前端性能优化手段？ ​

性能优化有哪些性能指标，如何量化？ ​

服务端渲染？ ​

https和http比较，安全在哪里，怎么对数据加密； ​

http2.0以后雪碧图还有没有意义 ​

webpack 常用的配置项 ​

深拷贝 ​

浏览器缓存 ​

没有缓存 ​

强缓存 ​

协商缓存 ​

待归档