HTML

1.行内元素有哪些？块级元素有哪些？

行内元素有b,big,i,small,tt
    abbr,acronym,cite,code,dfn,em,kbd
    strong,samp,var
    a,bdo,br,img,map,object,q
    script,span,sub,sup
    button,input
    label,select,textarea
  块级元素有：address、article、aside、audio、blockquote、canvas、
    dd、div、dl、fieldset、figcaption、figure、
    footer、form、h1、header、hgroup、hr、noscript、
    ol output p pre section table tfoot
    ul video

2.行内元素上有哪些全局属性？

accesskey 规定激活元素的快捷键；
class 规定元素的一个或多个类名（引用样式表中的类）；
contenteditable 规定元素内容是否可编辑；
contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-* 用于存储页面或应用程序的私有定制数据。
dir 规定元素中内容的文本方向。
draggable 规定元素是否可拖动。
dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden  样式上会导致元素不显示，但是不能用这个属性实现样式。
id 规定元素的唯一 id。
lang 规定元素内容的语言。
spellcheck 规定是否对元素进行拼写和语法检查。
style 规定元素的CSS行内元素。
tabindex 规定元素的tab键次序。
title 规定有关元素的额外信息。
translate 规定是否应该翻译元素内容。

3.自定义属性

data-* 用于存储页面或应用程序的私有定制数据。

4.display:none和display:hidden两者的区别

【display:none】表示不存在且不加载,不为被隐藏的对象保留其物理空间;
【display:hidden】是隐藏但在浏览时保留位置,及对象在网页上不可见。

5.

CSS

1.css选择器的优先级排序

1. ！important在属性后面写上这条样式，会覆盖掉页面上任何位置定义的元素的样式。
2. 行内样式，在style属性里面写的样式。
3. id选择器
4. class选择器
5. 标签选择器
6. 通配符选择器

2.css透明度之RGBA和opacity的区别

相同点：rgba()和opacity都能实现透明效果；
不同点：opacity作用于元素，以及元素中所有的内容,子元素继承透明效果；
　　　　rgba()只用于于元素的颜色，及背景色，子元素不继承透明效果；

3.position

static：简单来说，静态定位就是标准流，一般不用它
relative：相对于自身偏移，不脱离标准流，继续保留原来的位置。
absolute：相对于父级偏移，不再占有原来的位置。
fixed： 相对于父级偏移，不在占有原来的位置。
sticky：粘性定位：相对定位和固定定位的结合，以浏览器的可视窗口为参照点来移动元素，占有原来的位置。

4.css盒模型

content padding margin border
!.标准模型（宽高）=content的宽高    box-sizing:content-box;
2.IE模型（宽高）=content的宽高+padding的宽高+margin的宽高，border的宽高  box-sizing:border-box;

5.谈谈BFC解决盒模型边距重叠问题

块级格式化上下文,是一个独立的渲染区域，着这个区域与外部毫不相关。
创建BFC的方式：
float除了none以外的值
overflow除了visible以外的值
display:inline-block,flex,table-cell,table-caption
opsition:absolute,fixed
使用场景：
1.解决margin叠加问题
2.用于消除浮动
3.两栏布局

6.重绘和重排

重绘必将导致重排，重排必将导致重绘

7.隐藏页面元素有哪些方法

display:none:元素不可见，不占据空间，无法响应点击事件
visibility:hidden:元素不可见，占据空间，无法响应点击事件
opacity:0:元素不可见，占据空间，可响应点击事件
height,width:0:元素不可见，不占据空间，无法响应点击事件
position:obsolute:元素不可见
clip-path:元素不可见，占据空间，无法响应点击事件

JS

1.基本数据类型

number null undefined boolean string symbol

2.null和undefined什么情况下会相等

相对比较时

3.如何判断null和undefined

null用=== undefined用typeof

4.null和undefined区别

null：准备用来保存对象，但还未保存对象的值 undefined：变量声明但未赋值

5.&& || ！

略

6.== 和 ===区别

==直接进行数据类型转换
===要进行值和类型的比较

8.http状态码

200成功
201新建
301/302重定向
304协商缓存
400接口传参错误
401访问权限未通过
403请求资源被拒绝
404未找到
5xx服务器错误

9.处理异常

try...catch...
try...catch...catch
try...catch...finally
try...finally

10.js继承的方式

原型继承：原型替换，继承方法
组合式继承：原型替换+构造函数借调
寄生组合式继承：原型替换+构造函数借调+Object.create优化

存储方式

略

indexedDB是什么存储方案？

是一个事务性数据库系统，是一个基于javascript的面向对象的数据库

js中的定时器有哪些

1. setInterval()

setInterval()方法重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟。通俗来讲即setInterval()方法内的函数片段会一直在固定的时间延迟后重复执行，直到清除本次重复操作的唯一辨识符intervalID。

2. setTimeout()

setTimeout()方法设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码。通俗来讲即setTimeout()在指定的毫秒数后调用函数或计算表达式。只执行一次，执行完毕后定时器就停止（定时器还在，但不再调用）。

浏览器的运行机制

略

set和map的区别

set
成员唯一、有序，且不重复，数组
只有键值，没有键名
不能遍历
map
集合，
键唯一，只可以修改
可以遍历

WEBAPI

1.阻止浏览器默认行为

event.preventDefault()

2.阻止冒泡

event.stopPropagation()

3.DOM中获取？后面的参数

方法一、正则表达式
方法二、原生js实现

4.DOM的方法

ID选择器 标签选择器 类选择器

juejin.cn/post/684490…

1.通过id名获取元素

> console.log(document.getElementById('app'))
> console.log(document.getElementById('box')) 如果想要获取的id不存在 返回值是一个 **null**
复制代码

2.通过类名（ClassName）获取元素 获得到的是一个集合

> console.log(document.getElementsByClassName('box'))
> console.log(document.getElementsByClassName('box')[i])//通过索引获取想要的元素
复制代码

3.通过标签获（TagName）取元素 获取的也是一组

> console.log(document.getElementsByTagName('li'))
> console.log(document.getElementsByTagName('li')[i]);//通过索引获取想要的元素
复制代码

4.通过querySelector（css选择器）但是只能获取一个元素（第一个）

> console.log(document.querySelector('#app'))
> console.log(document.querySelector('.box'))
复制代码

5. queryselectorAll(css选择器)

>console.log(document.querySelectorAll('.box'))
> console.log(document.querySelectorAll('.box')[2])//通过索引获取想要的元素

DOM创建节点

createElement() 创建一个元素节点

createTextNode() 创建一个文本节点

juejin.cn/post/704630…

有动态的html的片段添加进去

innerText

表示一个节点及其后代的`“渲染”`文本内容
从起始位置到终止位置的内容, 但它去除Html标签 。
`innerText` 可操作已被渲染的内容

innerHTML

设置或获取HTML语法表示的元素的后代,返回结果字符串
从对象的起始位置到终止位置的全部内容,包括Html标签。

JQUERY

JQUERY中有哪些选择器？

juejin.cn/post/699216…

GIT

1.git命令

HTTP

http状态码

 200: '请求被正确处理并返回了结果', 
 201: '新增或修改数据成功',  
 202: '请求已进入任务队列，被异步处理',   
 203: '令牌或登录状态失效',  
 204: '删除数据成功',  
 301: '请求的资源被永久重定向到新的位置，将从新的地址重新请求',  
 302: '请求的资源被临时重定向到新的位置', 
 400: '请求参数错误，服务器没有对数据做新建或修改',  
 401: '无访问权限，用户名、密码、令牌错误', 
 403: '得到访问授权，但访问是被禁止', 
 404: '访问的是不存在的资源',  
 405: '请求方式不正确', 
 406: '请求的数据格式不是服务接收的类型', 
 410: '请求的资源被永久删除', 
 422: '服务器创建对象时发生错误',  
 500: '服务器不可用，未返回正确的数据',  
 502: '服务器网关错误',  
 503: '服务器过载或维护

http和https的区别

http
超文本传输协议，无状态，应用层的协议，常基于TCP/IP协议传输数据
端口80


https
ssl加密传输协议
端口443

实质上利用到了对称和非对称两种加密手段，通过对称加密对数据加密，通过非对称加密对 对称加密的密钥加密。
https的加密方案：非对称加密+对称加密

VUE

1.$nexTick作用

简单的说，会在DOM批量渲染完成后执行。
nexTick的回调是在下次DOM更新循环结束之后执行的延迟回调，
在修改数据之后立即使用这个方法获取更新后的DOM，
主要思路就是采用微任务优先的方式调用异步方法执行nextTick包装的方法。

2.vue中如何获取DOM中的节点

ref

3.vue中怎么把#去掉

history模式

4.移动端适配

1.rem适配
rem 是相对于html节点的font-size来做计算的。所以在页面初始话的时候给根元素设置一个font-size，接下来的元素就根据rem来布局，这样就可以保证在页面大小变化时，布局可以自适应
2.vw，vh布局
vh和vw方案和rem类似也是相当麻烦需要做单位转化，而且px转换成vw不一定能完全整除，因此有一定的像素差。
不过在工程化的今天，webpack解析css 的时候用postcss-loader 有个postcss-px-to-viewport能自动实现px到vw的转化
3.px为主，vx和vxxx（vw/vh/vmax/vmin）为辅，搭配一些flex（推荐）

移动端适配流程
1. 在head 设置width=device-width的viewport‘
2. 在css中使用px
3. 在适当的场景使用flex布局，或者配合vw进行自适应
4. 在跨设备类型的时候（pc <-> 手机 <-> 平板）使用媒体查询
5. 在跨设备类型如果交互差异太大的情况，考虑分开项目开发

5.阻止浏览器默认行为

event.prevent()

6.阻止冒泡

event.stop()

7.vue的双向绑定原理

通过ObjectdefineProperty劫持数据发生的改变，如果数据发生改变了，在set中进行赋值，触发update方法进行更新节点内容，从而实现数据双向绑定。

8.$set

vue是监听不到动态添加的属性的

9.vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理插件。它采用集中式存储管理应用的所有组件的状态，而更改状态的唯一方法是提交mutation vuex的5个核心概念 vuex的运行流程

10.路由传参

1.query传参
会在地址栏显示，刷新不会解释

2.params传参
在内存中传递不显示在地址栏，刷新会丢失，
必须配合命名路由使用

3.动态路由传参
在地址栏传递，显示在地址栏，刷新不会解释，
必须配合动态路由

v-if和v-for哪个优先级最高？

v-for 在 v-for 的时候，建议设置key值，并且保证每个key值是独一无二的，这便于diff算法进行优化

v-if和v-show的异同

都能控制元素在页面是否显示

控制手段不同
编译过程不同
编译条件不同

控制手段：v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除
编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换
编译条件：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染

v-show 由false变为true的时候不会触发组件的生命周期
v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法

性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

如果需要非常频繁地切换，则使用 v-show 较好
如果在运行时条件很少改变，则使用 v-if 较好

为什么对比虚拟DOM？

真实的DOM的结构太复杂，有着很多无用的属性，虚拟DOM只对比关键属性，对比起来性能很高
diff算法
（1）tree diff同层比较，如果发现根级别的元素类型不同，直接整棵树销毁重建
（2）component diff 同层级别元素类型相同，按照策略，对比差异，记录差异
（3）element difff 子节点列表，同层兄弟节点，默认按照下标进行对比，如果加上key，就相当于给虚拟dom加上了标识

对比策略：就是对相同key的元素，进行比较

vue的生命周期原理

beforeCreate：最初调用触发，data和events都不能用。可以在这里处理整个系统加载的Loading；
created：已经具有响应式的data，可以发送events。可以在这里去发送请求。
beforeMount：在模板编译后，渲染之前触发。SSR中不可用。基本用不上整个Hook。
mounted：在渲染之后触发，并可以访问组件中的DOM以及$ref，SSR中不可用。
beforeUpdate：在数据改变后，模板改变前触发。切勿使用它监听数据变化（使用计算属性和watch监听）。
updated：在数据改变后、模板改变后触发。常用于渲染后的打点、性能检测或者触发vue组件中非vue组件的更新。
beforeDestroy：组件卸载前触发，可以在此时清理事件、计时器或者取消订阅操作。
destroyed：卸载完毕后触发，可以做最后的打点或事件触发操作。

react

小程序

1.小程序中如何获取页面参数

onLoad周期函数用option参数获取

2.小程序中父传子

properties

项目中

1.是否了解低代码？

跨域问题

当协议、子域名、主域名、端口号中任意一个不相同时，就存在跨域

1.jsonp

1) JSONP原理

利用 <script> 标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。

2) JSONP和AJAX对比

JSONP和AJAX相同，都是客户端向服务器端发送请求，从服务器端获取数据的方式。但AJAX属于同源策略，JSONP属于非同源策略（跨域请求）

3) JSONP优缺点

JSONP优点是简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法具有局限性,不安全可能会遭受XSS攻击。

2.cors

CORS 需要浏览器和后端同时支持。IE 8 和 9 需要通过 XDomainRequest 来实现。

浏览器会自动进行 CORS 通信，实现 CORS 通信的关键是后端。只要后端实现了 CORS，就实现了跨域。

服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。 该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。

虽然设置 CORS 和前端没什么关系，但是通过这种方式解决跨域问题的话，会在发送请求时出现两种情况，分别为简单请求和复杂请求。

3.websocket

Websocket是HTML5的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。WebSocket和HTTP都是应用层协议，都基于 TCP 协议。但是 WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时，WebSocket 在建立连接时需要借助 HTTP 协议，连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。

原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。

4.nginx反向代理

实现原理类似于Node中间件代理，需要你搭建一个中转nginx服务器，用于转发请求。

使用nginx反向代理实现跨域，是最简单的跨域方式。只需要修改nginx的配置即可解决跨域问题，支持所有浏览器，支持session，不需要修改任何代码，并且不会影响服务器性能。

实现思路：通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录。