html

h5新特性

https://www.cnblogs.com/ainyi/p/9777841.html

1. 语义化标签：header、footer、section、nav、aside、article
2. 增强型表单：input 的多个 type
3. 新增表单元素：datalist、keygen、output
4. 新增表单属性：placehoder、required、min 和 max
5. 音频视频：audio、video
6. canvas
7. 地理定位
8. 拖拽
9. 本地存储：localStorage - 没有时间限制的数据存储;sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除
10. 新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
11. WebSocket：单个 TCP 连接上进行全双工通讯的协议

新增的有：绘画 canvas; 用于媒介回放的 video 和 audio 元素; 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失; sessionStorage 的数据在浏览器关闭后自动删除; 语意化更好的内容元素，比如 article、footer、header、nav、section; 表单控件，calendar、date、time、email、url、search; 新的技术 webworker, websocket; 新的文档属性 document.visibilityState 移除的元素有：纯表现的元素：basefont，big，center，font, s，strike，tt，u; 对可用性产生负面影响的元素：frame，frameset，noframes；

判断null

console.log( 0 == -0)//true
console.log( NaN == NaN ) //false NaN与任何都不等

Object.is( 0 == -0 )  // false
Object.is( NaN == NaN )  //true  
Object.is判断依据：字符串，长得一样就相等

console.log(([])?true:false); 
console.log(([]==false?true:false)); 
console.log(({}==false)?true:false) 
第一题 Boolean([]) //true 
布尔类型里只有这几参数个返回false，其它都为true 
Boolean(undefined) // false
Boolean(null) // false 
Boolean(0) // false 
Boolean(NaN) // false 
Boolean('') // false 
第二题，和第三题 布尔类型与其它任何类型进行比较，布尔类型将会转换为number类型。 
Number([])返回0所以第二题为true Number转换类型的参数如果为对象返回的就是NaN, 
那么Number({})返回的就是NaN。 
通过Object.prototype.toString.call({})来判断类型，
0与NaN相比为false 所以 true  true false

手写meta标签

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

常见的内置错误

ReferenceError: 引用的变量不存在
TypeError: 数据类型不正确的错误
RangeError: 数据值不在其所允许的范围内
SyntaxError: 语法

内存溢出

内存溢出（Out Of Memory）：就是申请内存时，JVM没有足够的内存空间。通俗说法就是去蹲坑发现坑位满了。

var obj = {}
for (var i = 0; i < 10000; i++) {
    obj[i] = new Array(1000000)
    console.log("------")
}

web worker（多线程）

主线程代码：

var worker = new Worker（"worker.js"）
//接收数据
worker.onMessage = function(event){
    console.log("主线程接收",event.data)
}
//向分线程发消息 number是主线的数据
worker.postMessage(number)
console.log("主线程发送",number)

分线程 (worker.js) 代码：

javascript

function fibonacci (n) {  
  return n<2? 1 : fibonacci(n-1)+fibonacci(n-2)
}
var onmessage = function(event){  
  var numder = event.data  
  console.log("分线程接收",event.data)  
  var result = fibonacci(numder)  
  postMessage(result)  
  console.log("分线程发送",result)
}

移动端300毫秒延迟

起因：区分双击和单击，会出现了300ms延迟有三种办法来解决这个问题： -

1. 通过 meta 标签禁用网页的缩放。 -
2. 通过 meta 标签将网页的 viewport 设置为 ideal viewport。 -
3. 调用一些 js 库， 
比如 FastClick 
1 禁止缩放 直接去掉点击延迟     <meta name = "viewport" content = "user-scalable=no" / >     <meta name = "viewport" content = "initial-scale=1, maximum-scale=1" / >     
2 更改默认的视口宽度     --没有完全禁止缩放， 只是禁用了默认的双击缩放行为 <meta name = "viewport" content = "width=device-width" / >     
3 CSS touch - action html {     touch - action: none } touch - action 默认值为 auto， 将其设置 none 即可移除目标元素的 300 毫秒延迟。 只有 IE 浏览器中可以使用 touch - action 属性， 其他浏览器会被忽略
4 指针事件的polyfill 有一些 JS 库， 可以让我们使用指针事件 比如Google 的 Polymer Polymer 则是通过判断标签上的 touch - action 属性， 而非 CSS 代码。 
<a href = "http://" touch - action = "none" > < /a>
5 FastClick.js // FastClick 的使用方法，在 window.load 事件之后， 在 <body> 上调用 FastClick.attach() window.addEventListener("load", () => {     FastClick.attach(document.body); }, false) // 并且当 FastClick 检测到当前页面使用了基于 <meta> 标签或者 touch-action 属性的解决方案时，会默默退出。

css

不换行显示省略号

清除浮动

//父元素 overflow：hidden //父元素 float //父元素设置高度 clearfix clearfix::after

怪异盒模型 --IE盒模型

width已经包含了padding和border值标准盒模型 width只是内容区content的宽度设置!DOCTYPE html

外边距合并

margin合并解决方法:（开启BFC） overflow :hidden 或者 float :left 或者position: absolute

不换行显示省略号

水平居中方案

https://www.jianshu.com/p/6bfb2afd658e?utm_campaign=haruki&utm_content=note&utm_medium=reader_share&utm_source=qq

对于宽高固定的子元素

（1）我们可以利用margin:0 auto来实现元素的水平居中。  

（2）利用绝对定位，设置四个方向的值都为0， 并将margin设置为auto div {     position: absolute;     width: 300px;     height: 300px;     margin: auto;     top: 0;     left: 0;     bottom: 0;     right: 0;     background-color: pink;     /*方便看效果*/ } 

（3）利用绝对定位， div {     position: absolute;     /*绝对定位*/     width: 500px;     height: 300px;     top: 50%;     left: 50%;     margin: -150px 0 0-250px;     /*外边距为自身宽高的一半*/     background-color: pink;     /*方便看效果*/ } 

（4）利用绝对定位 div {     position: absolute;     /*相对定位或绝对定位均可*/     width: 500px;     height: 300px;     top: 50%;     left: 50%;     transform: translate(-50%, -50%);     background-color: pink;     /*方便看效果*/ } 

（5）使用flex布局  .container {     display: flex;     align-items: center;     /*垂直居中*/     justify-content: center;     /*水平居中*/ }

对于宽高不定的子元素，上面的后面两种方法，可以实现元素的垂直和水平的居中

.parent {     display: table-cell;     vertical-align: middle;     text-align: center; } .child {     display: inline-block; }

less和sass说说你最大的感受

	less	sass
变量	@变量名	$变量名
混合声明	.+名称(@, @, @)	@mixin +名称($, $, $)
混合调用	.+名称(params1，params2)	@include + 名称(params1，params2)

行内元素行内块元素 3px是什么

行内元素特征：

(1)设置宽高无效 (2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间 (3)不会自动进行换行行内块状元素特征：(1)不自动换行(2)能够识别宽高(3)默认排列方式为从左到右当块级标签（如div）内包含了行内标签（如img），则外层元素与内层元素底部会出现3px的间隔； 3px是换行符占的空间解决办法有三种：

设置div{ font-size: 0}；将外层块级标签的font-size设置为0；
设置img{ display: block}; 将内层行内标签的display设置为block，将其变为块级标签；
设置img{ vertical-align:top; }；将内层行内标签的vertical-align设置为top；

粘性定位

position：sticky（吸顶）

display:none 和 visible:hidden的区别

很多前端的同学认为visibility: hidden和display: none的区别仅仅在于 display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留，实际上没那么简单，visibility是一个非常有故事性的属性 1、visibility具有继承性，给父元素设置visibility:hidden; 子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible, 则子元素又会显示出来。这个和display: none有着质的区别 2、visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样 3、CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。

js

隐式转换 ==

对象/数组==字符串，对象.toString()变为字符串 null == undefined相等 NaN == NaN 不相等剩下的都是转化为数字

数据类型, object和基础数据类型的区别

基本数据类型：string, number, boolean, null, undefined。 object --引用类型 --保存在堆内存新建则开辟新的空间储存，都有自己的内存地址，通过指向引用或者修改

常见的原生javascript DOM操作

ES6

冒泡捕获

div.addEventListener("click", function(){}, false) --true是捕获false是冒泡阻止冒泡：e.stopPropagation() 阻止冒泡ie：e.cancelBubble = true 阻止默认行为： e.preventDefault 阻止默认行为ie： e.returnValue = false 阻止默认行为：return false target 触发事件的元素 currentTarget 绑定事件的元素

事件代理 (事件委托)

原型和原型链

https://blog.csdn.net/u014465934/article/details/84836731

防抖与节流

抖动：事件触发多次防抖：事件触发，重置，操作刷新事件节流：上次事件触发了，期间操作无用函数的this 无调用者，this是window，有就是调用者

offsetWidth/offsetHeight, clientWidth/clientHeight 与 scrollWidth/scrollHeight 的区别？

clientWidth/clientHeight 内部宽度只包含 content + padding 不包含滚动条。

clientTop 返回的是上边框的宽度。

clientLeft 返回的左边框的宽度。

offsetWidth/offsetHeight 元素的布局宽度包含 content + padding + border 包含了滚动条。

offsetTop 返回的是当前元素相对于其 offsetParent 元素的顶部的距离。

offsetLeft 返回的是当前元素相对于其 offsetParent 元素的左部的距离。

scrollWidth/scrollHeight 返回值包含 content + padding + 溢出内容的尺寸。

scrollTop 属性返回的是一个元素的内容垂直滚动的像素数。

scrollLeft 属性返回的是元素滚动条到元素左边的距离。

执行队列

https://www.jianshu.com/p/bfc3e319a96b

前端安全

前端安全面试题大全

jQuery

$().appendTo() // 添加html到末尾 $().attr('href') // 获取元素href属性 $(document).ready() 在window.onload()之前 addClass() 和 removeClass() // 添加移除class document.getElementbyId("myId") 比 $("#myId")高效，因为它直接调用了 JavaScript 引擎。

jsonp的原理为什么他不是ajax请求

https://zhidao.baidu.com/question/685754206559710972.html 1jsonp的原理: 就是利用浏览器可以动态地插入一段js并执行的特点完成的。

2.为什么不是真正的 ajax?

ajax的核心是：通过XmlHttpRequest获取非本页内容，

jsonp的核心：动态添加script标签来调用服务器提供的js脚本。

3..ajax和jsonp的调用方式很像，目的一样，都是请求url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；还是有不同点的：

4实质不同　ajax的核心是通过xmlHttpRequest获取非本页内容　jsonp的核心是动态添加script标签调用服务器提供的js脚本

6ajax通过服务端代理一样跨域　jsonp也不并不排斥同域的数据的获取

7jsonp是一种方式或者说非强制性的协议　ajax也不一定非要用json格式来传递数据　 8..jsonp只支持get请求，ajax支持get和post请求

axios并发请求怎么操作

vue相关

Vue性能优化方案

1 使用异步组件 2 使用keep-alive组件 3 减少模板中的计算属性和方法 4 减少频繁的dom操作 5 v-if v-show的合理使用 6 优化列表渲染，key属性的使用、虚拟列表优化 7 异步更新数据，减少dom的操作 8 webpack代码分割，按需加载 9 gzip压缩

server{
    gzip on;
    gzip_buffers 32 4K;
    gzip_comp_level 6;
    gzip_min_length 100;
    gzip_types application/javascript text/css text/xml;
    gzip_disable "MSIE [1-6]\."; #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
    gzip_vary on;
}

10 服务端渲染

11 使用render函数

Vue的观察者模式

观察者（订阅者）-watcher

update():当事件发生时，具体要做的事情目标(发布者) – Dep

subs 数组:存储所有的观察者 addSub():添加观察者 notify():当事件发生，调用所有观察者的 update() 方法

没有事件中心

生命周期

beforeCreate阶段：vue实例的挂载元素el和数据对象data都是undefined，还没有初始化。
created阶段：vue实例的数据对象data有了，可以访问里面的数据和方法，未挂载到DOM，el还没有
beforeMount阶段：vue实例的el和data都初始化了，但是挂载之前为虚拟的dom节点
mounted阶段：vue实例挂载到真实DOM上，就可以通过DOM获取DOM节点
beforeUpdate阶段：响应式数据更新时调用，发生在虚拟DOM打补丁之前，适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器
updated阶段：虚拟DOM重新渲染和打补丁之后调用，组成新的DOM已经更新，避免在这个钩子函数中操作数据，防止死循环
beforeDestroy阶段：实例销毁前调用，实例还可以用，this能获取到实例，常用于销毁定时器，解绑事件
destroyed阶段：实例销毁后调用，调用后所有事件监听器会被移除，所有的子实例都会被销毁

链接：https://www.jianshu.com/p/6115bd8cf67c

vuex的辅助函数

...mapState([])//state在vuex的modules中，则映射不成功。 ...mapState({}) ...mapGetters(['oneGetter','anotherGetter']) ...mapMutations(['tips']) ...mapActions(['tips'])

vue项目遇到的问题以及解决方案

一、视图无实时刷新问题二、在webAPP时单位的换算三、在开发环境下，使用axios进行数据交互时，遇到跨域问题四、vue项目真机测试五、安卓手机上真机测试白屏的问题六、解绑全局事件问题七、vuex的流程图八、Axios请求的函数封装问题九、打包之后页面空白的问题十、app.js的体积过大分割项目，实现懒加载十一、在使用vue.js框架的时候，有时候会希望在页面渲染完成之后，再来执行某个函数方法十三、异步回调函数中使用this无法指向vue实例对象十四、setInterval路由跳转继续运行并没有及时进行销毁十五、vue 滚动行为用法,进入路由需要滚动到浏览器底部头部等等十六、使用better-scroll插件实现滚动时点击失效问题十七、IE9中，elementUI的el-input删除操作无法触发数据变动监听十八、Vue框架里使用Swiper

uniapp

可视高度设置

uni.getSystemInfoSync()获取总高windowHeight，减去底部标签栏和设备状态栏高度statusBarHeight

vant组件外部样式问题

小程序

微信小程序扫码功能的实现

https://www.jianshu.com/p/eb45b9fe597c

javascript

const app = getApp();
   //扫码功能
function scanAction() {
  wx.scanCode({
     onlyFromCamera: false,
    scanType: ['qrCode', 'barCode', 'datamatrix', 'pdf417'],
       //结果处理
    success: res => dealScanCode(res.result),
    fail: (e) => {
        if (e && e.errMsg && e.errMsg.indexOf('scanCode:fail cancel') != -1) {
            return;
        }
        wx.showToast({ title: '扫码失败', icon: 'none', })
    }
  });
}


 // 判断连接
 function dealScanCode(result) {
   app.log("scan:" + result)
   if (!result || !result.lastIndexOf) {
       wx.showToast({ title: '二维码错误', icon: 'none', duration: 2000 })
      return;
    }

    // 具体的连接处理
      if (result.lastIndexOf('synthetical=') != -1) {
       bindAccount(result);
       return;
      }
  
 //无效的二维码
  wx.showToast({ title: '二维码错误', icon: 'none', duration: 2000 })
 }


   //处理连接
   function bindAccount(param){
    // 截取字符串
    let groupNum = getUrlParam(param, 'chatID')
   let groupType = getUrlParam(param, 'type');
   }

   // 提供外部的接口
    module.exports = {
       scanAction,
     dealScanCode,
     getUrlParam
    }


  // 正则表达式截取字符串的方法
    function getUrlParam(url, name) {
       // 正则筛选地址栏
       let reg = new RegExp("(^|&|/?|//)" + name + "=([^&]*)(&|$)");
      // 匹配目标参数
     let result = url.substr(1).match(reg);
     //返回参数值
      return result ? decodeURIComponent(result[2]) : null;
  }

小程序传值

1、url传值
navigator url?id=666  this.setData({  id : options.id })
2、data-传值
<button bindtap="clickMe" data-id='{{key}}'>
第一种
</button> <button bindtap="clickMe" id='{{key}}'>
第二种</button> 
var id = e.currentTarget.id; var id = e.currentTarget.dataset.id;
3、本地存储
wx.setStorage({     key: "key",     data: "value" }) wx.setStorage({     key: "key",     data: "很多的数据" })
4、全局app对象
const app = getApp() app.datakey='sks'; const app = getApp() var sks = app.datakey; console.log(sks)

老张的拍照试题

判断是否为数组

instanceof	arr isntanceof Array
proto	arr.proto === Array.prototype
constructor	arr.constructor === Array
Object.prototype.toString	Object.prototype.toString.call(arr) === '[object Array]'
Array.isArray	Array.isArray(arr)

DOM操作节点

什么是“use strict”, 好处和坏处

https://blog.csdn.net/weixin_40387601/article/details/80514358 设立"严格模式"的优点：

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的Javascript做好铺垫。

注：经过测试 IE6, 7, 8, 9 均不支持严格模式。缺点：现在网站的 JS 都会进行压缩，一些文件用了严格模式，而另一些没有。这时这些本来是严格模式的文件，被 merge 后，这个串就到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节。

css 写一个左中右布局占满屏幕，左右两块固定宽度200，中间自适应宽，先加载中间块

https://blog.csdn.net/HH18700418030/article/details/97100986

三次握手

https://baijiahao.baidu.com/s?id=1654225744653405133&wfr=spider&for=pc https://blog.csdn.net/shenmegui_32/article/details/73824152

三次握手

客户端发送连接请求报文，服务器端接收到后回复ack报文，并为这次连接分配资源，客户端接收到ack报文后，也回复ack报文，并为这次连接分配资源。三次握手结束，TCP连接建立。为什么要三次：防止客户端的连接请求报文在网络中间某节点延时时间过长后，本应已失效，但仍然传到了服务器端，服务器端认为这是一个新的连接，若无第三次握手，服务器端在发送ack报文后认为连接建立，等待接收消息，但并不会收到客户端的数据。客户端：[SYN]seq=1000 服务端：[SYN ACK]ack=1001,seq=2000 客户端：[ACK]ack=2001,seq=1001

四次挥手

客户端发送FIN报文，服务器端收到后发送ack报文，但此时服务器端可能还有信息没发送完，待将需发送给客户端的数据都发送给客户端后，服务器端发送FIN报文给客户端，客户端收到后，发送ack报文给服务器端，然后等待一段时间，若无服务器端返回的消息，就表示服务器端关闭了连接，客户端也关闭连接。四次挥手结束，TCP连接关闭。为什么要四次：因服务器端接收到客户端发来的FIN报文时，可能还会需要给客户端发送数据，故此时只能发送一个ack报文，不能直接确认将连接关闭，只发送ack报文表示确认收到客户端的关闭连接请求，待数据均发送完后再发送FIN报文告知客户端可以关闭连接了。主动方：[FIN ACK]seq=5000 被动方：[ACK] ack=5001,seq=7000 被动方：[FIN ACK] ack=5001,seq=7001 主动方：[ACK] ack=7002,seq=5001

66如何渲染几万条数据并不卡住界面

创建文档碎片document.createDocumentFrgame()

遍历插入数据

通过判断渲染次数执行window.requestAnimationFrgame()

2 v-if结合每一帧，判断是否渲染达到延迟渲染的效果

经验

vue有时候代码没问题，改了设置的那个变量的名字可以解决

面试实战

2019

vue学到什么

element ui 经常用什么

表格（展开栏）-级联选择器-侧边栏

获取文件后缀

输入：文件全路径 filePath 输出：文件后缀例如： /tmp/test.js 输出 js

vue 双向绑定失效

css画五边形

width为0，边框就是四个三角形，中间交点就是width， border-width三个参数：上，左右，下上边框加就是上面的倒三角加高，左右边框增加就是两边对嘴三角形边框增加，下边框增加就是中间交点的下面的三角形加高

css轮播图怎么写

自动轮播：通过animation+keyframs 点击轮播 input radio ，通过:checked和统计选择器~改变li的margin-left

深信服

介绍一下做过的项目，项目中复杂的业务，原型链，闭包，面向对象编程，对象和数组的api，函数式编程，防抖函数，判断对象类型，封装栈，队列数据结构，如何实现一个栈，vue组件的封装，继承，防抖，for in，如何查看对象的自有属性，如何调试代码 promise的原理，和setTimeout的执行顺序 url上面#的原理和作用 webpack的打包原理和配置文件具体怎么配置项目：echart、高德api 在项目中的具体应用，你在项目中遇到印象深刻的问题？vue : 生命周期、nexttick有什么用？nexttick是怎么实现的？css : BFC，js: 数组相关的api，如何拷贝一个数组。深拷贝浅拷贝 Express的中间件

20210303

笔试

问的

nextTick

我们更改了某个dom元素内部的文本时执行顺序是：改数据，dom进行渲染，渲染完可以拿到改完的数据而这时候我们在修改数据的时候所在的函数内想直接打印出这个被改变后的文本，是需要dom更新之后才会实现的，所以这时需要用到nextTick，他会等待dom渲染接收再执行，这时他就能获得更新好的数据，也就好比我们将打印输出的代码放在setTimeout(fn, 0)中类似

选择器优先级

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值

keep-alive

被keepalive包裹的组件会被缓存标签里有 includeexcludemax 属性 exclude优先级大于include 值为显示排除的name

配合路由

在路由mete里面添加keepAlive的布尔值

标签里通过判断v-if="$route.meta.keepAlive" ，确定是否会被缓存

可以设置max，约束最大缓存数，较早的组件将会被销毁以释放内存

vue数组刷新没有

this.$set(对象，键，值) this.$set(数组，索引，值)

vue生命周期

vue中给router-view 组件的绑定 key 的原因

https://blog.csdn.net/Terenceno/article/details/90033967>

20210309

闭包的使用场景 mvvm的理解 websocket总是断开怎么一直连着、websocket如何保证一直连接着

20210310

link和@import

1. 从属关系区别@import 是 CSS 提供的语法规则，只有导入样式表的作用； link 是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。 2. 加载顺序区别加载页面时， link 标签引入的 CSS 被同时加载； @import 引入的 CSS 将在页面加载完毕后被加载。 3. 兼容性区别@import 是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别； link 标签作为 HTML 元素，不存在兼容性问题。 4. DOM可控性区别可以通过 JS 操作 DOM ，插入 link 标签来改变样式；由于 DOM 方法是基于文档的，无法使用 @import 的方式插入样式。 **5. 权重区别(该项有争议，下文将详解)**link 引入的样式权重大于 @import 引入的样式。

!Doctype 的作用

! DOCTYPE 声明叫做文件类型定义(DTD), 作用是为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。

严格模式混杂模式区别

**严格模式：**又称标准模式，是指浏览器按照 W3C 标准解析代码。 **混杂模式：**又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。 1、如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式）2、包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）3、DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式）4、HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分） **意义：**严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。 三、严格模式与混杂模式的语句解析不同点有哪些？ 1）盒模型的高宽包含内边距padding和边框border 在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在IE5.5及以下的浏览器及其他版本的Quirks模式下，IE的宽度和高度还包含了padding和border。 2）可以设置行内元素的高宽在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。 3）可设置百分比的高度在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。 4）用margin:0 auto设置水平居中在IE下会失效使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效, quirk模式下的解决办法，用text-align属性: body{text-align:center}; #content{text-align:left} 5）quirk模式下设置图片的padding会失效 6）quirk模式下Table中的字体属性不能继承上层的设置 7）quirk模式下white-space:pre会失效

cookies与session

服务器设置session 服务器返回给客户端的信息在响应头中带着set-cookie='connect.sid' 客户端会把信息种植到本地的cookie中httponly 客户端再次向服务器发送请求的时候会默认在请求头中cookies把connect.sid传递发给服务器

websocket如何兼容低浏览器

引入SockJS库，他是JavaScript的一个库，支持websocket的浏览器会优先使用原生的websorcket，如果不支持，则会使用引用的库文件。
引用socket. IO的库文件，这同样是基于时间的双向通信，如何不支持则会使用替代的方案。

src href

src (Source)源这个属性是将资源嵌入到当前文档中元素所在的位置 href (Hypertext Reference) 超文本引用href这个属性指定web资源的位置，从而定义当前元素（如锚点a）或当前文档（如链接）与目标锚点或目标资源之间的联系。

callee caller

callee返回正在执行的函数本身的引用，callee是arguments的一个属性，这个属性是一个指针，指向这个拥有arguments对象的函数 caller这个属性中保存着调用当前的函数的函数引用，如果是全局作用于中调用当前的函数就返回null https://blog.csdn.net/yc2222/article/details/79268029

ie和dom事件流的区别

https://blog.csdn.net/m0_37686205/article/details/88539288

行内元素块级元素，空（void）元素

行内元素(11): a、b、span、img、input、strong、select、label、em、button、textarea 。 2. 块级元素(9): div、ul、li、dl、dt、dd、p、h1-h6、blockquote 。 3. 空元素(6): 即系没有内容的HTML元素, 例如: br、meta、hr、link、input、img 。

html新标签浏览器兼容问题

（1）使用document创建标签 
（2） 
a）使用html5shim：在head中调用以下代码：   
1.<!--[if lt IE 9]> 		
2.<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script标签来调用服务器提供的js脚本。> 		
3.<![endif]-->   
 b）使用kill IE6: 在</body>之前调用以下代码：      
1.<!--[if lte IE 6]> 		
2.<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script> 		
3.<![endif]-->

iframe缺点

⒈iframe会阻塞主页面的Onload事件； ⒉iframe和主页面共享链接池，而浏览器对相同城的链接有限制，所以会影响页面的并行加载； ⒊使用iframe之前需要考虑这两个缺点，如果需要使用iframe，最好是通过JavaScript； ⒋动态给iframe添加src属性值，这样可以可以绕开以上两个问题 ⒌不利于seo ⒍代码复杂，无法一下被搜索引擎索引到 ⒎iframe框架页面会增加服务器的http请求，对于大型网站不可取 ⒏很多的移动设备无法完全显示框架，设备兼容性差

浏览器多标签页通信

websocket localStorage

inline block什么时候有间隙

有空格时候会有间隙解决：移除空格
margin正值的时候解决：margin使用负值
使用font-size时候解决：font-size:0、letter-spacing、word-spacing

20210311

给你一个需求，你开始项目的思路是什么

理解需求，拆解需求，判断需求需要用到哪些技术，有没有可能存在的问题或者有没有什么技术难点，然后就是确定你要怎么去实现功能（就是你说的有重复逻辑的或者为了易于维护封装之类的），然后就开发呗

路由传值

h5无刷新跳转

在html5出来前，实现无刷新前进后退通常是结合location.hash+onhashchange事件来实现的有了html5，可以利用html5 history api来实现加载新页面！在HTML5中

新增了通过JS在浏览器历史记录中添加项目的功能。
在不刷新页面的前提下显示改变浏览器地址栏中的URL。
添加了当用户单击浏览器的后退按钮时触发的事件。
通过以上三点，可以实现在不刷新页面的前提下动态改变浏览器地

history.length：历史列表中的网址数。 history.back()：加载历史列表前一个网址。 history.forward()：加载历史列表后一个网址。 window.history.back(); //后退 window.history.forward(); //前进 window.history.go(-1); //移动到指定记录点，当前倒退1，相当于window.history.forward() window.history.length//可以了解历史中有多少个记录点

history.pushState(data, title [, url])：往历史记录堆栈顶部添加一条记录； data会在onpopstate事件触发时作为参数传递过去 title为页面标题，当前所有浏览器都会忽略此参数 url为页面地址，可选，缺省为当前页地址。 2. history.replaceState(data, title [, url]) ：更改当前的历史记录，参数同上。 3. history.state：用于存储以上方法的data数据，不同浏览器的读写权限不一样。 4. popstate事件：当用户单击浏览器的后退或者前进按钮时触发该事件。在事件处理函数中读取触发事件的事件对象的state属性值，该属性值即为执行pushState方法时所使用的第一个参数值，其中保存了在向浏览器历史记录中添加记录同步保存的对象。到目前为止，IE10，firefox4以上的版本，Chrome8以上的版本，Safari5，Opera11以上的版本浏览器支持HTML5中的History API。

后台层级多的数据前端怎么渲染 --映射？

处理多层级一次加载卡的问题，没有解决题目需求，但可以学习一下他的那种情况 https://blog.csdn.net/qq_40190624/article/details/104979037 映射表，后台返回的目录层级不确定，但是里面每一层的数据结构应该是确定的，那么就可以前端定义一个映射表，遍历后端接口数据，使用映射表去判断一下有没有返回这个层级，没有就不渲染

computed watch区别

computed watch区别 computed特性

是计算值，
应用：就是简化tempalte里面计算和处理props或$emit的传值
具有缓存性，页面重新渲染值不变化, 计算属性会立即返回之前的计算结果，而不必再次执行函数

watch特性

是观察的动作，
应用：监听props，$emit或本组件的值执行异步操作
无缓存性，页面重新渲染时值不变化也会执行

①从属性名上， computed 是计算属性，也就是依赖其它的属性计算所得出最后的值。 watch 是去监听一个值的变化，然后执行相对应的函数。

②从实现上， computed 的值在 getter 执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取 computed 的值时才会重新调用对应的 getter 来计算。 watch 在每次监听的值变化时，都会执行回调。其实从这一点来看，都是在依赖的值变化之后，去执行回调。很多功能本来就很多属性都可以用，只不过有更适合的。如果一个值依赖多个属性（多对一），用 computed 肯定是更加方便的。如果一个值变化后会引起一系列操作，或者一个值变化会引起一系列值的变化（一对多），用 watch 更加方便一些。

③ watch 的回调里面会传入监听属性的新旧值，通过这两个值可以做一些特定的操作。 computed 通常就是简单的计算。

④ watch 和 computed 并没有哪个更底层， watch 内部调用的是 vm.$watch ，它们的共同之处就是每个定义的属性都单独建立了一个 Watcher 对象

http https的区别

http协议和https协议的区别：传输信息安全性不同、连接方式不同、端口不同、证书申请方式不同一、传输信息安全性不同 1、http协议：是超文本传输协议，信息是明文传输。如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息。 2、https协议：是具有安全性的ssl加密传输协议，为浏览器和服务器之间的通信加密，确保数据传输的安全。二、连接方式不同 1、http协议：http的连接很简单，是无状态的。 2、https协议：是由SSL＋HTTP协议构建的可进行加密传输、身份认证的网络协议。三、端口不同 1、http协议：使用的端口是80。 2、https协议：使用的端口是443．四、证书申请方式不同 1、http协议：免费申请。 2、https协议：需要到ca申请证书，一般免费证书很少，需要交费。

20210312

登录加密

继承

https://www.jianshu.com/p/85899e287694

原型链继承
借用构造函数（经典继承）
组合继承
原型链继承
寄生式继承
寄生组合式继承

突破微信小程序五层层级限制的解决方案

https://blog.csdn.net/weixin_34910865/article/details/113490644 五层的限制只是针对 navigateTo，redirectTo 不受此限制。 a、若页面栈已经已满（length>=5），那么使用wx.redirectTo(页面A); b、否则，使用wx.navigateTo(页面A) navigateTo ：保留当前页面，跳转到应用内的某个页面，页面栈新增一个页面实例，相同的也会加 wx.navigateBack(delta) delta表示层级，大于等于现有层级则跳首页 redirectTo ：关闭当前页面，跳转到应用内的某个页面示例： a → b → c → d → e → f 都用navigateTo 跳，f时页面栈已经堆满五个，多的不报错也不会有反应 e → f 用redirectTo e跳转的话就可以，重置第五层

遇到项目的问题

element ui表格展开数据时，异步加载的数据完成了，但展开数据是空的

这是由于vue的defineProperty无法检测数组改动造成的，需要通过this.$set(数组，索引，值)的方法进行数据修改单单改变this里的data的数据是没办法响应的

uniapp获取设备可视高度的数据不准确

只能自己写个函数判断，根据安卓苹果分别减去相应的刘海高度

前端传大量数据到后台进行导出

前端传大量的数据到后台

自我介绍

平时也会看看源码，提升下自己设计思维

html

h5新特性

判断null

手写meta标签

常见的内置错误

内存溢出

web worker（多线程）

移动端300毫秒延迟

css

不换行显示省略号

清除浮动

怪异盒模型 --IE盒模型

外边距合并

不换行显示省略号

水平居中方案

对于宽高固定的子元素

对于宽高不定的子元素，上面的后面两种方法，可以实现元素的垂直和水平的居中

less和sass说说你最大的感受

行内元素 行内块元素 3px是什么

粘性定位

display:none 和 visible:hidden的区别

js

隐式转换 ==

数据类型, object和基础数据类型的区别

常见的原生javascript DOM操作

ES6

冒泡 捕获

事件代理 (事件委托)

原型和原型链

防抖与节流

offsetWidth/offsetHeight, clientWidth/clientHeight 与 scrollWidth/scrollHeight 的区别？

执行队列

前端安全

jQuery

jsonp的原理 为什么他不是ajax请求

axios并发请求怎么操作

vue相关

Vue性能优化方案

Vue的观察者模式

生命周期

vuex的辅助函数

vue项目遇到的问题以及解决方案

uniapp

可视高度设置

vant组件外部样式问题

小程序

微信小程序 扫码功能的实现

小程序传值

老张的拍照试题

判断是否为数组

DOM操作节点

什么是“use strict”, 好处和坏处

css 写一个左中右布局占满屏幕，左右两块固定宽度200，中间自适应宽，先加载中间块

三次握手

三次握手

四次挥手

66如何渲染几万条数据并不卡住界面

经验

面试实战

2019

vue学到什么

element ui 经常用什么

获取文件后缀

vue 双向绑定失效

css画五边形

css轮播图怎么写

深信服

20210303

笔试

问的

nextTick

选择器优先级

keep-alive

vue数组刷新没有

vue生命周期

vue中 给router-view 组件的绑定 key 的原因

20210309

20210310

link和@import

!Doctype 的作用

行内元素行内块元素 3px是什么

冒泡捕获

jsonp的原理为什么他不是ajax请求

微信小程序扫码功能的实现

vue中给router-view 组件的绑定 key 的原因