一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。
引言
作为一个合格的前端工程师，浏览器相关的工作原理是我们进行性能优化的基石。本文对浏览器中一些重要问题进行整理汇总。本文章节结构以从易到难进行组织，建议读者按章节顺序进行阅读。希望读者读完本文，有一定的启发思考，对缺漏之处进行弥补，对浏览器的工作原理有更好的掌握。
笔者也会站在面试者的角度对下述问题进行回答，并加以适当的分析。
1.谈谈Http和Https的区别
HTTP是不安全的，而 HTTPS 是安全的HTTP标准端口是80 ，而 HTTPS 的标准端口是443HTTP无法加密，而HTTPS 对传输的数据进行SSL加密HTTP无需证书，而HTTPS 需要CA机构颁发的SSL证书
2.谈谈你对TCP三次握手的理解
- 第一次握手：客服端发送一个请求连接，服务器端只能确认自己可以接受客服端发送的报文段
- 第二次握手： 服务端向客服端发送一个链接，确认客服端收到自己发送的报文段
- 第三次握手： 服务器端确认客服端收到了自己发送的报文段
3.谈谈cookie，sessionStorage，localStorage的区别
- 首先cookie，sessionStorage和localStorage都是存放在客户端的
- 大小限制区别：cookie数据不超过4kb，sessionStorage和localStoragelocalStorage最大支持5MB的数据
- 数据有效期不同：
- cookie在服务器设置的有效期内有效，不管窗口和浏览器是否关闭
- sessionStorage仅在当前浏览器窗口关闭前有效，关闭即销毁（临时存储）
- localStorage始终有效，需要手动销毁才会失效 localStorage：常用于长期登录，适合长期保存在本地的数据。sessionStorage ：敏感账号一次性登录。cookies与服务器交互。
4.GET 和 POST 有什么区别？
-
从缓存角度来讲，GET 请求会被浏览器主动缓存下来，留下历史记录，而 POST 默认不会。
-
从参数角度来讲，GET 一般放在 URL 中，因此不安全，POST 放在请求体中，因此会更加安全。
-
从TCP角度来讲，GET 请求会把请求报文一次性发出去，而 POST 会分为两个 TCP 数据包，首先发 header 部分，如果服务器响应 100(continue)， 然后发 body 部分。
5.常见 HTTP 状态码
| 状态码 | 描述 |
|---|---|
| 200 | 请求成功 |
| 301 | 永久重定向 |
| 302 | 临时重定向 |
| 304 | 请求资源未修改，可以使用缓存的资源，不用在服务器取 |
| 400 | 请求有语法错误 |
| 401 | 没有权限访问 |
| 404 | 请求资源不存在 |
| 500 | 服务器内部错误，无法完成请求 |
| 503 | 请求未完成，因服务器过载、宕机或维护等 |
6.你能说说缓存么
缓存分为强缓存和协商缓存。强缓存不过服务器，协商缓存需要过服务器，协商缓存返回的状态码是304。两类缓存机制可以同时存在，强缓存的优先级高于协商缓存。当执行强缓存时，如若缓存命中，则直接使用缓存数据库中的数据，不再进行缓存协商。
强缓存
首先是检查强缓存，这个阶段不需要发送HTTP请求。
强缓存主要有Expires和Cache-Control两个属性
- Expires ：Exprires的值为服务端返回的数据到期时间。当再次请求时的请求时间小于返回的此时间，则直接使用缓存数据，但是存在一定弊端因为使用的是绝对时间，如果服务端的时间与客户端不一致，那么会导致命中缓存产生偏差，因此很少使用。
- Cache-Control ：最常用的属性是max-age，可以设置具体的缓存时间，强缓存常用此属性。
协商缓存
协商缓存需要进行对比判断是否可以使用缓存。浏览器第一次请求数据时，服务器会将缓存标识与数据一起响应给客户端，客户端将它们备份至缓存中。再次请求时，客户端会将缓存中的标识发送给服务器，服务器根据此标识判断。若未失效，返回304状态码，浏览器拿到此状态码就可以直接使用缓存数据了。
协商缓存主要有Last-Modified和Etag两个属性
Last-Modified：服务器在响应请求时，会告诉浏览器资源的最后修改时间。
浏览器接收到后，如果再次请求，会在请求头中携带If-Modified-Since字段，这个字段的值也就是服务器传来的最后修改时间，服务器拿到请求头中的If-Modified-Since字段后，其实会和这个服务器中该资源的最后修改时间对比。但是存在一定弊端因为是按照秒为单位的，如果是毫秒性操作，可能会存在一定误差，因此很少使用。
Etag：服务器响应请求时，通过此字段告诉浏览器当前资源在服务器生成的唯一标识。
浏览器接收到后，如果再次请求，会在请求头中携带If-None-Match字段，这个字段的值也就是服务器生成的唯一标识，服务器拿到请求头中的If-None-Match字段后，其实会和这个服务器中的唯一标识进行对比。协商缓存常用此属性。
7.常见的web安全及防护原理
sql注入
是将sql代码伪装到输入参数中，传递到服务器解析并执行的一种攻击手法。
防范：
1.对用户输入进行校验
2.不采用动态拼接sql
XSS（跨站脚本攻击）
往web页面插入恶意的html标签或者js代码。
防范：
1.尽量采用post而不使用get提交表单
2.避免cookie中泄漏用户的隐式
CSRF(跨站请求伪装）
通过伪装来自受信任用户的请求举例子。
防范：
在客服端页面增加伪随机数，通过验证码
推荐
如果有想要继续学习CSS篇的读者，可以观看笔者的另一篇文章【面试宝典】高频前端面试题之CSS篇 - 掘金 (juejin.cn)
如果有想要继续学习Vue原理篇的读者，可以观看笔者的另一篇文章【面试宝典】高频前端面试题之Vue原理篇 - 掘金 (juejin.cn)
如果有想要继续学习JS原理篇的读者，可以观看笔者的另一篇文章【面试宝典】高频前端面试题之JavaScript原理篇 - 掘金 (juejin.cn)
如果有想要继续学习手写JS常用方法的读者，可以观看笔者的另一篇文章【面试宝典】高频前端面试题之手写常用JS方法 - 掘金 (juejin.cn)
结语
本文为笔者个人学习笔记，如有谬误，还请告知，万分感谢！如果本文对你有所帮助，还请点个关注点个赞~，您的支持是笔者不断更新的动力。
