前端综合问题

2018-07-21

本文涉及的方面比较广泛，html、css、网络都有，大多数都为常见问题。

访问一个url都有哪些过程

DNS 查询
TCP 握手、TLS 握手
HTTP请求
服务器处理请求
浏览器渲染
1. 解析 DOM 结构，生成 DOM 树
2. 生成 render 树（DOM + CSSOM）
3. 布局 render 树
4. 展示 render 树

Url的组成部分

协议 + 域名 + 资源路径 + 参数

Tcp网络

组成部分：网络接口层、网络层、传输层、应用层
三次握手
1. 第一次握手：客户端发送 syn 包(syn=j)到服务器。
2. 第二次握手：服务器收到 syn 包，必须确认客户的 SYN（ack=j+1），同时自己也发送一个 ASK 包（ask=k）。
3. 第三次握手：客户端收到服务器的 SYN＋ACK 包，向服务器发送确认包 ACK(ack=k+1)。

安全性能

CSRF(Cross-site request forgery) 跨站请求伪造
- 原理：网站 B 通过让已登录的网站 A 访问带有攻击的链接，从而模拟网站 A 发送请求
- 防御方式：Token 验证、Referer 验证（服务器只接收本站的请求）
XSS(Cross Site Scripting) 跨域脚本攻击
- 原理：无需登录，通过合法的输入，往网站里注入脚本
- 防御方式：HTML Entity 编码；过滤输入的信息（和事件相关的属性，如onclick类，script节点，iframe节点）

h5都有哪些新特性

语义化标签 header、footer、section等
canvas
localStorage 和 sessionStorage

本地缓存的各种方式以及区别

session 通常用于服务端存储
cookie 有有效期，不设置有效期默认关闭页面清空数据
localStorage 永久保存，除非清除浏览器的缓存
sessionStorage 临时保存当前会话的数据，关闭窗口后清空数据

ajax的实现机制

XMLHTTPRequest(XHR)
1. 新建一个 XHR 对象
2. 使用 open 设置请求的参数。open(method, url, 是否异步)
3. 发送请求
4. 注册 onreadystatechange 事件
5. 获取返回的数据

跨域

JSONP 通过 script 标签的异步加载实现。
WebSocket
CORS 跨域时，浏览器会拦截 Ajax 的请求，并在 http 头中加 Origin。
Hash 地址栏的 url 后的 # 就是 hash，hash改变页面不会刷新
postMessage

5个海盗平分一百个金币，第一个人做策略，如果有一半人以上投票否决，那个人就会被丢进海里，那么他应该做出什么样的策略

思路：至少要有 3 个人投决定票，那就是要拉 2 票。

常用的打包工具

webpack
parcel

垂直居中怎么实现的

fixed

position: fixed;
width: 100px;
height: 40px;
left: 0;
right: 0;

absolute，父元素宽高要固定

{
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
}
{
 position: absolute;
 margin: auto;
 top: 0;
 bottom: 0;
 width: 50px;
 height: 50px;
}

flex

display: flex;
height: 100%;
justify-content: center;
align-items: center;

position四个定位的区别

relative 相对定位。相对于其他正常的元素去定位
absolute 绝对定位。相对于 static 定位以外的第一个父元素进行定位。
fixed 固定定位。相对于浏览器窗口定位。
static 没有定位。默认值

inline和inline-block的区别

inline 宽度与自身内容同宽；不会占据一行；不能设置宽高值；margin、padding水平方向的设置有效，垂直方向的无效
inline-block 具备 inline 的同行特性和 block 的宽高特性，不占据一行，可以设置宽高值、margin、padding

三列布局，左右两块固定宽度，中间宽度占据剩余的空间，都有哪些实现方式

flex 左右两边flex: 0 0 100px;，中间flex: 1
float 左右两边浮动，设置固定宽度，中间margin-left: 100px; margin-right: 100px;
absolute 跟 float 一样的逻辑，用 left 和 right 来控制

样式的优先级

!important > 内联 > id > class = 属性 = 伪类(:hover) > 标签 = 伪元素(::before)

ws如何知道接收到的信息来自于哪个发送请求

浏览器兼容

性能优化

| 阅读量()