前端知识总结

****\

问题累计

一、webpack原理以及性能优化

（1）原理篇

Tapable,是一个插件集成管理器，用点类似nodejs的事件注册器。

Webapck大部分的功能都是通过这种插件集成的方式实现的，比如webpack的ast生成过程，就是用的插件集成。

Webpack打包的过程，首先是拿到开发者定义好的config，初始化数据以及初始化插件需要执行的内容。

通过nodejs的文件读取系统，将读取的文件内容，并将其给到一个模块对象，这里每个模块都有一个id。

然后将模块丢给解释器，最终通过递归，生成一个ast语法树。

怎么在游览器工作？

明晚继续

webpack哈希的作用？

明天继续

（2）性能优化

优化方式：

1、 webpack-bundle-analyzer 通过打包分析器，分析包使用的情况，从而对症下药进行优化

2、plugin-syntax-dynamic-import 动态导入方式，减少包的体积

3、splitchunk，切割公共包，将其单独打包成一个文件

4、compression-webpack-plugin 压缩js、css文件，同时配合ngnix配置，进行gz文件传输

Gz文件传输：

游览器传递Accept-Encoding，后端根据其值类型进行压缩，最后通过返回Content-Encoding 说明压缩类型

webpack 将图片打包成base64 ？

使用url-loader插件可转换为base64，但最好设置limit大小限制，否则如果图片过大，会导致渲染缓慢。

二、vue原理以及优化

（1）变化侦测

Object的变化侦测

1、依赖收集

getter 回调收集依赖，将依赖watch 塞进 依赖管理器dep

window.target 挂载到全局变量上

2、依赖更新

setter 回调触发时更新依赖，通过调用dep操作所有watch更新试图

Array的变化侦测

1、代理、数据参见函数代理，重写

（2）虚拟DOM

patch阶段、创建节点、删除节点、更新节点

（3）模版编译

1、通过正则表达式，匹配template的元素、属性，生成元素类型的ast

2、将每个元素ast 链接生成 完整的dom ast

（4）生命周期

props：

1、propsData (父组件传进来的props)、vm.$options._propKeys（props key值）、vm._props（最终将可侦测数据绑定到这里）

2、代理this

3、类型检验

computed

computed中多级属性的绑定

2、非服务端渲染的情况：useRef、 vm._computedWatchers、 watch（计算属性watch、非计算属性watch）

循环computed

1、 建一个watch， 并通过key-value 映射到_computedWatchers对象中

2、getter ：watch.depend() 添加依赖

3、计算属性watch，有两个特殊属性，this.dirty、this.computed

1、this.dirty： 判断是否需要重新取值

2、this.computed：区分watch是计算属性还是其他watch

（5）vue3常见的用法以及区别

1、 区别：

1.1 数据支持可侦测，proxy api支持数据的数据侦测

1.2 引入更多的hook 函数

1.3 通过hook 更灵活定义数据

1.4 更友好的支持jsx、ts

2、用法

2.1 ref、useSlot等

2.2 setup

（6）vue2转vue3

（7）tree shadow 在 vue2 和 vue3 的使用区别， vue2 把全部的api挂载到vue上，因此打包会全部打包进来

vue3 不会，因为vue3使用的是结构方法

三、this指向面试题

（1）严格模式 在全局执行的函数，其函数体内的this，并不指向window

（2）let、const不会挂载到window上，var会

（3）箭头函数 = 普通函数.apply(this)

（4）apply、bind、call的区别

四、基础组件开发以及主题色设计

五、数据结构

树、队列、堆（大顶堆、小顶堆）

二叉树、满二叉树、完全二叉树、二叉查找树（left(A) < A <right(A)）、平衡二叉树（left(A).length - right(A).length <= 1）、平衡二叉查找树

七、游览器工作原理

（1）游览器工作原理

（2）事件循环

任务：同步任务、异步任务

主线程的同步任务，过程中遇到异步任务，会先挂起，等异步任务返回结果，将事件加入事件队列中，主线程的同步任务执行完成，再执行事件队列。如此反复

事件队列：宏任务队列 和 微任务队列，并且 主线程会先从微任务中取出任务执行，如果没有任务执行，再取宏任务

宏任务： settimeout、setInternet

微任务： Promise、MutaionObserver

宏任务、微任务

（3）重绘和回流

（4）经典面试题，url从游览器输入到页面渲染完成的过程

1、dns域名解析

查询ip、递归的过程、缓存

www.google.com 过程： 本地服务-> 根服务器-> com顶级域名服务器 -> google.com域名服务器

DNS 负载均衡：cdn

2、tcp建立连接

三次握手、四次挥手、传输层协议

面向连接的可靠数据传输协议

http1.1中，一次http连接会发送多次tcp请求

http2.0中，一次http发送多次请求，不需要建立多次tcp连接

3、发送HTTP请求

1、HTTPS：

1.1、https： http + ssl

1.2、在进入tcp之前，对http报文进行一次加密

1.3、握手加密，https进行数据传输之前，会进行一次TLS/SSL握手，获取加密解密信息

2、请求报文

2.1、请求头

2.1.1 accept-encoding、Referer、cache-control

2.1.2 游览器缓存

cache-control: public 、private、no-cache、no-store

强缓存：状态码 200

协商缓存：由服务器根据文件修改时间决定是否进行缓存、状态码 304 、 Last-Modified/If-Modified-Since

优先级： Cache-control > Expires > Etag > Last-Modified

4、服务端处理并返回响应内容

1、响应报文的状态码

5、游览器解析并渲染页面

1、游览器的市场份额，根据stateCounter统计，谷歌份额最大，占64%，其次是safari

2、游览器执行过程：

2.1 游览器模块

用户界面 -> 游览器引擎 -> 渲染引擎 ->网络模块

      ->js执行模块

2.2 parsing HTML

2.2.1 HTML is forgiving by nature

2.2.2 parsing isnot straight forward

2.2.3 can be halted

2.2.4 will do speculative parsing

2.2.5 it is beentrant

2.3 parsing flow

6、http连接结束

（5）v8

八、Http演化过程

（1）http1.0

（2）http1.1

解决了1.0 需要 http 用完即丢的问题，添加keep-alive属性，建立长链接，游览器最大限制6次请求。

（3）http2.0

很多在http1.0 的时代的痛点，在http2.0很自然的得到解决，从而我们不需要去做额外的操作去优化

1、多路复用

（4）websocket

支持实时传送数据，并且udp协议，优点XXXX

九、ES6常见用法

（1）解构

（2）数组扩展运算符支持解构为函数参数

（3）函数行参指定默认值、结合结构、reset参数

（4）let、const、symbol、set、map、promise、proxy、async、class

let可以被修改但不能重新声明，而var可以

let被提升，但不会初始化undefined

const 不能被修改或者重新复制

const 声明对象时，不能整个更新，但可以更新对象属性

十、常见的几种设计模式

（1）工厂模式

（2）单例模式

（3）订阅与发布模式

（4）过滤器模式

（5）转换器模式

十一、promise原理以及常见用法

十二、页面优化

（1）优化指标

首屏渲染时间：mutationObserver 计算首屏渲染时间方案

wtf（后端返回数据的时间）

首屏渲染时间： github.com/Cainankun/f…

通过mutationObserver 维护一个队列，队列存储每一节点变化的时间和节点信息

通过判断变化最大的节点的时间+ 图片渲染完成的时间 = 首屏渲染时间

跨功能需求

（2）webpack打包优化（见上面webpack优化篇）

（3）静态资源cdn缓存，如数据万象

（4）常见的游览器缓存

强制缓存

协商缓存

（5）服务端渲染优化

（6）webWork

（7）带宽优化

1、延迟加载

懒加载

2、提前加载

preload  分析network 判断首评加载时间阻塞的内容，对起进行提前加载

prefetch 

用户行为难以预测

带宽浪费

3、不加载资源

cache

（8）文件压缩

broti： 哈斯曼，词典

很多优化都是一种平衡，需要根据性能工具去选择一种最优的性能优化方式

（7）http2.0 头文件压缩

cookie-less domain

hpack

（8）minification

（9）移除昂贵的库 library

webpack-bundle-analyzer 分析昂贵的库

（10）页面的重定向非常昂贵，tcp会被销毁，重新建立

rewrite spa

十三、场景题

1、A登录页，为登陆跳转B页面，返回如何保存A页面的数据？

2、uni-app与其他技术的区别

3、uni-app常见的问题

4、常见的组件库的选择、element-ui、antd-design、uni-app、vant

5、离线下载文件

6、大文件下载分段

十四、nodejs

（1）文件操作系统

（2）网络请求系统

（3）事件循环、定时器和 process.nextTick()

（4）多线程通信

十五、ts基础知识

1、泛型

2、基本类型

3、枚举

4、声明文件

1、import

2、module

5、接口

6、类

十六、项目流程相关

（1）项目流程：项目立项（时间节点、开发人员、产品人员、测试人员、运维人员、pm等确定）、需求评审、技术评审、开发具体开发任务安排、开发阶段（环境的部署）、测试用例评审、测试阶段（ui走查）、内灰度、外灰、全网

（2）项目风险同步问题：功能点风险、人员安排风险、环境风险

（3）开发功能点拆分：最小化原则，拆成最小最熟悉模块

（4）开发阶段首先是开发环境要稳定

1、 跨多业务情况，要确保不同业务的代码都在同一个开发环境上

2、 本地起项目确保可以使用上述开发环境，有问题要在开发前期提前提出

3、 涉及多端业务，b->c->小程序，也要确保整套流程可以使用

（5）跨业务开发环境，确保在同一个开发环境

（6）b端系统调试方式总结

（7）c端系统调试总结

（8）小程序开发调试总结

（9）webview开发调试总结

十七、小程序原理以及常见难点和解决方案

（1）原理

（2）多层级问题

（3）主包容易过大问题

（4）富文本兼容性问题，比如复制其他地方的内容到富文本

（5）滑动白屏（虚拟列表）

（7）登陆授权

十八、css样式

（1）选择器级别

!important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配符选择器 > 继承 > 浏览器默认属性

（2）常见场景

1、卡片文字和icon居中，左右两边对齐

align-item: center; flex: 1 1 0%;

2、垂直水平居中

display: flex; justify-item: center; align-content: center;

3、自动适配

1、左右两列固定宽度，中间自适应

左右固定宽度，中间position: absolute; 控制边距

4、动画 @keyframes

十九、效率开发

（1）根据样式节点生成dom元素

二十、项目开发利器

（1）husky

（2）yarn

（3）lerna

二十一、主要项目

【打卡项目】

（1）前端项目框架的搭建

1、 技术框架选型、ui框架选型

选型标准：支持多端、支持现有人员快速开发，因此选择了技术框架为vue的uni-app

ui 主要是自己开发的基础组件，没有用vant或者其他框架的原因是设计稿风格不同，以及引入vant等较大的组件包可能会影响到主包的大小

2、项目的搭建

环境： node 14. Vue-cli 3

uni-app + vue2

3、项目的前端配置

3.1 ESLint + Prettier + husky + Lint-staged + commitlint

****安装husky -> pre-commit -> npx lint-staged -> package.json配置lint-staged + commitlint

3.2  请求模块封装

getDefaultHeaders

1、请求拦截器

****对请求头进行新增或者过滤（appid，cookie，timeout，content-type，withCredentials）

2、响应拦截器

****返回正常数据

****对异常状态码处理

1、 重新登陆

2、请求队列

3.3  项目的基础组件

3.4 项目的主题色

3.5 项目的icon 使用阿里图标库

3.6 自动化部署方案

3.7 难点：

1、登陆、小程序登陆、店铺登录

webview进行店铺登录，后端才能获取到店铺信息。webview再跳转到小程序页面

2、图片上传的方案、音频上传的方案、上传异常定位方案

文件上传类

1、 进度条更新

2、 异常处理上报 从开始选择文件 -> 鉴权 -> 上传cos桶 -> 上传素材中心

3、 基本上传流程的封装

音频不同步的问题：

1、 实现一个XeAudio类，用于在业务测注册录音的事件，暂停、播放、

2、业务测初始化XeAudio类，并注册各个事件

3、维护一个录音队列，记录当前录音的状态和信息，再根据这些信息调整需要播放那一条

4、这里需要注意的是录音时间会存在误差和进度条的时间误差

****setInterval的两次执行之间的间隔存在误差，因此选择使用settimeout进行递归执行

计算执行时间之间的误差

3、层级限制

4、海报 + bbf + canvas

5、富文本

6、虚拟列表

7、主包优化

二十二、面试总结

es6

Promise + async/await

最顶层的原型链 - null

instanceof 的原理

http2.0 和 http1.0 的优点

webpack 转成base64 

Base64 为什么会比较大

Tree-shadow 

Vue2 和 vue3 对没使用的方法是否会打包

公司使用的http的版本 1.1

Js中实现一些异常监控的方法

实现一个功能，每个页面都需要弹出一个弹框，有什么比较好的方式

Vue的keep-alive 使用场景-记录页面的高度， keep-alive 如何分辨返回的是哪个页面？

Uni-app的坑

过多setdata 

异常错误：

window.onError

window.addEventListener

Promise Catch

unhandledrejection

VUE errorHandler

window.frames[0].onerror

利用 window 对象的 load 和 beforeunload 事件实现了网页崩溃的监控

可疑区域增加 Try-Catch

2.全局监控 JS 异常 window.onerror

3.全局监控静态资源异常 window.addEventListener

4.捕获没有 Catch 的 Promise 异常：unhandledrejection

5.VUE errorHandler 和 React componentDidCatch

6.监控网页崩溃：window 对象的 load 和 beforeunload

二十三、console类

console.trace() 函数栈

console.error()

console.time()

console.timeEnd()

二十四、vue3

1、useStore只能在setup中使用，为什么？

//TODO 探索

2、vue3很多地方需要用结构才能取数据，比如 取useGetter或者useState的数据，也需要结构才能获取，为什么？

二十五、算法

1、正整数转为二进制

function divideBy2(decNumber) {
    var decStack = [];
    var rem;
    var decString = '';

    while (decNumber > 0) {
        rem = decNumber % 2;
        decStack.push(rem);
        decNumber = Math.floor(decNumber / 2);
    }

    while (decStack.length != 0) {
        decString += decStack.pop().toString();
    }
    return decString;
}

二十六、小程序原理

weixinJSBridge

视图层与底层通讯

WxWebview 提供的 messageHandlers