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：

        //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放里/JS放底部/JS：DOMContentLoaded/懒加载
          • 懒加载：src="preview.png" real-src="real.png"滑到了再加载
        • DOM查询缓存/要插入的DOM元素先放进document fragment/节流防抖RAF：体验流畅
          • 防抖：输入暂停/结束再出结果[监听输入框/keyup/...]
            • 弄一个timer，有就清除定时函数，没有就干活并清空
          • 节流
            • 弄一个timer，有就返回，没有就干活并清空
          • RAF: requestAnimationFrame(func)自动定时函数

  • 安全

    • XSS
      • 用户输入恶意脚本
      • 转换特殊字符
    • XSRF
      • 跨站请求伪造
      • 用post请求/进行验证