19面试总结
HTML&CSS问题
JavaScript问题
框架问题
兼容问题
其他杂项
手写插件类
非技术相关类
HTML&CSS问题
- 常见的布局有哪些，自适应布局你做过那些？
一：单列布局
二：双列布局
三：三列布局
自适应布局：
一：bootstrrap----->grid布局
二：媒体查询
三：flex自适应布局
flex垂直居中的属性有哪些？
flex-wrap：
nowrap：flex容器为单行。该情况下flex子项可能会溢出容器
wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse：反转 wrap 排列。
justify-content:
flex-start：弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
flex-end：弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
center：弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。
space-between：弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于'flex-start'。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。
space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于'center'。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半
- 两列布局，如何实现右边高度随着左边高度自适应？
方法一【利用table的特性】：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>高度自适应title>
head>
<style>
div{
display: table;
}
section{
background:red;
width:200px;
word-break: break-all;
border:1px solid #fff;
display: table-cell;
}
style>
<body>
<div>
<section>222222222222222222阿三顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶阿三顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶阿三顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶section>
<section>section>
div>
body>
html>
方法二：利用margin,padding的特性
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<style>
* {
margin: 0;
padding: 0;
}
.Test {
padding-left: 100px;
overflow: hidden;
}
.left,
.right {
float: left;
}
.left {
position: relative;
left: -100px;
background: lavender;
width: 100px;
height: 100px;
}
.right {
background: lightpink;
width: 100%;
margin-bottom: -9999px;
padding-bottom: 9999px;
}
style>
<body>
<div class="Test">
<div class="right">div>
<div class="left">div>
div>
body>
html>
- 能简单叙述下Sticky Footer布局
方式一：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<style>
.samecon h2 {
position: -webkit-sticky;
position: sticky;
bottom: 0;
background: #ccc;
padding: 10px 0;
}
style>
<body>
<div class="con">
<div>这是啊收到了喀什觉得div>
<div>这是啊收到了喀什觉得div>
<div>这是啊收到了喀什觉得div>
<div>这是啊收到了喀什觉得div>
<div>这是啊收到了喀什觉得div>
<div class="samecon">
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<p>这是一段文本p>
<h2>标题一h2>
div>
div>
body>
html>
// 优点：配置简单
// 缺点：兼容性不好
方式二：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<style>
*{
margin:0;
}
.content {
min-height: calc(100vh - 50px);
}
.footer {
height: 50px;
}
style>
<body>
<div class="content">
<p>我p>
<p>我p>
<p>我p>
<p>我p>
<p>我p>
<p>我p>
div>
<footer class="footer">
我知道了
footer>
body>
html>
方式三：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<style>
.wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
style>
head>
<body>
<div class="wrapper">
<div class="content">
....
div>
<footer class="footer">
<p>我知道了p>
<p>我知道了p>
<p>我知道了p>
footer>
div>
body>
html>
sticky footer 布局传送门
JavaScript问题
- 做过横屏适配没有？横屏中如何去检测做适配？如何检测到用户是否横屏了？
没有。
一：通过对窗口resize事件的监听，监听长宽比，即可判断出是否横屏
二：通过JS事件，可以监测出是否横屏。
- TS中泛型和类的区别是什么？
mark - 比如现在有一个这样的场景，一个伴唱到两分10秒，这时候呢用户想开原唱这时候咋办，在移动端怎么优化这种体验？
mark
mark
mark - 从一个数组中找出最大值？
const arr = [1,2,4]
function maxNum(arr){
let max = arr[0]
for(let i = 1; i < arr.length; i++){
if(max<arr[i]){
max = arr[i]
}
}
return max
}
- JS中setTimeout和setInterval的却别是什么？
一：setTimeout更新消耗性能【原因是使用setTimeout递归会多次创建定时器，产生多个定时器ID,所以会较setInterval而言较消耗性能。****所以一般设置timer=null不会清除定时器，因为定时器是靠ID来是否清除的】
二：setInterval指的时间间隔再去执行，而setTimeout是延迟多少秒后再去执行方法；但使用setInterval是有副作用的。
【【【比如定时器内的代码，大于定时器的间隔时间，这时候定时器里就会存在一个定时器内代码的副本，并且再此次定时器代码结束后，就会执行下一个定时器代码，这样代码所产生的效果就会达不到你的预期】】】
解决办法使用setTimeout递归
- 请问除了定时器的方法，还有什么方法可以使代码在固定时间之后被掉用
function sleep(delay){
var start = (new date()).getTime()
while((new date()).getTime() - start < delay){ //使用for方法也行
continue
}
reuturn 1
}
sleep()
- 请问利用正则如何匹配非ab字符串？
.*??=[^a][^b]?<=.*?
- 请问XSS和CSRF之间的区别？
XSS:跨站脚本攻击
具体可看传送门： https://www.cnblogs.com/mao2080/p/9460397.html
CSRF:跨站点请求伪造
具体可看传送门：https://blog.csdn.net/xiaoxinshuaiga/article/details/80766369
- get和post的区别
一：get在请求时是无害的【即具有幂等性】，而post不一样。
二：get随在url后面，有长度限制。
三：GET请求只能进行url编码，而POST支持多种编码方式。
四：GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
五：GET产生一个TCP数据包；POST产生两个TCP数据包。【post是先通知，OK后在发送数据。所以get性能更好一些】
六：get可以保存成书签，但post不可以
- JS中原型链的顶端是什么？
JS中原型链的顶端是null
- Vue双向绑定原理是什么？是怎么实现双向绑定呢，怎么去通知数据更改呢？
其原理是Object.defaineProperty()
实现原理：实现一个mvvm大致可以有三部分组成，observer用来劫持坚挺所有对象属性；watcher作为observer和compile的墙梁，当监听到mvvm中的值改变之后，执行compile里的更新函数，compile编译之后到视图层上。
在初始化MVVM的时候，会执行代理数据，使得vm.$data能访问的到
流程图如下：
- 手写一个数组迭代mao方法的polyfill？、
Array.prototype.myMap = function(fn){
if(this.constractor !== Array){
throw Error('请使用数组方法来调用该方法')
}
var arrLength = this.length,keyValue,newArr
for(var i = 0 ; i < arrLength; i++){
keyValue = this[i]
newArr.push(fn.call(context||null,keyVaule,i,this))
}
return newArr
}
- 请手动实现一个apply方法的polyfill
ES6的实现方法
Function.prototype.myApply = function (context) {
if (typeof this != 'function') {
throw Error('请用方法来调用该方法')
}
context = context || window
let fn = this
let arg = [...arguments].slice(1)
context._fn = fn
let result = context._fn(...arg)
delete context._fn
}
ES5的实现方法
Function.prototype.myApply = function(){
if (typeof this != 'function') {
throw Error('请用方法来调用该方法')
}
context = context || window
var arfArr = []
for(var i= 1; i < arguments.length;i++){
argArr.push('arguments['+i+]');
}
obj._fn_ = this;
eval('obj._fn_('+arg+')')//字符串拼接，JS会调用arg数组的toString方法，这样就传入了所有参数。
delete obj._fn_;
}
- 实现一个bind的polyfill
Function.prototype.myBind = function(context,...arg){
let fn = this
return function (...arg2){
return fn.apply(context,[...arg,...arg2])
}
}
- classA 的是继承了谁的实例，是谁的原型？
所有函数的原型都是Object的实例，因此默认原型都会包含一个内部的指针，指向Object.prototyope。
- 什么是原型链？
原型链指的就是函数原型之间的继承问题，比如A继承B，那么A.__proro__是指向B.prototype，即A的原型对象中将会包含一个指向B的原型的指针，而B中又会有指向B的构造函数B__prototy__属性又会指向Object.
- 请问在实例化一个对象，在这个过程中发生了什么？
//红宝书答案
// 一：创建一个新对象
// 二：将构造函数的作用域赋给新对象【this指向这个新对象】
// 三：执行构造函数中的方法【给该this上添加属性和方法】
// 四：隐式的返回this对象
//更具体的代码解释
function New(f){
// 返回一个fn
return function(){
var o = {
'__proto__':f.prototype
}
f.apply(o,arguments)
return o
}
}
function Person(name,age){
this.name = name
this.age = age
}
var obj = New(Person)('闫杰'，‘25’)
框架问题
- 做过数据可视化没有？比如D3.js，echarts.js？
做过一些图表数据的展示 - React中setState之后发生了什么?
在代码中调用setState函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。 经过调和过程，React 会以相对
高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个UI界面。 在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差
异对界面进行最小化重渲染。 在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染
- JS的几种基本类型？
六种基本类型：undefined,null,string,number,boolean,symbol
一种引用类型：object[无序属性的集合]
- 说一下Vue的优缺点是什么？
【PS】其实就是在问三大框架的区别
优点：
一：简单易学，兽上手快。
二：生态较亲民，指对中国程序员，文档深入浅出
三：.vue写法简洁明了，style、css、template文件都放在了一起
四：相对于react每个组件都自带了shouldComponentUpdate
五：适合短平快的项目，指令定义好了
六：vue的插槽要比react的children方便实用
七：JSX更偏向逻辑层，而template更偏向于视图层
缺点：
一：会使人过度依赖框架
二：不够灵活，指令什么都给封装好了，所以可控性其实不如react
- 简述一下react从一个请求到接受到结果，这个流程是怎样子的？
mark
其他杂项
- vue-cli2中怎么区分开发环境和测是环境？
传送门
一：通过cross-env
二：通过新增配置文件
- SPA项目是怎么优化SEO的？
mark - 既然你用过elementUI,那么你是如何更改elementUI中的样式？
场景【使用SCSS预编译】
一：去掉该文件的scoped属性
二：使用/deep/
- 浏览器从输入URL到页面展现出视图，这个过程中发生了什么？
一：进行DNS寻址【寻址顺序：浏览器缓存--->操作系统缓存--->在host文件中查找---->路由器缓存--->ISP DNS缓存--->顶级DNS服务器/根DNS服务器】
二：C端向服务器发起TCP连接‘【三次握手】
三：发送数据请求
四：返回相应内容
五：四次挥手，关闭连接
六：浏览器拿到请求到的资源，开始渲染呈现给用户【CSSOM&&DOM--->RENDERTREE--->layout--->panit】
1.不管内联还是外联的CSS都会阻塞DOM的render,但不会解析DOM的解析
2.不管是内联还是外联的JS都会影响DOM的解析以及渲染
3.首屏时间和DomContentLoad事件没有必然的先后关系，所有CSS尽早加载是减少首屏时间的最关键
4.script标签放在body底部，做与不做async或者defer处理，都不会影响首屏时间，但影DomContentLoaded【DOM解析完成】和load的时间，进而影响依赖他们的代码的执行的开始时间。
传送门：https://www.cnblogs.com/Bonnie3449/p/8419609.html
chrome面板中queueing，stalled,reuqest-sent，TTFB，content-loaded各代表什么意思？
queueing:指某个请求正在排队。浏览器对服务器每个的并发请求为6-8个
stalled：重传有多重原因，stalled阶段时TCP连接的检测过程，如果检测成功就会继续使用该TCP连接发送数据，如果检测失败就会重新建立TCP连接。所以出现stalled阶段过长，往往是丢包所致，这也意味着网络或服务端有问题。【传送门：https://www.kkpan.com/article/2423.html】
request-sent：请求发出的时间
TTFB：浏览器请求发出之后，到接收到第一个字符传的过程
content-load：代表请求完成的时间
- 请说下性能优化中的DNS预解析？
在页面加载的过程中，浏览器有异步进程去进行域名的DNS寻址，这样就可以在转页的时候， 较少DNS的寻址过程。
正确的使用方式：
1.对静态资源域名做手动dns prefetching。
2.对js里会发起的跳转、请求做手动dns prefetching。
3.不用对超链接做手动dns prefetching，因为chrome会自动做dns prefetching。
4.对重定向跳转的新域名做手动dns prefetching，比如：页面上有个A域名的链接，但访问A会重定向到B域名的链接，这么在当前页对B域名做手动dns prefetching是有意义的。
其他
1.假设页面Head里面有个css链接, 在当前页的Head里加上对应的手动dns prefetching的link标签，实际上并没有好处。
2.普遍来说合理的dns prefetching能对页面性能带来50ms ~ 300ms的提升，有人做了这方面的统计。
3.如chromium的官方文档所说，dns prefetching的网络消耗是极低极低的：
Each request typically involves sending a single UDP packet that is under 100 bytes out, and getting back a response that is around 100 bytes. This minimal impact on network usage is compensated by a significant improvement in user experience.
4.如chromium的官方文档所说，chrome使用8个线程专门做dns prefetching 而且chrome本身不做dns记录的cache，是直接从操作系统读dns --直接修改系统的dns记录或者host会直接影响chrome。
5.手动dns prefetching的代码实际上还是会增加html的代码量的，特别是域名多的情况下。
所以，最优的方案应该是：通过js初始化一个iframe异步加载一个页面，而这个页面里包含本站所有的需要手动dns prefetching的域名。
缓存下来进行寻址【https://www.cnblogs.com/zdz8207/p/seo-DNS-Prefetching.html】
- http和https的区别是什么？
区别:
一：https默认端口是443，http默认端口是80
二：https安全通信的基础是SSL加密和CA证书生成数字签名，而HTTP是明文传输
三：https在进行数据传输时所需要的时间长，因为里面包含有加密解密以及验证的过程，http则传输正好相反
HTTPS的优点：
一：使用HTTPS协议可认证用户和服务器，确保数据发送到正确的客户机和服务器；
二：HTTPS是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本
三：HTTPS连接缓存不如HTTP高效
缺点：
一：SSL证书需要钱，功能越强大的证书费用越高，个人网站、小网站没有必要一般不会用。
HTTP事务过程： 向服务器发起SSL连接请求---->服务器和客户端协商SSL加密细节--->通过公钥加密将信息传给服务端---->服务端解密进行通信。
- 418状态码是什么意思？
i am a teaport
- 你有做过小程序么?小程序的api能不能举例说几个？以及最近小程序有哪些API更新了？
答：有做过。利用canvas集合做小程序海报；利用map组件做房子周边资源展示；利用createSelectorQuery API做骨架屏；使用swiper组件做轮播；
有个很大的变化就是授权机制的变化，获取用户手机号或者获取用户手机号，必须用户同意授权才可。
- restfulapi的规范是什么？
我的回答：其实就是和H5标签一样，语义化。
传送门一：http://www.ruanyifeng.com/blog/2018/10/restful-api-best-practices.html
传送门二：http://www.ruanyifeng.com/blog/2014/05/restful_api.html - ngnix有了解过么？
我的回答：有了解，但不是太多。一：用来做负载均衡。二：跨域做反向代理，解决跨域问题。
传送门：https://segmentfault.com/a/1190000019725263 - 请你简述一下什么是MVC、什么是MVVM，以及MVVM的优缺点？
MVC
M—逻辑层，负责数据的存取，然后将数据返回给V层。
V—视图层，负责展示UI界面
C—负责接收V层所作的交互而产生的指令，然后让M层处理
MVVM
M—数据处理层，负责处理V层过来的交互指令 【对于VUE对应着script里的内容】
VM—绑定数据，映射数据，让视图和数据进行通信，靠的是中间的绑定器【t对于VUE对应着template部分的内容】
V—展示数据【对于VUE来说对应真实的html和css】
优点：
一：双向绑定技术
二：耦合性更低，视图层可以更专注干事情
三：可以对View或ViewController的数据处理部分抽象出来一个函数处理model
缺点：
一：不利用代码重用。
二：代码难以调试
非技术相关
- 请你评价下自己，说下自己的优缺点是什么？
个人认为较好的回答思路，就是
模板一：Too young too simple
缺点是自己太年轻，无论是技术层面还是事务方面比不上有很多年的前辈们。比如一个业务过来，我的技术选型可能是合适的，但前辈们所做的技术选型会周全一些。
优点是自己年轻，有更多的精力去拼搏，可塑性强，可以更好的塑造自己，未来有无限的可能。
模板二：
优点：做事有条理性，比如两个任务同时过来了，我会判断哪个需求优先级高，需求中哪个点需要优先做。对需求的认知比较高，在开发过程中，比如说有些功能点觉得很不合理或者不理解，我会向产品问清楚说清楚。
缺点：计划性太强，总会让人觉得缺乏弹性。对于任务工作，我比较在意细节，比如说代码有两种写的方案，A方案对于代码更好，但花时间会长一点，这样有时候我就会来选择A方案来写代码。
- 有个傻X的产品，让你摘月亮给他，你怎么办?
这个功能做不了，并且解释做不了原因，然后让他顺便去问问别的同事，别人说能我就能。 这是那个摘月亮问题。
- 阿里能做到，你必须帮我做到，那么你会怎么办?
我说的就是我能力不OK，我做不出来，有待进步。【其实我想说：你给我阿里的资源，给我阿里的待遇，那有什么做不出来呢】
- 你要上线一个会损害公司利益的产品，上线之后你会怎么说？
我说有应急方案，在产品上线之前，有会损害公司利益情况，一定要说清楚，讨论清楚。【其实我想说，实在是XX】