阅读目录
- html/ css ：https://blog.csdn.net/aSuncat/article/details/88789368
- javascript：https://blog.csdn.net/aSuncat/article/details/88789888
- es6：https://blog.csdn.net/aSuncat/article/details/88818661
- vue：https://blog.csdn.net/aSuncat/article/details/88978775
- react
- jQuery
- webpack、gulp、grunt
- node
- http、https
- web安全
- 前端性能
- 浏览器
- 算法相关
- 设计模式
- 正则表达式
- hybrid
- 全栈
- 项目
react
1、hoc 名词，应用
2、(1)setState：不了解异步，但猜对
（2）合成事件：会跟事件委托机制有关
（3）react vs vue
学习成本
性能区别不大
社区生态
3、react声明周期描述清晰
jQuery
| jquery的jq.eq(0)和jq[0]有什么区别？ |
待完善
- jquery源码
| 原型实际应用-jquery？ |
多个实例都可以共用一个方法时，说明这些方法（eg:css(), html()）都是来自于一个构造函数的原型中
var $p = $('p');
$p.css('color', 'red'); // css是原型方法
console.log($p.html()); // html是原型方法 // 如果有多个p元素，$p.html()默认是最后一个元素的html
<body>
<div>
<p>段落1</p>
<p>段落2</p>
</div>
<!--<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>-->
<script>
(function(window) {
var jQuery = function(selector) {
return new jQuery.fn.init(selector); // new了一个构造函数的实例
};
jQuery.fn = {
css: function(key, value) {
},
html: function(value) {
return '这是html';
}
};
var init = jQuery.fn.init = function(selector) { // 构造函数
var slice = Array.prototype.slice;
// var dom = document.querySelectorAll(selector); // nodeList[p,p]:__proto__是nodeList
var dom = slice.call(document.querySelectorAll(selector)); // [p, p]:__proto__是Array // selector转换成dom的list,然后转换成数组
console.log(dom);
var i, len = dom ? dom.length : 0;
for (i = 0; i < len; i++) {
this[i] = dom[i]; // 所有的元素都变成实例的属性
}
this.length = len;
this.selector = selector || '';
};
init.prototype = jQuery.fn; // 构造函数的原型赋值成jQuery.fn，jQury.fn是一个js对象
window.$ = jQuery;
})(window);
$p = $('p'); // 初始化实例
console.log($p.html());
1、扩展原型
将getNodeName属性放在构造函数的原型中，不是直接给构造函数的原型赋值，而是通过$.fn赋值
$.fn.getNodeName = function() {
return this[0].nodeName; // this[0]可以得到上述的第一个p标签，this就是实例$p,init这个构造函数里创建了this[i];
}
（1)好处：
①只有$会暴露在window全局变量（只暴露一个变量，不然容易造成全局变量的污染）
②将插件扩展统一到$.fn.xxx这一个接口，方便使用。
| jquery和vue的区别？ |
1、数据和视图的分离，解耦，开发封闭原则（对扩展开放、对修改封闭）
2、vue：以数据驱动视图，只关心数据变化，dom操作被封装
webpack、gulp、grunt
11、前端技术体系
（1）多版本/覆盖
时间戳
发布新版本回滚
（2）ssr & 同构
（3）webpack
vendor：commonchunk
external:全局变量
默认css处理
- webpack
| webpack优化方式？ |
待完善
24、webpack在使用层面，对插件和loader不够理解。
- gulp
1、
- grunt
1、
| grunt和gulp的区别？ |
1、易用：Gulp相比Grunt更简洁，而且遵循代码优于配置策略，维护Gulp更像是写代码。
2、高效：Gulp相比Grunt更有设计感，核心设计基于Unix流的概念，通过管道连接，不需要写中间文件。
3、高质量：Gulp的每个插件只完成一个功能，这也是Unix的设计原则之一，各个功能通过流进行整合并完成复杂的任务。例如：Grunt的imagemin插件不仅压缩图片，同时还包括缓存功能。他表示，在Gulp中，缓存是另一个插件，可以被别的插件使用，这样就促进了插件的可重用性。目前官方列出的有673个插件。
4、易学：Gulp的核心API只有5个，掌握了5个API就学会了Gulp，之后便可以通过管道流组合自己想要的任务。
5、流：使用Grunt的I/O过程中会产生一些中间态的临时文件，一些任务生成临时文件，其它任务可能会基于临时文件再做处理并生成最终的构建后文件。而使用Gulp的优势就是利用流的方式进行文件的处理，通过管道将多个任务和操作连接起来，因此只有一次I/O的过程，流程更清晰，更纯粹。
6、代码优于配置：维护Gulp更像是写代码，而且Gulp遵循CommonJS规范，因此跟写Node程序没有差别。
node
（1）nodejs 实践
（2）nodejs性能高在哪里
高并发非阻塞
IO 密集
（3）stream pipe
说不出背压机制
6、node
线上oom(通过重启，打profile，复现寻找bug点)。
基本的node性能监控
alinode等profile工具
浏览器渲染帧率、动画、性能相关，h5页面优化实践，
对小程序深度性能分析优化等方面很感兴趣
13、node服务线上的稳定，日志，安全，监控都有一定的了解，也有一定的线上运维经验
14、koa源码了解
http
| 一次完整的HTTP事务是怎样的一个过程？ |
1、 域名解析
2、发起TCP的3次握手
3、 建立TCP连接后发起http请求
4、服务器端响应http请求，浏览器得到html代码
5、浏览器解析html代码，并请求html代码中的资源
6、浏览器对页面进行渲染呈现给用户
- http协议类
1、HyperText Transfer Protocol，超文本传输协议。因特网上应用最为广泛的一种网络传输协议,所有的WWW文件都必须遵守这个标准
2、如果没有写端口，就会启用默认端口
http默认端口：80
https默认端口：443
| http协议的主要特点？ |
简单快速、灵活、无连接、无状态
1、简单快速：每个资源的url是固定的
2、灵活：每个http协议中有个头部分，有个数据类型，通过一个http协议，可以完成不同类型数据的传输。
3、无连接：连接一次就会断掉，不会保持连接。
4、无状态：客户端、服务端是两种身份，http传输完成后，下次连接再过来，服务端无法确认是否是上一次连接者的身份。
| http报文的组成部分？ |
1、请求报文= 请求行+请求头+空行+请求体
（1）请求行：包含http方法，页面地址，http协议，版本。
（2）请求头：key,value值，告诉服务端我要哪些内容。
（3）空行：分隔请求头、请求体。
2、响应报文= 状态行+响应头+空行+响应体
| http方法？ |
get：获取资源
post：传输资源
put：更新资源
delete：删除资源
head：获得报文首部
| post和get的区别？ |
9个区别，至少记住标记的4个
1、get在浏览器回退时是无害的，而post会再次提交请求。（记住）
2、get请求会被浏览器主动缓存，而post不会，除非手动设置。（记住）
3、get产生的url地址可以被收藏，而post不可以。
4、get请求只能进行url编码，而post支持多种编码方式。
5、get请求参数会被完整保留在浏览器历史记录里，而post中的参数不会被保留。（记住）
6、get参数通过url传递，post放在request body 中。（记住)
7、get请求在url中传送的参数是有长度限制的，而post没有限制。
8、对参数的数据类型，get只接受ASCII字符，而post没有限制。
9、get比post更不安全，因为参数直接暴露在url上，所以不能用来传递敏感信息。
- http状态码
1、状态码
1xx：指示信息-表示请求已接收，继续处理。
2xx：成功-表示请求已被成功接收。
3xx：重定向-要完成请求必须进行更进一步的操作。
4xx：客户端错误-请求有语法错误或请求无法实现。
5xx：服务器错误-服务器未能实现合法的请求。
| 有哪些常见状态码？ |
200 OK:客户端请求成功
206 Partial Content：客户发送了一个带有Range头的GET请求，服务器完成了它。 // video, audio
301 Moved Permanently：所请求的页面都已经转移至新的url
302 Found：所请求的页面已经临时转移至新的url
304 Not Modified：客户端有缓冲的文档并发出了一个条件性的请求，服务器告诉客户，原来缓冲的文档还可以继续使用。
400 Bad Request：客户端请求有语法错误，不能被服务器所理解
401 Unauthorized： 请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用
403 Forbidden：对被请求页面的访问被禁止
404 Not Found：请求资源不存在
500 Internal Server Error：服务器发生不可预期的错误
503 Server Unavailable：请求未完成，服务器临时过载或宕机，一段时间后可能恢复正常。
| 304原理，相关的header？ |
待完善
- 持久连接
| 什么是持久连接？ |
1、http协议采用“请求-应答”模式，当使用普通模式，即非keep-alive模式时，每个请求/应答，客户端和服务器都要新建一个连接，完成之后立即断开连接（http协议为无连接的协议）
当使用keep-alive模式（又称持久连接、连接重用）时，keep-alive功能使客户端到服务器端的连接持久有效，当出现对服务器的后继请求时，keep-alive功能避免了建立后者重新建立连接。
（aSuncat：chrome默认开启持久连接)
2、http1.1才支持，http1.0是不支持的。
- 管线化
| 什么是管线化？ |
在使用持久连接的情况下，某个连接上消息的传递类似于
请求1-> 响应1 -> 请求2 -> 响应2 -> 请求3 -> 响应3
某个连接上的消息变成了类似这样
请求1 -> 请求2 -> 请求3 -> 响应1 -> 响应2 -> 响应3
| 管线化注意点？ |
6个注意点，至少记住标记的3个
1、管线化机制通过持久连接完成，仅http/1.1支持此技术。（记住）
2、只有get和head请求可以进行管线化，而post则有所限制。（记住）
3、初次创建连接时不应启动管线机制，因为对方（服务器）不一定支持http/1.1版本的协议。（记住）
4、管线化不会影响响应到来的顺序，如上面的例子所示，响应返回的顺序并未改变。
5、http/1.1要求服务器支持管线化，但并不要求服务器也对响应进行管线化处理，只是要求管线化的请求不失败即可
6、由于上面提到的服务器问题，开启管线化很可能并不会带来大幅度的性能提升，而且很多服务器端和代理程序对管线化的支持并不好，因为现代浏览器如chrome和firefox默认并未开启管线化支持
-
http2
1、多路复用 -
https
| https是如何实现加密的？ |
待完善
- http基础
| 什么是RESTful API，怎么使用？ |
是一个api的标准，无状态请求。请求路由地址是固定的。标准有：.post .put .delete
需要再整理，待完善
web安全
| Web攻击方式有哪几种？ |
1、CSRF
2、XSS
3、SQL注入攻击
- CSRF
| CSRF基本概念和缩写？ |
CSRF，Cross-site request forgery，通常被称为跨站请求伪造。
| CSRF攻击原理？ |
1、前提：①用户在注册网站A登录过，②接口有漏洞。
2、引诱点击，往往是一个链接（这个链接自动携带cookie，不会带token），指向网站A的api，接口是get类型。浏览了A，浏览器自动生成新的cookie，网站A拿到cookie，接口运行。
| CSRF防御措施？ |
1、token验证。
注册网站，或者访问网站，服务器自动向本地存储一个token。
2、refer验证。
服务器判断页面是不是我这个站点来的页面。
3、隐藏令牌。
http的head头，不会放在链接上。
- XSS
| XSS基本概念和缩写？ |
XSS，cross-site scripting ，跨域脚本攻击。
| XSS基本概念和缩写？ |
原理：向页面注入脚本。
eg:提交区（评论区）写img标签，script标签，利用合法渠道向页面注入js
| XSS防御措施？ |
宗旨：让xss不可执行。
1、前端替换关键字，如替换<为< > 为>
2、后台替换。
- CSRF ,XSS的区别
| CSRF ,XSS的区别？ |
XSS是向页面注入js去运行，然后在js函数体中做他想做的事情。
CSRF是利用网站漏洞，自动执行接口。用户需要登陆网站。
前端性能
1、原则
（1）多使用内存、缓存或者其他方法。
（2）减少cpu占用，减少网络。
| 提升页面性能的方法有哪些？ |
一、加载页面和静态资源
1、静态资源压缩合并，减少http请求。
（1）减少http请求数量
（2）减少请求资源大小
2、非核心代码异步加载。
3、静态资源缓存：通过链接名称控制缓存，只有内容改变的时候，链接名称才会改变。
4、利用浏览器缓存
5、使用cdn让资源加载更快
6、预解析dns
7、使用ssr后端渲染，数据直接输出到html中（ssr：server site render）
二、页面渲染
1、css放前面，js放后面。
2、懒加载（图片懒加载，下拉加载更多）
<img id="img1" src="preview.jpg" data-realsrc="abc.jpg">
<script type="text/javascript">
var img1 = document.getElementById('img1');
img1.src = img1.getAttribute('data-realsrc');
</script>
3、减少dom查询，对dom查询做缓存。
// 未缓存dom查询
var i;
for (i = 0; i < document.getElementsByTagName('p').length; i++) {\
// todo
}
// 缓存了dom查询
var pList = document.getElementByTagName('p');
var i;
for (i = 0; i < pList.length; i++) {
// todo
}
4、减少dom操作，多个操作尽量合并在一起执行。
var frag = document.createDocumentFragment(); // 片段，循环插入dom，改成先插入到片段，再append到文档流
5、事件节流
var textarea = document.getElementById('text');
var timeoutId;
textarea.addEventListener('keyup', function() {
if(timeoutId) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(function() {
// 触发change事件
}， 100)
})
6、尽早执行操作（如DOMContentLoaded）
- 非核心代码异步加载
| 异步加载的方式？ |
1、动态脚本加载
script标签，加入到body中
2、defer
加载js的时候，script标签加defer和async
3、async
| 异步加载的区别？ |
1、defer是在html解析完之后才会执行，如果是多个，按照加载的顺序依次进行。
2、async是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关。
- 预解析dns
| 预解析dns的方式？ |
1、
<link rel="dns-prefetch" href="//host_name_to_prefetch.com">
2、强制打开a标签的dns预解析
<meta http-equiv="x-dns-prefetch-control" content="on">
页面中所有a标签，默认打开了dns预解析，如果链接是https开头的，默认关闭dns预解析
浏览器
浏览器缓存、浏览器渲染机制、浏览器渲染过程、重排reflow、重绘repaint、浏览器兼容
- 浏览器缓存
| 浏览器缓存的分类？ |
1、强缓存
// Expires：
Expires:Thu, 21 Jan 2017 23:39:02 GMT // value值表示的是绝对时间，一般都是服务器时间，可能与客户端时间不一样
// Cache-Control：
Cache-Control: max-age=3600 // value值是以客户端时间为准
如果服务器这两个时间都下发了，以后者为准
2、协商缓存：与服务器协商是否要用，是否过期
（1）Last-Modified/ If-Modified-Since
Last-Modified: Web, 26 Jan 2017 00:35:11 GMT
（2）Etag/ If-None-Match
if-none-match的值就是服务器发过来的etag的值
| 与浏览器缓存相关的http头有哪些？ |
Expires、Cache-Control、Last-Modified、If-Modified-Since、Etag、If-None-Match
| 浏览器缓存的原理？ |
待完善
| 浏览器缓存的区别/ 请描述一下cookies，sessionStorage和localStorage的区别？ |
1、cookie
（1）本身用于客户端和服务端通信
（2）但是它有本地存储的功能，于是就被“借用”
（3）document.cookie = …获取和修改即可
（4）cookie用于存储的缺点
①存储量太小，只有4kb
②所有http请求都带着，会影响获取资源的效率
③api简单，需要封装才能用document.cookie
2、localStorage,sesseionStorage
（1）html5专门为存储而设计，最大容量5M
（2）api简单易用
（3）lcoalStorage.setItem(key, value);localStorage.getItem(key);
（4）ios safari隐藏模式下:localStorage.getItem会报错，建议统一使用try-catch封装
3、sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
| localstorage的超出，容错，替换方案？ |
1、localstorage超出：
localStorage存储空间是每个域5M，如果超出了这个空间，就会报错：QuotaExceededError
2、容错、替换方案
（1）超了申请其他的域，修改nigix配置， postmessge通信往其他域上存取。
A、B页面引用C页面，C最好是主域。
iframe.contentWindow.postMessage()
window.parent.postMessage()
（2）indexDB
（2）最简单粗暴的方法，把之前的缓存都给删了。（不推荐）
| 如果 localStorage 存满了，再往里存东西，或者要存的东西超过了剩余容量，会发生什么？ |
存不进去并报错（QuotaExceededError）
- 浏览器渲染机制
| 什么是DOCTYPE及作用？ |
1、定义：DTD（document type definition,文档类型定义）是一系列的语法规则，用来定义XML或（X）HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。
2、作用：DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错。
| 常见的doctype有哪些？ |
1、HTML5： <!DOCTYPE html>
2、HTML4.01 Strict：该DTD包含所有html元素和属性，但不包括展示性的和启用的元素，如font
3、HTML 4.01 Transitional ：该DTD包含所有html元素和属性，包括展示性的和启用的元素，如font
| h5的doctype怎么写？ |
<!DOCTYPE html>
- 浏览器渲染过程
| 加载资源的形式？ |
1、输入url（或跳转页面）加载html
http://coding.m.imooc.com
2、加载html中的静态资源
<script src="/static/js/jquery.js"></scrip>
| 在浏览器中输入url，从输入url到html的详细过程/加载一个资源的过程？ |
1、dns解析：浏览器根据dns服务器得到域名的Ip地址
2、发送到服务器：向这个ip的机器发送http/https请求
3、服务器响应：服务器收到、处理并返回http/https请求
4、浏览器渲染：浏览器得到并返回内容
| 浏览器渲染页面的过程？ |
1、根据html结构生成dom Tree
2、根据css生成cssom（om：object model）
3、将dom和cssom整合行程renderTree
4、浏览器根据renderTree开始渲染和展示
5、遇到<script>，会执行并阻塞渲染
- 重排Reflow
1、定义
也叫回流，DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow
| 触发reflow？ |
1、增加、删除、修改dom结点时，会导致reflow或repaint
2、移动dom的位置，或是搞个动画的时候
3、修改css样式
4、resize窗口的时候（移动端没有这个问题），或者是滚动的时候，有可能会触发。
5、修改网页的默认字体时
| 如何避免回流？ |
1、属性替代：避免使用触发回流的css属性
2、新建图层：将频繁重绘回流的dom元素单独作为一个独立图层，那么这个dom元素的重绘和回流的影响只会在这个图层中
- 重绘Repaint
1、定义
当各种盒子的位置、大小及其他属性，如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，也是页面的内容出现了，这个过程称之为repaint
即页面呈现的内容统统画在屏幕上。
| 触发repaint？ |
1、dom改动
2、css改动
| 如何尽量减少repaint？ |
1、向浏览器中一次repaint一个节点
| 回流重绘的优化？ |
1、translate替换top，left, margin等位移属性。
top会触发回流但是translate不会
2、opacity替换visibility，但是要同时有translate3d 或 translateZ 这些可以创建的图层的属性存在才可以阻止回流。
visibility会触发重绘但不会触发回流
3、不要一条一条修改dom样式，预先定义好class，然后修改dom的class
4、可以将dom离线操作，如先display:none(会有一次reflow)，但是接下来的操作都不会重绘，等离线操作结束后，再显示。
5、不要把dom节点的属性值（如offsetWidth，offsetHeight, clientWidth, clientHeight）放在循环里，当成循环的变量，
浏览器回流的缓冲机制，即多个回流会保存在一个栈里面，当这个栈满了浏览器便会一次性触发所有样式的更改且刷新这个栈。但是如果你多次获取这些元素的实际样式，浏览器为了给你一个准确的答案便会不停刷新这个缓冲栈，导致页面回流增加。
所以为了避免这个问题，应该用一个变量保存在循环体外。
offsetWidth/ offsetHeight，会强制刷新缓冲机制
6、不要使用table，table的每一行改变，甚至一个单元格的样式更新，都会导致整个table回流
7、动画实现速度的选择
8、动画新建图层
9、使用gpu加速，位置变换时，用translate,persepective
cpu走主线到gpu，会有传输损耗
| 触发页面回流重绘的属性？ |
1、盒子模型相关：
width、height、padding、border、margin、display、border-width、min-height
2、定位属性及浮动：
top、right、bottom、left、position、float、clear
3、节点内部文字结构，行内属性
text-align、overflow、line-height、vertical-align、font-weight、white-space、font-size
| 只触发页面重绘的属性？ |
color、border-style、border-radius、visibility、background、box-shadow、outline
- 浏览器兼容
| 你做的页面在哪些流览器测试过, 这些浏览器的内核分别是什么? |
IE6、7、8、FF、Opera、Safari、Chrome、Maxthon
IE: trident内核。除 IE 外，众多的 IE Shell（如 Maxthon ）都使用trident这个内核。
Firefox：gecko内核
Safari：webkit内核
Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)
| 经常遇到的浏览器兼容问题？ |
1、在有的浏览器中，默认字体大小为12px,所以在设字体大小的时候，最小设为12px，如果在做的过程中，发现字体小于12，可直接作为图片使用
2、a标签对里不能嵌套a标签对
3、若给a标签内的内容样式加上样式，需要设置display:block;（在IE中如果设置宽高会自动变成块，在FF中则不会），但如果设置了float属性，就不需要设置display:block。
4、ul，ol在FF默认情况下，有list-style-type样式和padding值，dl在IE和FF默认情况下，有padding值，所以应该事先声明ul,li,ol,dl,dd,dd{margin:0;padding:0}。
5、作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应
6、关于手形光标. cursor: pointer. 而hand 只适用于 IE.
7、css布局中的居中问题:在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“margin-right: auto;margin-left: auto; ”需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义margin-right: auto;margin-left: auto; 就可以了。
8、浮动ie产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; // 这种情况之下IE会产生200px的距离，这时需要设置display:inline; 使浮动忽略}
算法相关
通常情况下，搞金融的都会考算法。
一、排序
快速排序：https://segmentfault.com/a/1190000009426421
选择排序：https://segmentfault.com/a/1190000009366805
希尔排序：https://segmentfault.com/a/1190000009461832
二、堆栈、队列、链表
堆栈：https://juejin.im/entry/58759e79128fe1006b48cdfd
队列：https://juejin.im/entry/58759e79128fe1006b48cdfd
链表：https://juejin.im/entry/58759e79128fe1006b48cdfd
（1）js数组本身就具备堆栈和队列特性。
（2）堆栈：先进后出。
三、递归
递归：https://segmentfault.com/a/1190000009857470
（1）60%的算法题都用到递归。
四、波兰式和逆波兰式
理论：http://www.cnblogs.com/chenying99/p/3675876.html
源码：https://github.com/Tairraos/rpn.js/blob/master/rpn.js
| 手写一个冒泡排序？ |
1、比较两个相邻的元素，如果后一个比前一个大，则交换位置。
2、 第一轮的时候最后一个元素应该是最大的一个。
3、按照第一步的方法进行两个相邻的元素的比较，由于最后一个元素已经是最大的了，所以最后一个元素不用比较。
function bubbleSort(arr) {
let len = arr.length;
for (let i = 0; i < len; i++) {
for (let j = 0; j < len - i - 1; j++) { // j=0时，得到最大的元素，放在了最后面
if (arr[j] > arr[j+1]) {
[arr[j], arr[j+1]] = [arr[j+1], arr[j]];
}
}
}
return arr;
}
let arr = [3,5,1,2,7,8,4,5,3,4];
let sortedArr = bubbleSort(arr);
console.log(sortedArr);
| 手写一个快速排序？ |
第一次排序的时候将数据分成两个部分，一部分比另外一部分所有的数据都要小，然后递归调用，在两边都实行快速排序。
function quickSort(arr) {
if (arr.length <= 1) { // 如果数组长度小于等于1无需判断直接返回即可
return arr;
}
var pivotIndex = Math.floor(arr.length / 2); // 取基准点
var pivot = arr.splice(pivotIndex, 1)[0]; // 取基准点的值,splice(index,1)函数可以返回数组中被删除的那个数
var left = []; // 存放比基准点小的数组
var right = []; // 存放比基准点大的数组
for (var i = 0; i < arr.length; i++) { // 遍历数组，进行判断分配
if (arr[i] < pivot) {
left.push(arr[i]); // 比基准点小的放在左边数组
} else {
right.push(arr[i]); // 比基准点大的放在右边数组
}
}
//递归执行以上操作,对左右两个数组进行操作，直到数组长度为<=1；
return quickSort(left).concat([pivot], quickSort(right));
};
var arr = [1, 2, 3, 55, 7, 99, 8, 100, 1021];
var sortedArr = quickSort(arr);
console.log(sortedArr);
设计模式
| 对mvvm的理解？ |
1、MVVM 是 Model-View-ViewModel 的缩写。
2、Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
3、View 代表UI 组件，它负责将数据模型转化成UI 展现出来。
4、ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。
5、在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
| mvvm框架实现的三要素/ vue的三要素？ |
1、响应式：vue如何监听到data的每个属性变化？
（1）修改data属性后，vue立刻监听到。Object.defineProperty
var __name = 'may';
Object.defineProperty(obj, 'name',{
get: function() {
return __name;
},
set: function(newVal) {
__name = newVal; // 修改__name = 'april',obj.name就会变成april
}
})
（2）data属性代理到vm上
2、模板引擎：vue的模板如何被解析，指令如何处理？
（1）模板是什么
①本质：字符串
②有逻辑，如v-if, v-for等
③与html格式很像，但有很大区别
④模板最终必须转换成Js代码（js函数-render函数），因为
有逻辑（v-if, v-for），必须用js才能实现（图灵完美语言）
转换为html渲染页面，必须用js才能实现
（2）render函数
（3）render函数与vdom
3、渲染：vue的模板如何被渲染成Html?以及渲染过程？
正则表达式
| 写一个function，清除字符串前后的空格。（兼容所有浏览器）？ |
function trim(str) {
if (str && typeof str === 'string') {
return str.replace(/(^\s*)|(\s*)$/g, '');
}
}
hybrid
15、hybrid业务开发经验，对离线包机制熟悉，多各种优化方案也了解得比较清楚。
7、离线包加载和更新机制，
22、servive worker, web worker
全栈
8、图片加载的一个细节，能够从全栈角度给出一些高并发情况下的系统扩展思路
27、跨域access-control-allow-origin多域名白名单处理
cdn部署
前端框架选型
人员协调项目延期
整个部门没有用到mock平台，前后端分离
自己写了服务在服务端用webpack+multi方式融合不同的业务模块打包
Mbox的数据管理方案（mbox的数据状态流转机制）
数据库，数据索引，食物，数据库锁的问题
5、前端核心监控数据来源（performance api + 业务定义为主）
31、逻辑外链如何保持多个数据同步
项目
16、资讯类的项目，有哪些技术特点（本想了解list相关的回答）
详情里面做了哪些
详情页对性能要求高，有哪些优化？配置缓存来优化。
缓存如何配置，
哪些缓存头来控制的缓存
类似静态化的性能优化，采用ssr比较适合详情页的技术
1、哪些工作是偏技术的，需要技术来解决的