JS面试复习笔记

JavaScript复习

变量
- 类型
  - 值类型
    - typeof ：值[开新空间]/引用[引用堆空间]/函数
  - 引用类型
    - 对象
      - 深拷贝Object.create()
原型与原型链
- class
  - 实例的隐式原型===对象的显式原型
  - 子类的显式原型的隐式原型===父类的显式原型
异步
- 单线程
- 应用场景
  - 网络请求
  - 定时任务
- 回调函数嵌套
DOM
- 树：createElement()/appendChild()/removeChild()
- property:JS对象/attribute:HTML
BOM
- 浏览器类型
- URL
- 主要内容：navigator/screen/location/history
  - location : href/protocol/host/search:?/hash:#/pathname
  - history: .back()/.forward()

ajax

XMLHttpRequest
状态码：readyState：4/status：2xx/304[意义:301/2/4:永久/临时重定向/没跳转用缓存]/403[没权限]/5xx[服务端出错]

跨域

同源策略
- 浏览器要求网页与服务器同源：协议/域名/端口一致
- 可跨域
  - 图片[发统计打点请求]/CSS/JS[CDN/JSONP]
  - 需要服务端配合

解决方案

JSONP：

<!--index.html-->
<script>
    window.abc=function (data){
        console.log(data);
    }
</script>
<script src="非本域名/getData.js?callback=abc"></script>
<!--以上内容可方便地封装成工具-->

//getData.js
callback({
    "name":zhangsan
})
//jsonp
$.ajax({
    type:'POST',
    url:'域名?一些参数=value',
    contentType:"application/json;sharset=UTF-8",
    //dataType:'jsonp',
    jsonCallback:'callback',
    data:JSON.stringify(list),
    success:function (data){
        //console.log(data);
        //...
    },
    error:function(e){
        console.log(e.status);
    }
})

CORS：response.setHeader("Access-Control-Allow-...","...");

常用API：jsonp/fetch/axios

存储
- cookie：HTTP中借用来做本地存储，与服务端通讯
- H5：localStorage/sessionStorage
  - 每个域名最大5M
  - set/getItem('name','value')
  - localStorage永久存储
  - sessionStorage只存在当前会话，浏览器关了就没了
- 区别：容量/API易用性/HTTP
开发环境
- git
- git diff/show
  - git checkout -b feature
  - git stash+git checkout -b feature+git stash pop
- webpack
- babel
  - 模块化
  - 生产-哈希
运行环境
- 性能优化
  - 基本原则：空间换时间
    - 多用内存、缓存等
    - 减少计算量，减少网络加载
  - 怎么做？
    - 加载
      - 减少体积[压缩代码]
      - 减少访问次数[合并代码[雪碧图]/SSR服务端渲染/缓存]
        
        缓存：hash放在文件名/不变就找自动生成的缓存/304
        
        服务端渲染：网页和内容一起加载一起渲染/vue SSR
      - CDN分发[基于地域的static静态文件服务]
    - 渲染
      - CSS放<head>里/JS放<body>底部/JS：DOMContentLoaded/懒加载
        
        懒加载：src="preview.png" real-src="real.png"滑到了再加载
      - DOM查询缓存/要插入的DOM元素先放进document fragment/节流防抖RAF：体验流畅
        
        防抖：输入暂停/结束再出结果[监听输入框/keyup/...]
        
        弄一个timer，有就清除定时函数，没有就干活并清空
        
        节流
        
        弄一个timer，有就返回，没有就干活并清空
        
        RAF: requestAnimationFrame(func)自动定时函数
- 安全
  - XSS
    - 用户输入恶意脚本
    - 转换特殊字符
  - XSRF
    - 跨站请求伪造
    - 用post请求/进行验证