面试复习

掘金-1

BFC 是 css 渲染的一部分，是块盒子布局过程中发生的区域，也是浮动元素与其他元素交互的区域
基本数据类型 -> string number boolean undefined null
- 都是按值访问，这些值占用固定的栈内存，由系统自动分配存储空间
- typeof 有几种值 -> 'string' 'number' 'boolean' 'undefined' 'function' 'object'
引用数据类型（数组/对象/函数）的大小是不固定的，保存在堆内存中（js 不能直接操作堆内存空间）
数据封装 类对象 -> String Number Boolean Array Object

typeof null === 'object' // true -> null 是空指针
typeof undefined === 'undefined' // true

== 在比较之前会先对基本数据类型进行类型转换
getAttribute 是获取在 HTML 中定义的属性，property 是 DOM 对象的属性
event.target 触发事件的元素 event.currentTarget 绑定事件的元素
几种绑定上下文 -> .call 和 .apply 是立即执行 .bind 是返回函数的副本
some 有一项返回 true 则整体为 true 否则返回 false -> []
every 有一项返回 false 则整体为 false 否则返回 true -> []
[].slice.call(arguments)
DOMContentLoaded 事件 -> HTML 文档被加载和解析完之后（无需等待样式表、图像和子框架的加载完）
- window 的 load 事件 -> DOM 和所有相关资源全部完成加载后

var el = document.createElement('div')

el.innerHTML

el.innerText

document.body.appendChild(el)

el.remove()

document.body.removeChild()

CommonJS
require 是值拷贝，导出值变化不会影响导入值
import 指向内存地址，导入值会随导出值而变化
微任务 microtask(jobs): promise / ajax / Object.observe(该方法已废弃)
宏任务 macrotask(task): setTimout / setInterval / script / IO / UI Rendering
navigator.userAgent
csrf -> 跨站请求伪造
原型链终点的对象（基础对象）的原型是 null
白屏时间 performance.timing.responseStart - performance.timing.navigationStart
首屏时间

window.onload = () => {
  new Date() - performance.timing.responseStart
}

工作流程

用户输入 URL 地址
根据 URL 解析服务器 ip 地址
- 浏览器先查找本地 DNS 缓存列表，没有的话再向浏览器默认的DNS 服务器发送查询请求同时缓存起来
浏览器解析端口号
浏览器建立一条与目标 Web 服务器的 TCP 连接
- 你招手
- 妹子点头微笑并招手
- 你点头微笑
浏览器向服务器发送一条 HTTP 请求报文
服务器向浏览器返回一条 HTTP 响应报文
关闭连接，浏览器解析文档
- HTML 解析出 DOM Tree
- CSS 解析出 Style Rules
- 将二者关联生成 Render Tree
- Layout 根据 Render Tree 计算每个节点的信息（布局）
- GPU Painting 根据计算好的信息绘制整个页面（渲染）

debounce throttling

// eg 关键词搜索
function debounce(fn, wait) {
  var timer = null
  return function (...args) {
    timer && clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, wait)
  }
}
// eg 平滑滚动
function throttling(fn, wait) {
  var last = 0
  return function () {
    var now = Date.now()
    if (now - last > wait) {
      fn.apply(this, args)
      last = now
    }
  }
}

前端面试之道笔记

基础

Symbol: 原始数据类型值（唯一、不可改变，常用作对象私有匿名 key） Symbol.hasInstance Symbol.toPrimitive
对象转为原始数据类型 Symbol.toPrimitive -> valueOf -> toString
event.stopImmediatePropagation() 阻止该目标上别处注册的事件
loader: 'babel-loader?cacheDirectory=true'
对于跨域的代码运行错误会显示 Script error 对于这种情况我们需要给 script 标签添加 crossorigin 属性

面试复习 ​

掘金-1 ​

工作流程 ​

debounce throttling ​

前端面试之道 笔记 ​

基础 ​

面试复习

掘金-1

工作流程

debounce throttling

前端面试之道笔记

基础