1. HTML 标签语义化
用正确的标签做正确的事情
语义化优点：
- 便于用户阅读，样式丢失的时候能让页面呈现清晰的结构
- 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重，利于浏览器爬虫
- 方便其他设备解析，如盲人阅读器根据语义渲染网页
- 便于团队开发和维护，更具可读性
2. 跨域
2.1 同源策略
同源： 协议+域名+端口 三者相同。 同源策略：同源策略限制以下几种行为：
- Cookie、LocalStorage 和 IndexDB 无法读取
- DOM 和 Js对象无法获得
- AJAX 请求不能发送 同源策略是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。
2.2 跨域解决方案
- JSONP
动态创建script，再请求一个带参网址实现跨域通信。 缺点：只能实现get一种请求，无法发送特定头部，无法发送 body，现在很少使用了。
- postMessage
postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：
a.） 页面和其打开的新窗口的数据传递
b.） 多窗口之间消息传递
c.） 页面与嵌套的iframe消息传递
d.） 上面三个场景的跨域数据传递
用法：postMessage(data,origin)方法接受两个参数
- 跨域资源共享（CORS）
只服务端请求头设置 Access-Control-Allow-Origin 即可，前端无须设置，若要带cookie请求：前后端都需要设置。
3. cookies & localStorage & sessionStorage&indexedDB
Web Storage 的好处：
- api 接口使用方便
- 支持事件通知机制，可以将数据更新的通知发送给监听者
- 减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。
- 快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。
- 临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。
IndexedDB: IndexedDB 是浏览器提供的本地数据库，可以被网页脚本创建和操作。 特点如下：
- 键值对储存
- 异步：LocalStorage 是同步的
- 支持事务。 IndexedDB 支持事务，也就是一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写部分数据的情况。
- 同源限制：IndexedDB 受到同源限制，只有同源窗口可以共享
- 储存空间大： IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。
- 支持二进制储存。 IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。
4. cookies、token 进行登录校验
4.1 cookies
用户成功登录后，服务器将sessionId（身份标识）存储在浏览器cookies中，客户端每次发起请求时，都会带上 sessionId，服务器就知道这个请求来自于谁。
缺点：
- 如果将session存储在服务器中，那么内存的开销会不断增加，扩展性不好
- cookies 跨域前后端均需要设置
- 可能会有 CSRF(跨站请求伪造) 的情况
4.2 token
用户成功登录后，服务器返回一个token给客户端，客户端自行存储token，并在后续的每次请求中携带token，服务端验证token并返回数据。
优点：
- 一般不存储在数据库中，扩展性好
- 后端设置请求头即可支持跨域
- 可防止CSRF(跨站请求伪造)
5. 常见http请求头
- Accept：浏览器可接受的MIME类型；
- Accept-Charset：浏览器可接受的字符集；
- Accept-Encoding：浏览器能够进行解码的数据编码方式，比如gzip。Servlet能够向支持gzip的浏览器返回经gzip编码的HTML页面。许多情形下这可以减少5到10倍的下载时间；
- Accept-Language：浏览器所希望的语言种类，当服务器能够提供一种以上的语言版本时要用到；
- Authorization：授权信息，通常出现在对服务器发送的WWW-Authenticate头的应答中；
- Connection：表示是否需要持久连接。 如果Servlet看到这里的值为“Keep-Alive”，或者看到请求使用的是HTTP 1.1（HTTP 1.1默认进行持久连接），它就可以利用持久连接的优点，当页面包含多个元素时（例如Applet，图片），显著地减少下载所需要的时间。要实现这一点，Servlet需要在应答中发送一个Content-Length头，最简单的实现方法是：先把内容写入ByteArrayOutputStream，然后在正式写出内容之前计算它的大小；
- Content-Length：表示请求消息正文的长度；
- Cookie：这是最重要的请求头信息之一；
- Host：初始URL中的主机和端口；
- If-Modified-Since：只有当所请求的内容在指定的日期之后又经过修改才返回它，否则返回304“Not Modified”应答；
- Referer：包含一个URL，用户从该URL代表的页面出发访问当前请求的页面。
- User-Agent：浏览器类型，如果Servlet返回的内容与浏览器类型有关则该值非常有用；
参考：HTTP最常见的请求头
6. 常见http状态码
| - | 类别 | 描述 |
|---|---|---|
| 1xx | 通知 | 服务器收到请求，请继续执行请求 |
| 2xx | 成功 | 请求正常处理完毕 |
| 3xx | 重定向 | 需要进行附加操作以完成请求 |
| 4xx | 客户端错误 | 客户端请求出错，服务器无法处理请求 |
| 5xx | 服务器错误 | 服务器处理请求出错 |
- 100 Continue： 服务器已收到请求的一部分，正在等待其余部分，请求者应当继续提出请求
- 101 Switching Protocols： 客户端请求切换协议，服务器已确认并准备切换
- 200 OK： 客户端发送给服务器的请求被正常处理并返回
- 301 Moved Peremanently： 永久性重定向——请求的的资源被分配了新的URL，之后应使用新的URL
- 302 Found： 临时性重定向——请求的资源被分配了新的URL，希望本次访问使用新的URL
- 303 SeeOther： 请求的资源被分配了新的URL，应使用get方法定向获取请求的资源
- 304 Not Modified： 客户端发送附带条件的请求时，服务端允许访问资源
- 400 Bad Request： 请求报文中存在语法错误
- 401 Unauthorized： 未经许可，需要通过HTTP认证
- 403 Forbidden： 服务器拒绝该次访问
- 404 Not Found： 服务器上无法找到请求的资源
- 500 Inter Server Error： 服务器执行请求时发生了错误
- 502 Bad Gateway： 充当网关或代理的服务器从远端服务器接收到了一个无效的请求
- 503 Server Unavailable： 服务器暂时处于超负载或正在进行停机维护，无法处理请求
- 504 Gateway Time-out： 充当网关或代理的服务器，未及时从远端服务器获取请求
7. GET 和 POST 的区别
GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给WEB服务器
7.1 区别：
- post更安全（不会作为url的一部分，不会被缓存、保存在服务器日志、以及浏览器浏览记录中）
- post发送的数据更大（get有url长度限制）
- post能发送更多的数据类型（get只能发送ASCII字符）
- post比get慢
- post用于修改和写入数据，get一般用于搜索排序和筛选之类的操作（淘宝，支付宝的搜索查询都是get提交），目的是资源的获取，读取数据
7.2 若符合下列任一情况，则用POST方法：
- 请求的结果有持续性的副作用，例如，数据库内添加新的数据行
- 若使用GET方法，则表单上收集的数据可能让URL过长
- 要传送的数据不是采用7位的ASCII编码
7.3 若符合下列任一情况，则用GET方法：
- 请求是为了查找资源，HTML表单数据仅用来帮助搜索
- 请求结果无持续性的副作用
- 收集的数据及HTML表单内的输入字段名称的总长不超过1024个字符
8. 输入url发生了什么
-
DNS 域名解析： 域名解析成ip地址
-
发起TCP连接： 三次握手 A）可以吗？ B）可以，确定吗？ A）确定，连接吧！
-
发送HTTP请求，接受HTTP响应：
HTTP请求报文格式：请求行+请求头+空行+消息体 HTTP响应报文格式：状态行+响应头+空行+消息体 -
断开TCP连接： 四次挥手 A）断开吧？ B）好，我稍微检查一下 B）可以了，断开吧，再见 A)好的，再见
-
渲染： 浏览器解析HTML代码，请求js，css等资源，将页面渲染出来
9. 浏览器渲染的过程
- html 解析出 dom 树：dom 树根节点就是 docementElement，对应 html 标签
- css 解析出 cssom 树
- 根据 dom 树 和 cssom 树 构建出渲染树，渲染出页面，三个树的构建没有绝对的先后条件，而是一边加载、一边解析、一边渲染
- 若 js 操作了 dom，根据操作动作的大小，浏览器对页面进行重绘或重排
10. 重绘（repaint）、重排（reflow）
10.1 重绘——屏幕的一部分要重绘
渲染树节点发生改变，但不影响该节点在页面当中的空间位置及大小。譬如某个div标签节点的背景颜色、字体颜色等等发生改变，但是该div标签节点的宽、高、内外边距并不发生变化，此时触发浏览器重绘。
10.2 重排（回流）——屏幕的一部分要重绘
当渲染树节点发生改变，影响了节点的几何属性（如宽、高、内边距、外边距、或是float、position、display：none;等），导致节点位置发生变化，此时触发浏览器重排，需要重新生成渲染树。
- 重排必重绘，重绘不一定重排
- 重排比重绘更费时间，也更影响性能，所以可以尽量避免过多的重排
10.3 如何减少和避免重绘/重排
- 尽量先预定义好 class，多使用 class 来改变样式，如果要 js 动态改变，可以使用 cssText。
- 如果要对一个元素进行复杂的操作，可对其进行”离线处理”，先隐藏它，处理完后一起更新（DocumentFragment）
- 让动画元素脱离文档流，使用 fixed 或 absolute 登，减少重排的 render tree的规模；
- 不使用table布局，因为可能很小的一个改动都会造成整个table的重新布局
- 不把 dom 节点的属性值放在一个循环里当成循环的变量
11. 页面渲染优化
- HTML 文档结构层次尽量少
- 少量首屏样式可以放在便签内
- 样式结构层次尽量简单
- 脚本尽量放后边，避免阻塞页面加载，不涉及 dom 操作的脚本，可设置异步加载
- 减少重排、重绘
- 减少 dom 查找，通过变量缓存 dom 查找结果
- 小图片转base64，减少请求
- 减少cookie的使用，减少请求携带大小
12. 页面性能优化
- 如上，进行页面渲染优化
- 减少首屏渲染时间
- 资源压缩、合并
- 利用浏览器缓存
- 可将静态资源部署到 cdn，加快加载资源速度
- dns 预解析
13. http缓存控制
参考：HTTP缓存机制
14. http 和 https 的区别
https就是安全版的http，http协议的数据都是明文传输，所以一些敏感信息的传输就很不安全，HTTPS就解决了这个问题。
15. http2.0
16. 安全性
16.1 XSS 跨站请求攻击
描述
- 例如在博客中写文章时插入一段
<script> - 脚本中有攻击代码，获取查看者的 cookie，发送到攻击者的服务器
对策
- 进行字符转义，例如 < 为 <；> 为 >；
- 开启 CSP 告诉浏览器限制外部资源加载和执行
16.2 CSRF 跨站请求伪造
描述
- 登录一个购物网站浏览商品，付费接口为 xxx，且这个接口没有验证
- 若你收到一个邮件，邮件中包含一个图片，图片的 src 就是付费接口
- 则你在查看邮件时，就已悄悄付费购买 对策
- 增加验证流程：指纹、密码、短信验证码
- 限制 cookie 跨域，或使用 token 登录
本文参考：
