知识补漏（4）网络基础知识

网络基础知识回顾复习

OSI,TCP/IP,五层协议的体系结构以及各层协议：

• OSI分层：物理层，数据链路层，网络层，传输层，会话层，表示层，应用层。
• TCP/IP：网络接口层，网际层，运输层，应用层。
• 五层协议：物理层，数据链路层，网络层，运输层，应用层。

每一层的作用：

1. 物理层：通过媒介传输比特，确定机械及电气规范。
2. 数据链路层：讲比特组装成帧和点到点的传递
3. 网络层：负责数据包从源到宿的传递和网际互联
4. 传输层：提供端到端的可靠报文传递和错误恢复
5. 会话层：建立，管理和终止会话
6. 表示层：对数据进行翻译，加密和压制。
7. 应用层：允许访问OSI环境手段。

三次握手和四次挥手全过程：
三次握手：
① 客户端发送包到服务器等待确认，
② 服务器收到包进行确认，同时发送一个包，
③ 客户端收到包，向服务器发送确认包，发送完毕完成三次握手。
四次挥手：
① 主动关闭方发送一个包请求关闭，
② 被动关闭方收到包，发送一个ACK给主动关闭方，确认序号为收到序号+1
③ 被动关闭方发送一个包确认关闭
④ 主动关闭方收到包，发送一个ACK给被动关闭方，确认序号为收到序号+1
完成四次挥手。

一次完整的HTTP事务流程
① 域名解析
②发起TCP的三次握手
③ 建立TCP链接后发起http请求
④ 服务器响应http请求，浏览器得到HTML代码
⑤ 浏览器解析HTML代码，并请求HTML代码中的资源。
⑥ 浏览器对页面渲染呈现给用户
⑦链接结束

为什么要先引入css文件再引入js文件？
① js代码的下载是阻塞下载，不可以和其他代码并行下载和解析；css的加载不会阻塞DOM的解析。
② 页面加载时的顺序是从上到下从左到右的顺序执行的，如果将js放在会立即执行，会造成页面阻塞，使网页长时间失去响应。
③ 页面需要等到head中的js和css加载完成后才开始绘制，当js放在body最后时，不需要等待，可以避免资源阻塞，同时使静态页面迅速显示。
④ 部分js执行依赖于前面的样式。
⑤ js一般是处理功能，所以不需要提前加载，先给用户观感，再给用户上手体验。
总结下来就是三点：加载阻塞；依赖样式；先让用户看，再让用户操作。

提高加载速度的方法：
① 使用CDN （CDN会根据你的网络状况，替你挑选最近的一个具有缓存内容的节点为你提供资源，减少加载时间）
② 对css进行压缩
③ 合理的使用缓存
④ 减少http请求数，将多个css文件合并，或者干脆直接写成内联样式（内联样式的缺点是不能缓存）

如果不同源，共有三种行为受限制：
① Cookie，LocalStorage和IndexDB无法读取
② DOM无法获得
③ AJAX请求不能发送

跨域（受同源策略的限制，不是同源的脚本不能操作其他源下的对象。想要操作另一个源下的对象，就要跨域。）
实现方式：
降域 jsonp cors localstorage

前端优化方案：
① 减少请求数量（合并脚本和样式表，CSS Sprites，划分主域）
② 降低请求带宽（使用GZip，精简JavaScript，移除重复脚本，图像优化，尽可能减少DOM节点数）
③ 缓存利用(使用CDN)
④ 页面结构（将样式表放在头部，将脚本放在底部，尽早刷新文档的输出）
⑤ 代码校验 （避免CSS表达式，避免重定向）
移动端优化方案： 在前端优化方案的基础上保持单个内容小于25k。