SF讲堂： 前端工程师应该掌握的网络知识

SegmentFault

相关资源

• 讲堂地址
• 讲稿地址
• 精彩问答

个人感悟

• 标题说是前端工程师应该掌握的网络知识，在我看来作为一个程序猿，无论是研发、测试还是运维都应该掌握这些网络知识
• 网络属于计算机技术生态圈中不可或缺的一方面，属于一个每个计算机技术人员都应该了解的常识
• 我本人作为一个后端研发，更加觉得后端开发的小伙伴们应该多了解学习网络知识，并且应该深入了解，毕竟也就是这几年前端网络概念普及了，而在后端中，网络一直是大家不可避免的技术，我和很多人一样，一直以来对网络似懂非懂，知道几个状态码，知道个皮毛而已，目前也在摸索学习中，与大家共勉之
• 在这里分享几本书，也是我自己购买了并且看了才发出来的：
  
  • 《HTTP权威指南》
  • 《Wireshark网络分析就这么简单》:
  • 《Wireshark网络分析的艺术》
  • 《图解TCP/IP》

讲堂总结

网络基础

• 网络访问过程
  
  • DNS解析
  • TCP三次握手建立连接
  • HTTP Request: 半个RTT
  • HTTP Response: RTT不确定，存在前端浏览器渲染等不确定原因
• RTT: Round-trip-time，一来一回，表示一个回路
• DNS解析过程：client -> First Level DNS Server -> (if not in db or no cache)... -> Root DNS Server -> Return IP to Client -> Target IP address
• TCP三次握手： SYN x=rand() -> SYN ACK x+1 y=rand() -> ACK y+1 x+1
• TCP慢启动
  
  • 初始化窗口数: 10
  • 单个RTT内传输数据上限： 14KB
• 链路复用： Keep Alive, 避免过多TCP三次握手协议耗时
• 关于延时：延时和带宽宏观上看是成反比影响的，但是并不完全成反比，因为带宽存在网络通信中的每一个环节，而最终带宽的值只能被最小的那个环节所决定
• 移动网络过程： 手机 -> 无线网络 -> 核心网络基站 -> 互联网（网关，DNS） -> 网站
• 不同网络的RTT不一样，GPRS -> 2G -> 3G -> 4G -> WIFI，RTT耗时越来越短
• CDN: Content Delivery Network, 简单来说就是利用最靠近用户的服务器发送资源给用户，速度快，可靠，性能高，可扩展性高

工作中的网络知识

• 调试方法和工具
  
  • Devtools Timeline
  • Fidder
  • Android通过usb连接PC，chrome调试
  • iOS连接mac, Safari开发菜单
• 速度性能测试
  
  • Navigation Timing
  • Resource Timing
• 优化策略
  
  • 减少网络时间
    
    • DNS预解析
    • 域名收敛：反向代理（需要深入研究）
    • 资源内联：将JS或者CSS等资源内联到HTML中，可以共用一个RTT时间，并减少请求数
    • 资源加载优化：按需加载、动态加载和预加载，比如多tab，点击看大图等
    • 服务端渲染：（需要深入研究）
    • 懒加载：插入dom数进行可视区计算，加载可视区内的图片
  • 高效利用缓存
    
    • 网络缓存
    • 本地缓存
    • 打包工具
• 疑难杂症
  
  • DNS劫持
  • 一些相关的首部（again）
• HTTPS && HTTP2（again）
  
  • HTTPS
    
    • TLS握手
    • 证书链
  • HTTP2： 基于HTTPS开发
    
    • 二进制分帧层
    • 首部压缩
    • 多路复用
    • 服务端推送
• 网络性能优化
  
  • TCP优化
  • HTTP优化
  • HTTP2优化
  • 关键渲染路径