JS基础知识总结

if语句

处理的不是true或false 而是truly变量及falsely变量 就比如 if（a） 比较的则是！！a

typeof能判断哪些类型

所有值类型（undefined,string,number,symbol,boolean）

识别函数

判断是否为引用类型（不可再细分）(typeof null === "object")

闭包

自由变量的查找，是在函数定义的地方，向上级作用域查找，不是在执行的地方！！！

闭包可以隐藏数据

 这是我自己写的一个闭包函数

箭头函数指向

单线程和异步

JS是单线程语言，只能同时做一件事

浏览器和nodejs已支持js启动进程，如Web Worker

JS和DOM渲染共用同一个线程，因为js可修改Dom

基于JS是单线程语言，所以异步不会阻塞代码执行 ，同步会阻塞代码执行

异步应用场景

网络请求 定时任务

一般的回调函数是嵌套型 而promise是管道型

async/await

为了解决callback hell 

Promise then catch 链式调用，但也是基于回调函数

async/await是同步语法 彻底消灭回调函数

async/await和Promise的关系

执行async函数，返回的是Promise对象

await相当于Promise的then

try...catch可捕获异常，代替了Promise的catch

for...of 的应用场景

异步循环

宏任务macroTask 和微任务 microTask

宏任务：定时器，Ajax，DOM事件

微任务：Promise async/await

微任务执行时机比宏任务早

event loop 和DOM渲染

每次Call Stack清空（即每次轮询结束），即同步任务执行结束 都是DOM重新渲染的机会

微任务和宏任务的区别

宏任务：DOM渲染后触发，如setTimeout

微任务：DOM渲染前触发，如Promise

根本区别

微任务是ES6语法规定的

宏任务是有浏览器规定的

property和attribute

property: 修改对象属性  不会体现在html结构

attribute：修改html属性，会改变html结构

都有可能引起DOM重新渲染

DOM为树形结构

DOM性能

尽量减少DOM操作

频繁操作转为一次操作

需要用到document.createDocumentFragment()作为载体执行一次性操作，因为它处于DOM树之外，作为一个变量来使用

BOM

navigator 浏览器信息 screen 高宽度信息

location url信息 history 

事件代理

 代码简洁 减少浏览器内存占用 不可滥用

同源策略

协议，域名，端口必须一致

加载图片，css，js可无视同源策略

JSONP

<script>可绕过跨域限制

服务器可以任意拼接动态数据

<script>可以获得跨域数据 只有服务端愿意

cookie一开始是为了浏览器与·服务器之间通讯 而不是本地存储

cookie的缺点

存储大小 最大4kb

增加请求数据量

Storage

HTML5为存储而设计 最大可存5M

API简单易用

不会随着http请求被发送出去

cookie与Storage区别

容量

API易用性

是否随http请求发送出去

http

状态码分类

1** 服务器收到请求

2** 请求成功

3** 重定向  301永久重定向 302临时重定向  配合location 浏览器自动处理 304 资源未被修改

4** 客户端错误 404资源未找到 403没有权限

5** 服务端错误 504网关超时

http methods

 get 获取数据

post 新建数据

Request Headers

Accept 浏览器可接收的数据格式

Accept-Encoding浏览器可接收的压缩算法 如gzip

Connection：kepp-alive 一次TCP连接重复使用

cookie

Host

User-Agent（简称UA）浏览器信息

Content-type 发送数据的格式 如application/json

Response Headers

Content-type 返回数据的格式 如application/json

Content-length 返回数据的大小 多少字节

Content-Encoding 返回数据的压缩算法

Set-cookie

自定义header

https

http和https

http是明文传输，敏感信息容易被劫持

http = http+加密 ，劫持了也无法解密

现代浏览器已开始强制http协议

加密方式

对称加密：一个key同负责加密，解密

不对称加密： 一对key，A加密之后，只能用B来解密

https同时用到了这两种加密方式（成本问题）

webpack和babel

ES6模块化，浏览器暂不支持

ES6语法，浏览器并不完全支持

压缩整合代码 让网页加载更快

前端linux常用命令

网页渲染为何把js代码放在最后

可能导致加载速度慢

img标签不会堵塞DOM的渲染

window.addEventListener('load',function(){

}) // 页面全部资源加载完才执行，包括图片视频

document.addEventListener('DOMContentloaded',function(){

}) // DOM渲染完即可执行，此时图片，视频还可能没有加载完

网页加载过程

加载资源的形式

加载资源的过程

渲染页面的过程

性能优化原则

多使用内存，缓存或其他方法

减少CPU计算量，减少网络加载耗时

适用于所有编程的性能优化——空间换时间

让加载更快

1.减少资源体积

2.减少访问次数：合并代码，SSR服务器渲染，缓存

3.使用更快的网络

让渲染更快

CSS放在head js放在body最下面

尽早执行js，用DOMContentLoaded触发

懒加载

对DOM查询进行缓存

将频繁操作DOM合并到一起插入DOM结构

节流throttle 和防抖debounce

常见的web前端攻击方式有哪些

XSS跨站请求攻击

在网站上嵌入<script>脚本来获取cookie，发送到我的服务器上（服务器配合跨域），有人查看时，我则可以获取访问者的cookie

XSS预防

替换特殊字符 如<变为&lt；>变为&gt； <script>就不会作为脚本执行

前后端都要替换，都做总不会有错

XSRF预防

使用post接口

增加验证，例如密码，短信验证码，指纹

纯函数

1.不改变源数组（没有副作用）

2.返回一个数组

concat,map,filter,slice

非纯函数

push,pop,shift,unshift

forEach some every reduce

自由变量的查找，要在函数定义的地方（而非执行的地方）

this指向不能在定义的时候下结论 执行时再去看this指向