HTML语义化
- 让人更容易读懂（增加代码的可读性）
- 让搜索引擎更容易读懂（SEO）
box-sizing:border-box 整体长度
margin纵向重叠问题
相邻元素的margin-top和margin-bottom会重叠，选大的作为margin，空内容也会被忽略
margin负值问题
margin-top和margin-left负值，元素向上，向左移动
margin-right负值，右侧元素左移，自身不受影响
margin-bottom负值，下方元素上移，自身不受影响
BFC的理解与应用
Block format context，块级格式化上下文
一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
圣杯布局和双飞翼布局
使用 float 布局
两侧使用 margin 负值，以便和中间内容横向重叠
防止中间内容被两侧覆盖，一个用 padding 一个用 margin
flex最常用的语法
flex-direction:主轴的方向（可横向可纵向）
justify-content：主轴对齐方式（开始对齐、两边对齐...）
align-items:交叉轴对齐方式（和主轴垂直的轴）
flex-wrap:什么时候换行
align-self：子元素在交叉轴的对齐方式（开始对齐、居中对齐...）
absolute 和 relative 分别依据什么定位
relative依据自身定位 且对外界元素不会有什么影响
absolute 依据最近一层的定位元素定位
定位元素：absolute relative fixed 或 body
line-height 如何继承
写具体数值，如30px，则继承该值
写比例，如2/1.5，则继承该比例（直接继承与继承本身的font-size相乘的值）
写百分比，如200%，则继承计算出来的值（考点）（先与本身的font-size相乘后，再继承）
rem的弊端
阶梯型（对于不同尺寸范围需要指定相应的根元素标准，不方便指定到每个尺寸）
网页视口尺寸
window.screen.height：屏幕高度
window.innerHeight: 网页视图高度
document.body.clientHeight: body的高度，网页内容决定
vh: 网页视图高度的1/100
vw：网页视图宽度的1/100
vmax：取网页视图的width和height的最大值的1/100
vmin：取网页视图的width和height的最小值的1/100
值类型和引用类型
值类型： undefined、string、number、boolean、symbol【Symbol是JavaScript中的一种新的基本数据类型,引入自ECMAScript 6(ES6)标准。它是一种不可变且唯一的数据类型,可以用来创建独一无二的键(key)。】
引用类型：object、array、null、函数function
typeof运算符 识别所有值类型，识别函数，判断是否是引用类型
手写深拷贝 第一步：判断值类型和应用类型 第二步：判断是数组还是对象 第三步：递归（hasOwnProperty保证Key不是原型链属性）
function deepClone(obj = {}) {
if (typeof obj !== 'object' || obj == null) {
// obj 是 null, 或者不是对象和数组，直接返回
return obj
}
// 初始化返回结果
let result
if (obj instanceof Array) {
result = []
} else {
result = {}
}
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
// 保证 key 不是原型的属性
// 递归调用
result[key] = deepClone(obj[key])
}
}
// 返回结果
return result
}
如何用class实现继承？
声明一个父类 然后用extends 来继承这个父类 super来传递父类声明的值
理解原型与原型链 每个class都有显示原型 prototype
每个实例都有隐式原型 proto
每个实例的隐式原型指向class的显式原型
原型链的执行规则
先找自身的_proto_如果没有 则一直找 只到找到为止
InstanceOf 这个方法 就是判断这个实例有没有在圆形链里面
作用域与闭包的理解
作用域：变量的合法使用范围；
全局作用域： window、document
函数作用域： 函数内部的作用域，函数之外不可用函数内部变量
块级作用域：const、let声明变量
自由变量：一个变量在当前作用域中使用单未被声明，则会沿作用域一级一级往上查找知道找到该变量 所有的 自由变量的查找，是在函数定义的地方，向上级作用域查找，不是在执行的地方
this理解
在class 方法中调用和箭头函数
this的取值是在执行时确定的，不是定义时候确定的
应用场景
作为普通函数 -> window
使用call、apply、bind（返回新的函数）（都可以改变this指向） -> 传入的对象
作为对象方法被调用 -> 调用的对象
在class方法中被调用 -> 实例对象
箭头函数 -> 永远取上级作用域this
event loop
js单线程运行
异步要基于回调实现
event loop就是异步回调的实现原理
Promise 初始化的时候传入的函数会立刻执行
三种状态
pending(初始化状态)，resolved（成功状态)，rejected(失败状态)
pending ->resolved 或 pending->rejected
变化不可逆
状态的表现
pending状态，不会触发then和catch
resolved状态，会触发后续的then回调函数
rejected状态，会触发后续的catch回调函数
reslove只会触发then的回调，不会触发catch
reject只会触发catch的回调，不会触发then
Promise的基本原理
Promise是一个类
Promise类在执行时会传入一个执行器函数，该函数会立即执行
Promise具有三种状态
Pending
Fulfilled
Rejected
Promise状态一旦确定就不可以改变，且状态只能由
Pending => Fulfilled
Pending => Rejected
状态的改变由resolve，reject两个方法改变
then方法内部做的事情是状态判断
如果是Fulfilled状态则执行成功的回调
如果是Rejected状态则执行失败的回调
Promise的链式调用需要在then方法中返回一个Promise实例
async/await 和 Promise的关系
async/await是消灭异步回调的终极武器
但和Promise并不互斥
反而，两者相辅相成（结合起来用）
执行async函数，返回的是Promise对象
await相当于Promise的then
try...catch可捕获日常，代替了Promise的catch
宏任务与微任务
宏任务： setTimeout， setInterval，Ajax， DOM事件
微任务： Promise Async await
微任务执行时机比宏任务要早
*setInterval和setTimeout的主要区别在于执行次数和执行频率。 *以下是相关介绍：12
- 执行次数。setTimeout是延迟指定时间后只执行一次回调函数，常用于需要延迟执行的场合；setInterval则是每隔指定的时间间隔重复执行回调函数，直到被取消，常用于需要定时执行的场合。
- 执行频率。setTimeout在指定的延迟后执行回调函数，只执行一次；setInterval每隔指定的时间间隔就执行一次回调函数，直到被取消。
此外，它们在使用场景和取消方式上也存在差异。setTimeout通常用于处理如动画延迟、按钮防抖等场景；setInterval则适用于轮播图切换、时钟更新等需要定时执行的任务。在取消方式上，setTimeout可以通过clearTimeout函数取消执行，而setInterval则通过clearInterval函数取消执行。
event loop和DOM渲染
JS是单线程的，而且和DOM渲染共用一个线程
JS执行的时候，得留一些时机供DOM渲染
当Call Stack空闲的时候，先尝试DOM渲染，再去触发Event Loop机制
DOM节点操作
获取dom节点：
documen.getElementById()
document.getElementsByClassName
document.getElementsByTagName
docuement.querySelectorAll // css选择器
attribute // 对html属性进行修改
property // js操作属性的一种形式 对dom元素的js变量进行修改
事件代理（也称事件委托）——基于事件冒泡
指定一个事件处理程序，就可以管理某一类型的所有事件，减少dom交互（不需要给每一个子元素都绑定监听），提高性能
优点：1.代码简洁；2.减少浏览器内存占用；3.不要滥用（常用于瀑布流子节点很多的情况）
同源策略
ajax请求时，浏览器要求当前网页和sever必须同源（安全）
同源：协议、域名、端口，三者必须一致
加载图片css js 可无视同源策略
<img src = 跨域的图片地址/>
<link href = 跨域的css地址/>
<script src = 跨域的js地址></script>
<script>可实现JSONP
跨域
所有的跨域，都必须经过sever端允许和配合
未经sever端允许就实现跨域，说明浏览器有漏洞，危险信号
手写一个ajax
function ajax(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest() || new ActiveXObject();
xhr.open('GET', url, true);
xhr.onreadystatechange = function () {
if(xhr.readystate === 4) {
if(xhr.status === 200) {
resolve(JSON.parse(xhr.responseText))
} else if (xhr.status === 404) {
reject(new Error('404 not found'))
}
}
}
xhr.send(null)
})
}
cookie localStorage sessionStorage的区别
cookie: 本身用于浏览器和server通讯；被“借用”到本地存储。（本身并不是被用来做存储的）。最大存储4k; 请求时会将cookie中的数据发送到服务端
localStorage和sessionStorage是HTML专门为存储而设计的，最大可存5M
localStorage数据会永久存储，除非手动清除；sessionStorage数据只存在于当前会话，浏览器关闭则清空
HTTP缓存 ① 缓存是什么?
保存资源副本并在下次请求时直接使用该副本的技术。当Web缓存发现请求的资源已经被存储，它会拦截请求，返回该资源的拷贝，而不会去源服务器重新下载。
② 为什么需要缓存
减少不必要的网络请求,使得页面加载更快; 网络请求是不稳定,加大了页面加载的不稳定性; 网络请求的加载相比于cpu加载 & 页面渲染都要慢.
③ 哪些资源可以被缓存?
静态资源 js css img , 因为静态资源加上hash名打包后是不会修改的
http与https的区别：http明文加密，不安全
https加密方式：对称加密、非对称加密
https安全性验证：https证书
