js变量类型和计算
值类型和引用类型
值类型：变量存储的值在栈内存中。常用的值类型有Number, String, undefined, Boolean, Symbol.
引用类型：变量存储的值是堆内存的某个地址，这个地址所指向的区域内存储具体数据。常见的引用类型有Object, Array, 及Function. Function 是特殊的引用类型，不用于存储数据。
typeof 运算符
识别所有值类型（null除外），识别函数，识别是否是引用类型
instanceof 判断对象类型， '==='判断null跟undefined类型
深拷贝
递归是重点。数组与对象。
变量计算-类型转换
字符串拼接，“ == ”，if语句和逻辑运算符
除了 ==null 外，都用 “ === ”
truly变量：!!a === true。falsely变量: !!a ===false。!!0 === false, !!'' === false, !!null === false, !!undefined === false, !!NaN === false, !!false === false
原型与原型链
原型
每个class都有显式原型：prototype，每个对应实例都有隐式原型：proto。class的prototype === 实例的protp，这也是 instanceof的原理
作用域和闭包
作用域
全局作用域，函数作用域，块级作用域。自由变量：一个变量在当前作用域被使用但未定义，浏览器会向上级作用域依次寻找。如果全局作用域中该变量都未找到，浏览器会报错
分号开头
圆括号开头的前一条语句：匿名立即执行函数表达式；中括号开头的前一条语句：数组，变量名
闭包
所有的自由变量的查找实在函数定义的地方，向上级作用域查找，不是在执行的地方。
this
this的取值是在执行上下文的时候确定。原型中的this是proto的对象。
同步和异步的区别
js是单线程语言，同时只能做一件事。
异步任务用于如网络请求，读写文件，定时任务等需要花费较长时间。异步不会阻塞代码的执行，等异步任务完成时再通过回调函数接着执行完。
promise
promise解决了回调地狱的问题(callback hell)
js web api
DOM
dom的本质是一颗树，一种特殊的xml。
DOM节点操作
property 是js对象操作属性的一种形式，设置js变量的属性，不会对标签产生影响。不会体现到html的结构中。尽量用property进行dom操作
attribute 是dom元素的方法，设置标签的属性，会对标签产生影响，会影响html结构。
DOM结构操作
- 新增插入节点
新建节点document.createElement()
插入节点
appendChild()
移动节点
document.getElementById()
appendChild() - 获取子元素列表
获取父元素
p.parantNode
获取子元素列表
div.childNodes
nodeType属性可以选出想要的p标签 - 删除子元素
removeChild()
DOM性能
缓存DOM查询结果
将频繁操作改为一次性操作 createDocumentFragment()然后 append 进去
BOM
- navigator
const ua = navigator.userAgent
const isChrome = ua.indexof('Chrome') - screen
screen.height - location
locaton.href
location.protocol
location.hash
location.pathname
location.search - history
history.back
history.forward
事件绑定
- 事件绑定
- 事件冒泡
stopPropagation
子元素冒泡到父元素
preventDefault
通过事件冒泡实现事件代理
减少浏览器内存占用
代码简洁
但不要滥用
ajax
xhr.readyState
- 0 - (未初始化)还没有调用send()方法
- 1 - （载入）已调用send()方法，正在发送请求
- 2 - （载入完成）send()方法执行完成，已经接受到全部响应内容
- 3 - （交互）正在解析响应内容
- 4 - （完成）响应内容解析完成，可以在客户端调用
xhr.status - 2xx - 表示成功处理请求，如200
- 3xx - 需要重定向，浏览器直接跳转，如301（永久重定向），302（临时重定向），304（资源未修改）
- 4xx - 客户端请求错误，如404（未找到），403（权限不够）
- 5xx - 服务端错误
手写一个简易的Ajax（promise）
同源： 协议，域名，端口三者必须一致
所有的跨域，都必须经过server端允许和配合
未经server端运行就实现跨域，说明浏览器有漏洞，危险信号
加载图片cssjs可无视同源策略
jsonp：客户端传相关url，服务端将相关信息拼接好后传给客户端。客户端调用定义好的函数处理服务端响应的拼接字符串
cors：服务端设置
response.setHeader("Access-Control-Allow-Origin", "url")
response.setHeader("Access-Control-Allow-Headers", "")
response.setHeader("Access-Control-Allow-Methods", "")
接受跨域的cookie
response.setHeader("Access-Control-Allow-Credentials", "")
ajax常用插件：jQuery，axios，fetch
存储
cookie：本身用于浏览器和server通讯，被“借用”到本地存储来。键值对。
缺陷
最大存4kb。http请求时需要发送到服务端，增加请求数据量。只能用document.cookie = '' 来修改，太过简陋
localStorage和sessionStorage
HTML5专门为存储而设计，最大可存5m
api简单易用，setItem getItem
不会随着http请求被发送出去
localStorage数据会永久存储。除非代码或手动删除
sessionStorage数据只存在于当前会话，浏览器关闭则会清空
关于开发环境
git
chrome调试工具
抓包
webpack
运行环境
网页加载过程
dns解析： 域名 -> ip地址
浏览器根据ip地址向服务器发起http请求
服务器处理http请求，并返回给浏览器
渲染过程
根据html代码生成domtree
根据css代码生成cssom
将dom tree和cssom整合形成render tree
根据render tree渲染页面
遇到<script>则暂停渲染，优先加载并执行js代码，完成再继续
直至把render tree渲染完成
window.onload 页面的全部资源加载完才会执行，包括图片、视频等
DOMCoententLoaded dom渲染完成即可执行，此时图片、视频可能还没加载完
性能优化
性能优化原则：多使用内存、缓存或其他方法；减少cpu计算量，减少网络加载耗时
让加载更快：减少资源体积，压缩代码；减少访问次数：合并代码，ssr服务器端渲染，缓存
使用更快的网络：cdn
让渲染更快：
css放在head，js放在body最下面
尽早开始执行js，用domcontentloaded触发
懒加载（图片懒加载，上滑加载更多）
对dom查询进行缓存
频繁dom操作，合并到一起插入dom结构
节流throttle防抖debounce
防抖：用户在输入结束或暂停的时候才会触发change事件
节流throttle：拖拽一个元素是，要随时拿到该元素被拖拽的位置。直接用drag事件，则会频繁触发，很容易导致卡顿。节流：无论拖拽速度多块，都会每隔100ms触发一次
