小代同学

iframe 优势 技术成熟 支持页面嵌入 天然支持运行沙箱隔离、独立运行 劣势 页面之间可以是不同的域名 需要对应的设计一套应用通讯机制，如：监听、传参格式等内容 应用加载、渲染、缓存等体系的实现

出现这个问题的背景 double tap to zoom 第一代苹果手机发布时，为了展示自己的手机有多牛，去访问了纽约时报的网页，从手机上就能访问电脑上才能访问的网页的效果，双击一下屏幕就放大了。第一

路由懒加载 使用与 SPA（不适用 MPA） 路由拆分，优先保证首页加载 服务端渲染SSR 传统的前后端分离（SPA）渲染页面的过程复杂 SSR 渲染页面过程简单，所以性能好 如果是纯 H5 页面，S

使用 WebSocket 无跨域限制 需要服务端支持，成本高 通过 localStorage 同域的 A 和 B 两个页面 A 页面设置 localStorage B 页面可以监听到 localSto

重绘 repaint 元素外观改变，如：颜色、背景色 但元素的尺寸、定位不变，不会影响其他元素的位置 重排 reflow 重新计算尺寸和布局，可能会影响其他元素的位置 如：元素高度增加，可能会使相邻元

步骤 网络请求 DNS 查询（得到 IP），建立 TCP 连接（三次握手） 浏览器发起 HTTP 请求 收到请求响应，得到 HTML 源代码 解析 HTML 过程中，遇到静态资源还会继续发起网络请求

WebSocket 支持端对端通讯 可以由 client 发起，也可以由 server 发起 用于：消息通知，直播间讨论，聊天室，协同编辑等 实际项目中推荐使用 socket.io，API 更简洁 W

HTTPS 加密传输 HTTP 明文传输 HTTPS 加密传输 HTTP + TLS/SSL 加密 对称加密 一套秘钥用来加密和解密 非对称加密 公钥用来加密，私钥用来解密 https 加密同时使用

网络协议 HTTP 协议在应用层 TCP UDP 协议在传输层 严格的说，应该拿 TCP 和 UDP 进行比较 TCP 协议 有连接（三次握手） 有断开（四次挥手） 稳定传输 UDP 协议 无连接，无