前端基础知识

一、页面布局

题目1：请写出三栏布局，左右各300px, 中间自适应

1. float

特点：

• 不会脱离文档流
• 浮动元素与文字(inline boxes)不会重叠
• 浮动元素会触发BFC

# html 部分
<div class="box">
  <div class="left"></div>
  <div class="right"></div>
  <div class="center"></div>
</div>

# css 部分
.left{float: left;}
.right{float: right;}
.center{
   /* 开启BFC, 不会与float元素发生重叠, 同时宽度也是自适应 */
   overflow: hidden;
}

2. flex

# html 部分
 <div class="box">
    <div class="left">左</div>
    <div class="center">flex布局</div>
    <div class="right">右</div>
</div>

# css 部分
 .box{  display: flex; }
 .center { flex: 1; }

3. position

# html 部分
<div class="box">
    <div class="left">左</div>
    <div class="center">absolute布局</div>
    <div class="right">右</div>
</div>

# css部分
.box{ position: relative; }
.left { position: absolute; left: 0; }
.center { position: absolute; left: 300px; right: 300px; }
.right { position: absolute; right: 0; }

4. table-cell

# html 部分
<div class="box">
    <div class="left">左</div>
    <div class="center">absolute布局</div>
    <div class="right">右</div>
</div>

# css 部分
.box{ display: table; }
.center{ display: table-cell; width: 100%; }
.left{ width: 300px; }
.right{ width: 300px; }

5.inline-block + calc

# html 部分
<div class="box">
    <div class="left">左</div>
    <div class="center">absolute布局</div>
    <div class="right">右</div>
</div>

# css 部分
.box{ font-size: 0; }
.left, .right, .center{ display: inline-block; font-size: 16px; }
.left: { width:300px; }
.right{ width: 300px; }
.center{ width: (100% - 600px); }

题目2: 实现水平垂直居中

题目3: 实现等高布局

题目4: 实现瀑布流布局

二、css 盒模型

一个html文档(body)中的元素可以看成是一个盒子, 这个盒子包含margin border padding content 4 个部分。两种盒模型分别是：

• 标准盒模型 box-sizing: content-box
• IE盒模型 box-sizing: border-box

1. js如何获取盒模型对应的宽/高？

# html
<div style="width: 100px; height: 50px;"></div>

let dom = document.querySelector('div')
# 获取内联样式的宽高
dom.style.width/height  // 100px/50px

# 获取渲染后的元素的真实样式 currentStyle只兼容ie, getComputedStyle兼容chrome和firfox
window.getComputedStyle(dom).width/height

# getBoundingClientRect 获取元素的定位信息
dom.getBoundingClientRect().width/height

2. BFC

三、DOM事件

1. DOM事件级别

• DOM0 dom.onclick = function(){}
• DOM2 document.addEventListener('click', function(){})
• DOM3 document.addEventListener('keyup', function(){})

2. DOM事件模型(捕获和冒泡)
3. DOM事件流
4. 捕获和冒泡的过程
   捕获 window -> document ->documentElement ->body -> ... 目标元素
5. DOM事件对象

• target 目标元素
• currentTarget 冒泡/捕获阶段的元素
• preventDefault 阻止默认事件
• stopPropagation 阻止事件传播
• stopImmediatePropagation 阻止事件传播, 并且阻止元素上的监听事件继续执行

6. 自定义事件

var customEvent = new CustomEvent('gameStart', { detail: {name: 'lalala'}})
dom.addEventListener('gameStart', function(e){
  console.log(e.detail)  // { name: 'lalala' }
})
dom.dispatch(customEvent)

四、http协议

1. http协议的主要特点？
   无状态、无连接、简单、灵活
2. http报文的组成？

• 请求报文
  • 请求行 POST /notes/71bb3cf19095/mark_viewed.json HTTP/1.1
  • 请求头
  • 空行
  • 请求体
• 响应报文
  • 响应行 HTTP/1.1 200 OK
  • 响应头
  • 空行
  • 响应体

3. http方法
   get/post/put/delete/option/head
4. get和post的区别？

• get通过url传递参数，post通过request body 传递参数
• get请求通过url传递的参数有大小限制 ,post没有
• get请求将参数直接暴露在url中, 不太安全
• get请求通常用户查询资源, post 用于提交创建/修改
• 浏览器会主动缓存get请求，post需要手动设置
• get请求只能进行url编码, post支持多种格式的编码

5. http状态码
   1xx: 请求已经接收，继续处理
   2xx: 请求成功
   3xx: 重定向，要完成请求必须进一步操作
   4xx: 客户端错误, 请求无法实现或语法错误
   5xx: 服务端错误，服务器未能实现合法请求
   206: 客服端发送了一个带range的get请求，服务器完成了它。
   301: 所请求的页面已转移至新的url
   302: 所请求的页面已临时转移至新的url
   304: 客户端有缓存的文档，并发出了一个条件性请求, 服务器告诉客户端原来的文档还可以继续用。
   400: 客户端有语法错误
   401: 请求未经授权
   403: 对请求的页面禁止访问
   500: 服务器错误, 原来的缓存文档还可以继续使用

6. 持久连接和管线化
   持久连接: http/1.1 connection: keep-alive
   管线化: 浏览器可以多次发送请求到服务器, 而不需要等待上一次请求的结果，实现并行请求。
   管线化特点：

• 通过持久化连接完成，仅http/1.1 支持
• 只有get和head可以支持，post有所限制
• 初次创建连接时也不应启动管线机制，因为对方（服务器）不一定支持HTTP/1.1版本的协议。

7. 缓存
   http缓存分为强制缓存和对比缓存
   强制
8. 跨域

五、面向对象

原型链

function Persion(name) { this.name = name }
Persion.prototype.say = function(){ console.log(this.name) }

let p = new Persion('孔明')
p.__proto__ === Persion.prototype // 都指向Persion的原型对象
p instanceof Persion // true

1. instanceof 、constructor、typeof 的原理是什么？
   实例的原型(proto或者proto.proto)是否存在构造函数的原型

2. 创建对象的几种方式？

# 方法一 对象字面量,
var obj = {}

# 方法二 new
function Persion(){}
var obj = new Persion()
var obj1 = new Object()

# 方法三 Object.create
function Persion(){}
var obj = Object.create(Persion)

3. new 运算符
   3.1 一个新对象被创建，继承自原型（构造函数的prototype)
   3.2 构造函数被执行，参数传入，同时this指向创建的实例。
   3.3 如果构造函数返回了一个对象，那么这个对象就会替换new出来的结果。

4. js的继承有几种方式？
   4.1 借助构造函数实现继承
   4.2 组合继承

function Person(){
  this.name = 'name'
}
Person.prototype = {
  constructor: Person,
  getName(){
    return this.name
  }
}

六、通信

1. 跨域产生的原因
   浏览器同源策略：协议+域名+端口
2. 跨域的影响
   跨域时默认不允许访问cookie、localStorage、indexDB
   DOM和JS对象无法获取
   AJAX请求不能发送
3. 跨域解决方案
   3.1 jsonp
   通过动态创建script标签指定回调函数来实现跨域,只支持get请求跨域。
   3.2 cors 跨域资源共享
   通过配置nginx

# 设置允许跨的域名
add_header Access-Control-Allow-Origin <要跨的域名>;
# 设置是否跨域时, 是否允许携带cookie
add_header Access-Control-Allow-Credentials true;
# 设置跨域时，是否允许自定义header
add_header Access-Control-Allow-Headers <字段名>;

3.3 postMessage实现跨域
通过触发message事件, 达到父级和iframe内的页面传递参数
3.4 location.hash + iframe
父级页面修改hash值, 子页面监听hash值变化,window.onhashchang
3.5 window.name + iframe
3.6 websocket
3.7 fetch

前端通过设置 withCredentials可携带cookie

七、安全

CSRF(跨站请求伪造)
XSS(跨站脚本攻击)

八、算法

• 排序
• 堆栈、队列、链表

九、浏览器渲染机制

1. DOCTYPE 定义文档类型
   html5: <!DOCTYPE html>

2. 浏览器渲染过程
   DOM tree CSSOM tree render tree layout painting

3. reflow 重排
   当渲染树中的一部分(布局,显示隐藏, 几何属性等)发生改变, 重新构建的过程, 成为reflow

4. 什么时候触发reflow
   布局变化
   隐藏
   几何属性发生变化

5. 重绘
   当渲染树中的DOM元素外观(颜色、背景等)发生变化，将触发重绘过程。

重排reflow一定会触发重绘repaint, 重绘不一定会触发重排。

十、页面性能

1. 合并、压缩资源，减少http请求
2. DNS 预解析
3. 使用CDN
4. 非核心资源异步加载
5. 合理利用缓存(最重要的部分) 强缓存、协商缓存

十一、错误监测

1. 错误分类

• 即时错误, js运行时报错
  • window.onerror
  • try catch
• 资源加载时错误
  • Error事件捕获, 资源加载错误不会冒泡, 所以只能从捕获阶段获取错误。
  • object.onerror
  • performance.getEntries()

2. 跨域资源错误捕获

3. script添加crossorigin属性

4. 设置js响应头Access-Control-Allow-Origin: *

5. 错误上报

• ajax
• Image