2026年前端面试题：网络协议、数据可视化与跨端开发
网络协议篇
HTTP/2与HTTP/3核心差异
HTTP/2采用二进制分帧、多路复用、头部压缩和服务器推送，解决了HTTP/1.1的队头阻塞问题，每个TCP连接支持多个并行请求。HTTP/3基于QUIC协议（UDP实现），实现0-RTT连接建立、改进的拥塞控制和连接迁移，性能表现更优：页面加载时间从HTTP/1.1的2.8s优化至1.2s，丢包恢复速度从300ms提升至50ms。
TCP三次握手与四次挥手
三次握手确保双方具备收发能力并保持同步：客户端发送SYN→服务端回复SYN+ACK→客户端发送ACK确认。四次挥手因TCP连接全双工特性，每个方向关闭需单独步骤：主动方发送FIN→被动方回复ACK→被动方发送FIN→主动方回复ACK。三次握手避免已失效连接请求重复到达，四次挥手确保数据完整传输。
HTTPS加密机制
HTTPS采用对称加密+非对称加密结合：客户端生成随机密码串，用服务端公钥加密后传输，服务端用私钥解密获取随机密码，后续使用对称加密传输数据。握手阶段进行证书验证，防止中间人攻击，确保数据传输安全。
数据可视化篇
Canvas与SVG对比
Canvas逐像素渲染，依赖分辨率，不支持事件处理器，适合图像密集型游戏和动态高频更新场景。SVG基于XML描述图形，不依赖分辨率，支持事件处理器和DOM操作，适合矢量图和复杂交互场景，但大量DOM操作会降低性能。
主流可视化库选型
D3.js功能强大但学习曲线陡峭，适合高度自定义需求；ECharts图表丰富、易上手，国内使用广泛；AntV接近声明式写法，比ECharts更灵活；Chart.js轻量级易用但图表类型少；Highcharts性能好但商用收费。
大数据量优化策略
针对大规模数据渲染，可采用分页加载或懒加载、采样降噪（如1万条数据取关键点）、Web Workers并行计算、虚拟滚动等技术。Canvas适合动态高频更新，SVG适合静态或中等复杂度图表，WebGL用于3D可视化场景。
跨端开发篇
React Native与Flutter对比
React Native通过JavaScript编写逻辑，原生组件渲染UI，学习成本低、热更新能力强，但性能受桥接通信限制。Flutter采用Dart语言和自绘引擎，性能接近原生、多端一致性好，但包体积较大、需学习新语言。RN适合已有Web技术栈团队快速实现跨端，Flutter适合追求极致性能和UI一致性的复杂应用。
跨端开发技术分类
Web容器型（Cordova/Ionic）开发成本低但性能差；原生渲染型（React Native/Weex）性能接近原生；自绘UI型（Flutter/Qt）性能最优但包体积大。2023年统计显示，React Native和Flutter合计占据跨端开发市场78%份额。
小程序与H5差异
小程序运行在特定平台容器内，受平台限制但体验接近原生；H5基于浏览器运行，跨平台兼容性好但性能相对较差。小程序适合需要快速迭代、依赖平台生态的应用，H5适合需要跨平台部署的场景。
