javascript学习笔记整理

网页头

<meta http-equiv="V-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="renderer" content="webkit"> //双核浏览器，webkit优先
link rel="dns-prefetch" //dns预解析

页面布局

• 三栏布局方案
  • 1、float
  • 2、absolute
  • 3、flexbox
  • 4、display table
  • 5、grid
• css盒模型
  • 1、基本概念：标准模型+IE模型
    • 标准模型: box-sizing:content-box 浏览器默认
    • IE模型: box-sizing:border-box
  • 2、标准模型和IE模型区别
    • 计算模型的方法不同
  • 3、css如何设置这两种模型
    • content-box 、border-box
  • 4、JS如何设置获取盒模型对应的宽和高
    • dom.style.width/height // 内连样式
    • dom.currentStyle.width/height // IE
    • window.getComputedStyle(dom).width/height
    • dom.getBoundingClientRect().width/height
  • 5、实例题（根据盒模型解释边距重叠）
  • 6、BFC（全称为 块格式化上下文）
    • 边距重叠解决方案 —— BFC子元素再创建一个BFC父元素
    • BFC的原理
      • 1、在BFC的垂直方向的边距会重叠
      • 2、只要元素的position不为static和relative
      • 3、display table相关及inline
      • 4、overflow:auto

---

DOM事件

• 1、基本概念：DOM事件的级别
  • Dom0: element.onclick = function(){}
  • Dom2: element.addEventListener('click', function(){}, false)
  • Dom3: element.addEventListener('click', function(){}, false) // 多了一些事件
• 2、DOM事件模型 —— 事件冒泡及捕获
  • 捕获从上往下
  • 冒泡目标元素向上
• 3、DOM事件流
  • 捕获——>目标阶段——>冒泡
• 4、描述DOM事件捕获的具体流程
  • window——>document——>html——>body——>........
• 5、Event对象的常见应用
  • event.preventDefault() // 阻止默认事件
  • event.stopPropagation() // 阻止冒泡
  • event.stopImmediatePropagation() // 多个事件，阻止其它事件执行
  • event.currentTarget // 当前的事件
  • event.target // 当前点击的元素
• 6、自定义事件

var eve = new Event('custom')/new CustomEvent('custom',argu)
ev.addEventListener('custom', function(){
    // do something
})
ev.dispatchEvent(eve);

---

HTTP协议

• 1、HTTP协议的主要特点
  • 简单快速、灵活、无连接、无状态
• 2、HTTP报文的组成部分
  • 请求报文 ——> 请求行、请求头、空行、请求体
  • 响应报文 ——> 状态行、响应头、空行、响应体
• 3、HTTP方法
  • GET、POST、PUT、DELETE、HEAD(获得报文首部)
• 4、POST和GET的区别
  • GET在浏览器回退时是无害的，而POST会再次提交请求
  • GET产生的URL地址可以被收藏，而POST不可以
  • GET请求会浏览器主动缓存，而POST不会，除非手动设置
  • GET请求只能进行URL编码，而POST支持多种编码方式
  • GET请求参数会被完整的保留在浏览器历史记录里，而POST中的参数不会被保留
  • GET请求在URL中传送的参数是有长度限制的，而POST没有限制
  • 对参数的数据类型，GET只接ASCII字符，而POST没有限制
  • GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息
  • GET参数通过URL传递，POST放在Request body中
• 5、HTTP状态码
  • 1XX：指示信息——表示请示已接收，继续处理
  • 2XX：成功——表示请求已被成功接收
  • 3XX：重定向——要完成请求必须进行更进一步的操作
  • 4XX：客户端错误——请求有语法错误或请求无法实现
  • 5XX：服务端错误——服务器未能实现合法的请求
• 6、什么是持久连接
• 7、什么是管线化
  • 全部一次发送请求，全部一次响应

---

原型链类

• 一、创建对象有几种方法

var o1 = {name: 'o1'}
var o2= new Object({name: 'o2'});
var M = function(name){this.name=name}
var o3 = new M()
var p = {name:'o3'}
var o4 = Object.create(P);

• 二、原型、构造函数、实例、原型链
  • 只有构造函数才有prototype
  • 实例有__proto__，且指向的构造函数的prototype
• 三、instanceof的原理
  • 实例对象 instanceof 构造函数 / 实例对象.proto=== 构造函数.prototype
  • 判断实例对象的构造器
  • 实例对象.proto.constructor === 构造器
• 四、new 运算符
  • 第一步、一个新对象被创建。它继承自 (构造器/对象).prototype
  • 第二步、构造函数被执行。执行的时候，相应的传参会被传入，同时上下文(this)会被指定为这个新实例。
  • 第三步、如果构造函数返回了一个“对象”，那么这个对象会取代整个new出来的结果。如果构造函数没有返回对象那么new出来的结果为步骤1创建的对象

// 模拟 new
var new2 = function(func){
    var o = Object.create(func.prototype); //新建一个对象，且继承构造函数的原型对象
    var k = func.call() // 执行，转移this
    if(typeof k === 'object'){
        return k
    }else{
        return o
    }
}

---

面向对象类

// 类的声明
// ES5 
function Animal(name){
    this.name=name
}
// ES6 
class Animal {
    constructor(name){
        this.name=name
    }
}
// 生成实例
new Animal('cat')

类与继承 —— 如何实现继承、继承的几种方式

• 1、借助构造函数实现继承 prototype上的方法没法继承

function Parent1 () {
    this.name = 'parent1'
}
function Child1 () {
    Parent1.call(this) // apply
    this.type = 'child1'
}

• 2、借助原型链继承

function Parent2 () {
    this.name = 'parent2'
}
function Child2 () {
    this.type = 'child2'
}
Child2.prototype = new Parent2()

• 3、组合方式

function Parent3 () {
    this.name = 'parent3'
}
function Child3 () {
    Parent3.call(this);
    this.type = 'child3'
}
Child3.prototype = new Parent3()

• 3.1、组合方式优化1

function Parent4 () {
    this.name = 'parent4'
}
function Child4 () {
    Parent4.call(this);
    this.type = 'child3'
}
Child4.prototype = Parent4.prototype

• 3.2、组合方式优化2

function Parent5 () {
    this.name = 'parent5'
}
function Child5 () {
    Parent5.call(this);
    this.type = 'child3'
}
Child5.prototype = Object.create(Parent5.prototype)
Child5.prototype.constructor = Child5

---

通信类

• 一、什么是同源策略及限制
  • 同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。
  • 这是一个用于隔离潜在恶意文件的关键的安全机制。
• 二、前后端如何通信
  • Ajax、WebScoket、CORS
• 三、如何创建Ajax
  • 1、XMLHttpRequest对象的工作流程
  • 2、兼容性处理
  • 3、事件的触发条件
  • 4、事件的触发顺序
• 四、跨域通信及几种方式
  • JSONP（详见附件代码）
  • Hash

  // 利用hash，场景是当前页面 A 通过iframe 或frame 嵌入了跨域的页面 B
  // 在 A 中伪代码如下
  var B = document.getElementsByTagName('iframe')
  B.src = B.src + '#' +'data'
  // 在B中的伪代码如下
  window.onhashchange = function(){
  var data = window.location.hash
  }
  

  • postMessage

  // 窗口A(http:a.com)向跨域的窗口B(http:b.com)发信息
  B.postMessage('data', 'http:b.com')
  // 在窗口B中监听
  window.addEventListener('message', function(event){
  console.log(event);
  }, false)
  

  • WebSocket
  • CORS

---

安全类

• 一、CSRF
  • 1、CSRF，通常称为跨站请求伪造，英文名 cross-site request forgery
  • 2、攻击原理
    • 1、网站中某个接口存在着漏洞
    • 2、用户登录过
  • 3、防御措施
    • 1、Token 验证
    • 2、Referer 验证
    • 3、隐藏令牌
• 二、XSS
  • 1、XSS（cross-site scripting 跨域脚本攻击）
  • 2、攻击原理：参考 www.imooc.com/learn/812
  • 3、防御措施：参考 www.imooc.com/learn/812

---

算法类

• 1、排序
  • 快速排序：segmentfault.com/a/119000000…
  • 选择排序：segmentfault.com/a/119000000…
  • 希尔排序：segmentfault.com/a/119000000…
• 2、堆栈、队列、链表
  • 堆栈：juejin.cn/post/684490…
  • 队列：juejin.cn/post/684490…
  • 链表：juejin.cn/post/684490…
• 3、递归 segmentfault.com/a/119000000…
• 4、波兰式和逆波兰式
  • 理论：www.cnblogs.com/chenying99/…

---

渲染机制类

• 1、什么是DOCTYPE及作用
  • DTD（document type definition，文档类型定义）是一系列的语法规则，用来定义XML或(X)HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。
  • DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错
  • HTML5
  • HTML 4.01 Strict 该DTD包含所有HTML元素和属性，但不包括展示性的和弃用的元素
  • HTML 4.01 Transitional 该DTD包含所有HTML元素和属性，包括展示性的和弃用的元素
• 2、浏览器渲染过程
  • 参考 segmentfault.com/a/119000001…
• 3、重排 Reflow
  • DOM 结构中的各个元素都有自己的盒子模型，这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为 reflow
  • 触发Reflow
    • 1、当你增加、删除、修改 DOM 结点时，会导致 Reflow 或 Repaint
    • 2、当你移动 DOM 的位置，或是搞个动画的时候
    • 3、当你修改 CSS 样式的时候
    • 4、当你 Resize 窗口的时候（移动端没有这个问题），或是滚动的时候
    • 5、当你修改网页的默认字体时
• 4、重绘 Repaint
  • 当各种盒子的位置、大小以及其它属性，例如颜色字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint
• 5、布局 Layout

---

JS运行机制

• 1、如何理解 JS 的单线程
  • 一个时间之内 JS 只能干一件事情
• 2、什么是任务队列
  • 同步队列
  • 异步队列
    • setTimeout 和 setInterval
    • DOM 事件
    • ES6 中的 Promise
• 3、什么是 Event Loop
  • 理解哪些语句会放入异步任务队列
  • 理解语句放入异步任务队列的时机

---

页面性能

• 1、资源压缩合并，减少HTTP请求
• 2、非核心代码异步加载
  • 异步加载的方式
  • 动态脚本加载、defer、async
  • 异步加载的区别
    • defer 是在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行
    • async 是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关
• 3、利用浏览器缓存
  • 缓存的分类
  • 1、强缓存
    • Expirse
    • Cache-Control 2、协商缓存
    • Last-Modified If-Modified-Since
    • Etag If-None-Match
  • 缓存的原理
    • 4、使用 CDN
    • 5、预解析 DNS

      <meta http-equiv='x-dns-prefetch-control' content='on'>
      <link rel='dns-prefetch' href="">
      

---

错误监控

• 1、前端错误的分类、错误的捕获方式
  • 即时运行错误的捕获方式
    • try...catch、window.onerror
  • 资源加载错误
    • object.onerror、performance.getEntries()、Error事件捕获
    • 延伸：跨域的JS运行错误可以捕获吗，错误提示什么，应该怎么处理？
    • 1、在script标签增加 crossorigin 属性
    • 2、设置 js 资源响应头 Access-Control-Allow-Origin:*
• 2、上报错误的基本原理
  • 1、采用 Ajax 通信的方式上报
  • 2、利用 Image 对象上报
    • (new Image()).src = "上报服务器地址"