前言：最近不是很忙，就整理了一下2021常见面试题一、html1、
1、alt： 图片加载失败时，显示在网页上的替代文字2、title： 鼠标放在上面时显示的文字3、alt 是必要属性，title 非必要
（1）新增特性a、新增标签article、aside、audio、bdi、canvas、command、datalist、details、embed、figcaption、figure、footer、header、hgroup、keygen、mark、meter、nav、output、progress、rp、rt、ruby、section、source、summary、time、track、video其中常用标签：article、aside、audio、video、canvas、footer、header、nav、sectionb、新增localStorage、sessionStoragec、新增contenteditable属性 （任何dom节点只要加上contenteditable="true"就可以变得可编辑）d、Geolocation 地理定位（2）移除特性 中横线， 文本等宽
1、标签闭合2、标签小写3、嵌套正确4、外部链接css和js5、提倡结构、表现和行为相分离（HTML结构、CSS表现、Javascript行为）
1、其基础语言不同 a、XHTML是基于可扩展标记语言（XML）。 b、HTML是基于标准通用标记语言（SGML）。2、语法严格程度不同 a、XHTML语法比较严格，存在DTD定义规则。 b、HTML语法要求比较松散，这样对网页编写者来说，比较方便。3、可混合应用不同 a、XHTML可以混合各种XML应用，比如MathML、SVG。 b、HTML不能混合其它XML应用。4、大小写敏感度不同 a、XHTML对大小写敏感，标准的XHTML标签应该使用小写。 b、HTML对大小写不敏感。5、公布时间不同 a、XHTML是2000年W3C公布发行的。 b、HTML4.01是1999年W3C推荐标准。
1. 声明位于文档中的最前面，处于 标签之前。告知浏览器以何种模式来渲染文档。 2. 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。3. 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。4. DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
行内元素 span、b、em、strong、a、input、label等1、设置宽高无效2、对margin仅设置左右方向有效，上下无效；padding上下左右都有效，会撑大空间3、不会自动进行换行块级元素 p、h1-h6、p、ul、ol、li、blockquote、address等1、能够识别设置宽高2、margin和padding的上下左右均对其有效3、独占一行空元素空元素一般指的是无须闭合的标签
、
、、、
html属性赋予元素意义和语境，可以用于任何的html元素1、class：为元素设置类标识2、data-*：为元素增加自定义属性3、id：元素id，文档内唯一4、lang：元素内容的语言5、style：行内css样式6、title：元素相关的建议信息7、dir：规定元素中内容的文本方向（ltr：从左到右， rtl：从右到左）8、contenteditable：html新增属性，设置true后可编辑元素9、hidden：隐藏一个html元素
Canvas1、可伸缩矢量图形2、放大缩小不会失真SVG1、HTML5新加的元素2、使用XML描述2D图形的语言
是文档类型声明，它声明了文档类型为html5，告诉浏览器和其他开发者，该文档使用的是html5标准
.box {position: absolute;top: 50%;left: 50%;transform: translate;border: 1px solid pink;width: 100px;height: 100px;}
left浮动 right浮动1、浮动的产生float: left/right（设置后产生浮动）初衷：浮动原先的设计初衷是为了实现文字环绕效果结果：父元素高度塌陷，理解起来就是元素浮动飘起来了，失去高度，下面的元素会顶上来，就造成了原有的元素背景不见了，margin/padding也不能正常显示2、解决浮动的方法（1）clear: both，在元素最后下加一个元素设置clear：both属性，缺点是会增加多余无用的html元素
1、什么是精灵图将一些小图标放在一张图上2、精灵图的优点减少图片的总大小减少下载图片资源请求，减小建立连接的消耗3、精灵图的使用方式.icon1 {background-image: url;background-repeat: no-repeat;background-position: 20px 20px;}// 第一个数是x轴， 第二个数是y轴
（1）content-box宽高是元素本身的宽高 不包含border+padding（2）border-box元素的宽高已经包含了border+padding（3）inherit从父元素继承box-sizing属性
!important > 内联样式 > id选择 > （class选择 = 伪类选择） >
问题：相邻两个盒子垂直方向上的margin会发生重叠，只会取比较大的margin解决：（1）设置padding代替margin（2）设置float（3）设置overflow（4）设置position：absolute 绝对定位（5）设置display： inline-block
1、dispaly:none 设置后该元素在dom元素中消失，不在占用空间2、visibity:hidden 设置后该元素还存在只是不可见，还占用空间，影响布局，具有继承性
1、重绘 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。2、回流 当render tree中的一部分因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。3、重绘与回流区别回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流当页面布局和几何属性改变时就需要回流比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变
根据内容的结构选择合适的标签 1、样式丢失后，页面依然展示清晰的结构 2、有利于seo便于爬虫去爬取更多有用的信息 3、方便其他设备渲染页面 4、更具有可读性，便于开发团队维护
因为浏览器的兼容问题，不同浏览器对有些标签的默认值不同，如果不初始化css，会导致不同浏览器页面间的显示差异。
1、在ios8+中当devicePixelRatio=2的时候使用0.5px2、伪元素 + transform 实现 对于老项目伪元素+transform是比较完美的方法了。 原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。3、viewport + rem 实现 这种兼容方案相对比较完美，适合新的项目，老的项目修改成本过大。 在devicePixelRatio = 2 时，输出viewport： 在devicePixelRatio = 3 时，输出viewport：4、使用box-shadow模拟边框 利用css 对阴影处理的方式实现0.5px的效果
1、transform 属于合成属性，不会引起整个页面的回流重绘，节省性能消耗，但是占用内存会大些2、top/left属于布局属性，会引起页面layout回流和repaint重绘。
1、position: static static是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。2、position: relative relative是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。3、position: absolute absolute是指给元素设置绝对的定位，相对定位的对象可以分为两种情况： 1) 设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。 2) 如果并没有设置了position属性的祖先元素，则此时相对于body进行定位。4、position: fixed 可以简单说fixed是特殊版的absolute，fixed元素总是相对于body定位的。5、inherit 继承父元素的position属性，但需要注意的是IE8以及往前的版本都不支持inherit属性。6、sticky position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。 可以知道sticky属性有以下几个特点：- 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。- 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。- 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量
<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> <style> * { margin: 0; padding: 0; box-sizing: border-box; } #app { display: flex; flex-direction: column; height: 100vh; } .header { width: 100%; background-color: #000; } .footer { width: 100%; background-color: #000; } .main { width: 100%; flex: 1; overflow: auto; background-color: brown; } style>head><body> <p id="app"> <p class="header">headerp> <p class="main">main <p style="height: 2000px;">p> p> <p class="footer">footerp> p> <script> script>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"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>border渐变title> <style> button{ color: #23b7cb; font-size: 15px; padding: 5px 15px; background: #fff; border: 1px transparent solid; border-radius: 30px; position: relative; } button:after{ content:''; position: absolute; top: -3px; bottom: -3px; left: -3px; right: -3px; background: linear-gradient; border-radius: 30px; content: ''; z-index: -1; } style>head><body><button>进入平台button>body>html>
<html lang="en"><head> <meta charset="UTF-8"> <title>旋转title>head><style>.wrapper{ width: 600px; height:600px; background: #F8F8F8; display: flex; justify-content: center; align-items: center;}.z{ display: inline-block; height: 40px; width: 40px; text-align: center; background: red; background: #F8F8F8; color: #FFF; border-radius: 100%; margin: 6px; border: 2px solid #666; border-bottom-color: transparent; vertical-align: middle; -webkit-animation: rotate 0.75s linear infinite; animation: rotate 0.75s linear infinite;}@-webkit-keyframes rotate { 0% { -webkit-transform: rotate; } 50% { -webkit-transform: rotate; } 100% { -webkit-transform: rotate; }}@keyframes rotate { 0% { transform: rotate; } 50% { transform: rotate; } 100% { transform: rotate; }}style><body> <p class="wrapper"> <p class="z"> zou p> p>body>html>
1、行内块级元素，设置成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是100%，行内元素默认100%宽度占据一行2、这时候给行内元素设置 padding-top 和 padding-bottom 或者 width、height 都是有效果的
- 在 CSS 中伪类一直用 : 表示，如 :hover, :active 等- 伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after- 后来在CSS3中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类- 由于低版本IE对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素- 单冒号（：）用于css3的伪类- 双冒号（：：）用于css3的伪元素- 想让插入的内容出现在其它内容前，使用::before，否者，使用::after；- 在代码顺序上，::after生成的内容也比::before生成的内容靠后。- 如果按堆栈视角，::after生成的内容会在::before生成的内容之上- ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。
详见
const let模板字符串箭头函数函数的参数默认值对象和数组解构for...of 和 for...in
详见
3、if有作用域吗只有函数有作用域，if是没有作用域的。但是有一种情况会让if看上去有作用域，就是在if {}语句中，使用const、let，他们会有块级作用域。
（1）原型链当访问一个对象的某个属性时，会先在这个对象本身的属性上找，如果没有找到，会去这个属性的__proto__属性上找，即这个构造函数的prototype，如果还没找到，就会继续在__proto__上查找，直到最顶层，找不到即为undefined。这样一层一层往上找，彷佛是一条链子串起来，所以叫做原型链。（2）作用域链变量取值会到创建这个变量的函数的作用域中取值，如果找不到，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。（3）区别作用域是对变量而言，原型链是对于对象的属性而言作用域链的顶层是window，原型链的顶层是Object
1、typeof检测不出null 和 数组，结果都为object，所以typeof常用于检测基本类型2、instanceof不能检测出number、boolean、string、undefined、null、symbol类型，所以instancof常用于检测复杂类型以及级成关系3、constructornull、undefined没有construstor方法，因此constructor不能判断undefined和null。但是contructor的指向是可以被改变，所以不安全4、Object.prototype.toString.call全类型都可以判断
1、typeof例：console.log // boolean2、instanceof例：console.log // true3、constructor例： console.log // ture4、Object.prototype.toString.call例：Object.prototype.toString.call // [object Array]
1、普通函数可以通过bind、call、apply改变this指向可以使用new2、箭头函数本身没有this指向，它的this在定义的时候继承自外层第一个普通函数的this被继承的普通函数的this指向改变，箭头函数的this指向会跟着改变箭头函数外层没有普通函数时，this指向window不能通过bind、call、apply改变this指向使用new调用箭头函数会报错，因为箭头函数没有constructor
var btn = document.getElementByIdbtn.addEventListenerbtn.addEventListenerfunction fn1 {console.log }function fn2 {console.log }
document.write 将内容写入页面，清空替换掉原来的内容，会导致重绘document.innerHTML 将内容写入某个Dom节点，不会重绘
1、堆动态分配内存，内存大小不一，也不会自动释放2、栈自动分配相对固定大小的内存空间，并由系统自动释放3、基本类型都是存储在栈中，每种类型的数据占用的空间的大小是确定的，并由系统自动分配和释放。内存可以及时回收。4、引用类型的数据都是存储在堆中。准确说是栈中会存储这些数据的地址指针，并指向堆中的具体数据。
1、null什么都没有，表示一个空对象引用（主动释放一个变量引用的兑现那个，表示一个变量不再指向任何引用地址）2、undefined没有设置值的变量，会自动赋值undefined3、区别typeof undefined // undefinedtypeof null // objectnull === undefined // falsenull == undefined // true
eval 函数计算 Javascript 字符串，并把它作为脚本代码来执行如果参数是一个表达式，eval 函数将执行表达式；如果参数是Javascript语句，eval将执行 Javascript 语句；如果执行结果是一个值就返回，不是就返回undefined，如果参数不是一个字符串，则直接返回该参数。特殊：eval // 声明一个对象eval // 返回对象{b:2}
这个文章讲的通俗易懂，可以参考具体案例 https://www.jianshu.com/p/763ba9562864内存泄漏是指一块被分配的内存既不能使用，也不能回收，直到浏览器进程结束。1、意外的全局变量2、闭包3、没有清理的dom元素dom元素赋值给变量，又通过removeChild移除dom元素。但是dom元素的引用还在内存中4、被遗忘的定时器或者回调
Javascript 在定义变量时就完成了内存分配。当不在使用变量了就会被回收，因为其开销比较大，垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。（1）垃圾回收标记清除法当变量进入环境时，将这个变量标记为'进入环境'。当标记离开环境时，标记为‘离开环境’。离开环境的变量会被回收引用技计数法跟踪记录每个值被引用的次数，如果没有被引用，就会回收（2）内存管理内存分配=》内存使用=》内存回收
（1）闭包就是能够读取其它函数内部变量的函数（2）使用方法：在一个函数内部创建另一个函数（3）最大用处有两个：读取其他函数的变量值，让这些变量始终保存在内存中（4）缺点：会引起内存泄漏（引用无法被销毁，一直存在）
JSONP 是一种非正式传输协议，允许用户传递一个callback给服务端，然后服务端返回数据时会将这个callback 参数作为函数名来包裹住 JSON 数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。当GET请求从后台页面返回时，可以返回一段Javascript代码，这段代码会自动执行，可以用来负责调用后台页面中的一个callback函数。它们的实质不同ajax的核心是通过xmlHttpRequest获取非本页内容jsonp的核心是动态添加script标签调用服务器提供的js脚本jsonp只支持get请求，ajax支持get和post请求
同源指协议，域名，端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。
（1）事件冒泡当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window，过程就像冒泡泡 。如果在某一层想要中止冒泡，使用 event.stopPropagation 。但是当大量标签大量事件的时候先然不可能为每个元素都加上事件，（事件绑定占用事件，浏览器要跟踪每个事件，占用更多内存。而且并不是所有事件都会被用户使用到）。所以需要事件委托来解决这个问题。（2）事件委托将事件给最外层的元素，自己不实现逻辑，由最外层元素来代理。（判断事件源，做不同处理）
//（1）var obj = new Fun 做了三件事var obj = {} // 创建一个空对象obj.__proto__ = Fun.prototype //空对象的__proto__指向构造函数的原型对象Fun.call // 构造函数this指向替换成obj//（2）实现一个newfunction _new {const obj = Object.create;const ret = fn.apply;// 根据规范，返回 null 和 undefined 不处理，依然返回obj，不能使用// typeof result === 'object' result : objreturn ret instanceof Object ret : obj;}
（1）defer属性立即下载，但是会等到整个页面都解析完成之后再执行（2）async属性不让页面等待脚本下载和执行（异步下载），但是无法控制加载的顺序（3）动态创建script标签（4）使用定时器延迟（5）让js最后加载
1、什么是Async/Awaitasync/await是写异步代码的新方式，使用的方式看起来像同步async/await是基于Promise实现的，它不能用于普通的回调函数。2、什么是promise为了解决异步嵌套而产生，让代码更易于理解区别，async/await让代码更像同步，进一步优化了代码
”==” 是判断转换后的值是否相等,”===” 是判断值及类型是否完全相等不需要判断类型时可以使用==
var a = {user:"良人",fn: function {console.log // 良人console.log // 2}}var b = a.fn//1、bindvar c = b.bind // 返回一个已经切换this指向的新函数c//2、applyb.apply // 将b添加到a环境中//第一个参数是this指向的新环境//第二个参数是要传递给新环境的参数//注意： 第一个参数为null时表示指向window//3、callb.call // 将b添加到a环境中//第一个参数是this指向的新环境//第二、三...个参数是传递给新环境的参数//注意： 第一个参数为null时表示指向window//小结： bind方法可以让函数想什么时候调用就什么时候调用。apply、call方法只是临时改变了this指向。
在代码块内，使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”。
有思路即可，步骤：（1）判断两个类型是否对象（2）判断两个对象key的长度是否一致（3）判断属性value值的数据类型，根据不同数据类型做比较a、是对象，重复这个步骤b、是数组，转字符串比较c、是基本类型，直接判断
（1）回调函数（2）promise（3）async/await
（1）Promise错误可以在构造体里面被捕获，而async/await返回的是promise,可以通过catch直接捕获错误。（2）await 后接的Promise.reject都必须被捕获，否则会中断执行
（1）js是单线程的，但是分同步异步（2）微任务和宏任务皆为异步任务，它们都属于一个队列（3）宏任务一般是：script，setTimeout，setInterval、setImmediate（4）微任务：原生Promise（5）遇到微任务，先执行微任务，执行完后如果没有微任务，就执行下一个宏任务，如果有微任务，就按顺序一个一个执行微任务
Promise是微任务，setTimeout是宏任务，先执行微任务，如有还有微任务执行完微任务再执行下一个宏任务
定时器表面意思是过指定时间后执行，但是真正的含义是每过指定时间后，会有fn进入事件队列setTimeout的含义是，指定某个任务在主线程最早可得的空闲时间执行，意思就是不用再等多少秒了，只要主线程执行栈内的同步任务全部执行完成，栈为空就马上执行setTimeout 1毫秒后执行，但是因为要先执行前面的宏任务，所以不一定就是在一毫秒后执行，取决于队列里任务执行的速度
Object.keys不会遍历继承的原型属性for...in 会遍历继承的原型属性
1，xml是重量级的，json是轻量级的。2，xml在传输过程中比较占带宽，json占带宽少，易于压缩。3，xml和json都用在项目交互下，xml多用于做配置文件，json用于数据交互。
两者都是为了实现模块化编程而出现的（1）commonjs通常被应用于服务器，在服务器端，模块的加载和执行都在本地完成，因此，CommonJS并不要求模块加载的异步化。核心思想：一个单独文件就是一个模块，通过require方法来同步加载要依赖的模块，然后通过extports或则module.exports来导出需要暴露的接口。（2）AMD可以实现异步加载依赖模块，预加载，在并行加载js文件同时，还会解析执行该模块。虽然可以并行加载，异步处理，但是加载顺序不一定（3）CMD懒加载，虽然会一开始就并行加载js文件，但是不会执行，而是在需要的时候才执行。
单例模式、策略模式、代理模式、迭代器模式...等等这篇文章觉得很好，简介明了能让人大致懂得这些模式，具体还是要自己去学习 https://www.cnblogs.com/imwtr/p/9451129.html
这题看到的时候都懵逼了，还是太菜了 = =...（1）map用法：arr.map {return el})map方法接收一个函数参数，并且这个函数可以接收三个参数el：遍历过程中的当前项，index：遍历过程中的当前下标arr: 原数组（2）parseInt用法：parseInt根据num解析str，并返回一个整数。str: 要解析的字符串，如果字符第一个数不能被转换，返回NaN。num: 基数，介于 2 ~ 36 之间，如果传0，则默认用10计算。num不在区间内，返回NaN（3）所以这道题，关键点就在numel和index 相当于 str 和 num 带入一下parseInt // '1' 用基数10算 为1parseInt // NaNparseInt // NaN
（1）事件对象兼容e = e || window.event;（2）阻止事件冒泡兼容event.stopPropagation event.stopPropagation:event.cancelBubble=true;（3）阻止默认行为兼容evt.preventDefault evt.preventDefault:evt.returnValue=false;（4）事件监听兼容addEventListener addEventListener : attachEventremoveEventListener removeEventListener : detachEvent（5）事件目标对象兼容var src = event.target || event.srcElement;
（1）promise是为解决异步处理回调金字塔问题而产生的 （2）有三种状态，pengding、resolve、reject，状态一旦决定就不会改变 （3）then接收resolve，catch接收reject
38、介绍js有哪些内置对象？String对象、Array对象、Object对象、Number对象Math对象、Date对象、Boolean对象
1、不要在同一行声明多个变量2、使用 === 和 !== 来比较3、不要使用全局函数4、变量在使用之前的位置声明（减少变量提升干扰）5、if用花括号包起来即使只有一行6、写注释
栈：原始数据类型（Undefined Null Boolean Number String）堆：引用数据类型（对象、数组、函数）
1、# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。2、javascript:void, 仅仅表示一个死链接。如果你要定义一个死链接请使用 javascript:void
1、单独使用，this表示全局对象2、在函数中，this表示全局对象3、在对象的一个函数方法中，this表示这个对象4、可以通过apply、bind来更改this的指向ps： this永远指向的是最后调用它的对象，仅当它在对象的一个函数方法中时会有差异
如果没有报错，返回执行结果[res1, res2,...]如果报错，则返回第一个报错的promise的结果
使用Promise.allpromise.all是等所有异步操作都完成之后返回结果，相当于让这些异步同步了
