《高性能网站建设进阶指南》
总体观点
随着Web 2.0应用日益复杂与富客户端单页应用的爆发，前端性能挑战从单纯的‘静态资产网络下载’全面蔓延至‘浏览器内部运行时（Runtime）计算、DOM操作与渲染管线’。《高性能网站建设进阶指南》是索德斯召集Google、Yahoo、Facebook等顶尖前端架构师共同攻克深水区难题的集大成之作，将前端性能工程推向了更底层的浏览器引擎解构层面。
无阻塞JavaScript加载是解锁现代Web极致性能的关键命门。传统的`<script src='...'>`标签在下载与执行时会无情阻断浏览器的后续HTML解析与并行下载管线。书中系统推演并评测了六种异步加载脚本的高阶模式（XHR Eval、XHR注入、Script DOM Element、Script Defer/Async与iframe注入），确保第三方跟踪脚本、评论插件与富富媒体组件绝不拖累核心界面的初次渲染速度。
渲染性能（Rendering Performance）与DOM重排重绘（Reflow & Repaint）是运行时性能的隐形杀手。每一个对DOM树结构、盒模型尺寸或布局位置的读取与修改，都可能迫使浏览器昂贵地重新遍历整个渲染树。通过将DOM操作脱离文档流批量处理、使用高效事件委托、精简iframe使用并利用图片无损压缩与移动端低延迟适配，前端工程师得以在任何复杂富交互界面中，维持60fps的如丝般顺滑体验。
核心观点
-
1. 动态脚本元素（Script DOM Element）异步加载
通过JavaScript动态创建`<script>`节点并挂载到DOM中：`var s = document.createElement('script'); s.src = '...'; head.appendChild(s);`。该技术能够完全绕过浏览器的下载阻塞限制，实现跨域脚本的并行静默下载，不阻碍页面任何UI渲染。
Google Analytics与各大社交分享按钮全面采用自执行动态脚本注入代码，确保即使第三方统计服务器响应迟缓，用户核心页面也能在数百毫秒内瞬间呈现。 -
2. DOM重排（Reflow）与重绘的批量收敛
访问诸如`offsetTop`、`scrollTop`或修改元素宽高会瞬间打断浏览器的批量渲染队列，强制触发即时重排（Forced Synchronous Layout）。将多次样式修改合并为一个CSS类名，或使用`DocumentFragment`离线节点拼装再一次性插入文档，能将十几次重排收敛为一次。
为一个包含千条数据的表格动态追加行：如果每次循环直接`tbody.appendChild(tr)`，页面会发生一千次重排导致明显卡顿；改用文档碎片在内存中拼装后单次挂载，执行耗时从1.2秒骤降至20毫秒。 -
3. iframe是开销最大的DOM元素
iframe虽然能提供沙箱隔离，但其代价极度昂贵：即使是一个完全空白的iframe，其内存与CPU初始化开销也是普通div的数十倍，更致命的是，iframe中的页面加载会直接阻塞父页面的onload事件触发，拉长用户感知的转菊花等待时间。
Facebook工程师通过实测展示：将一个原本嵌入了5个独立广告与互动iframe的页面，改造为动态延迟按需创建iframe后，主站的整体onload事件触发时间提前了整整3秒。 -
4. 利用Web Workers将密集计算剥离主线程
浏览器JavaScript引擎是单线程运行的，主线程同时负责UI渲染与脚本执行。耗时的复杂排序、加解密或音视频编解码计算会霸占主线程，导致用户点击按钮毫无反应界面假死。Web Workers将复杂计算移入后台独立线程，主线程维持60fps丝滑交互。
在Web端处理数十万行复杂Excel数据报表计算：使用Worker在后台子线程完成数据透视表数学运算，通过`postMessage`传递最终结果，用户在计算过程中滑动页面依然丝毫不卡顿。 -
5. 无损图片压缩与剥离冗余元数据（EXIF）
数码相机与修图软件生成的JPEG与PNG图片中，包含了大量数码相机型号、拍摄GPS坐标、色彩配置文件与缩略图等沉重的元数据（EXIF）。利用pngcrush、jpegtran等工具可以在毫厘不损图像画质的前提下，将文件体积缩减10%至30%。
某相册网站在部署自动化图片流水线后，利用jpegcrush对全站数十亿张缩略图统一清除EXIF元数据并进行哈夫曼优化表重写，单月为企业节省了数万TB昂贵的跨国CDN出网流量费用。
全书思维导图 · 知识脉络树
全书结构
-
第1章 理解Ajax性能与多域并发限制
检视现代Ajax富交互应用的性能瓶颈，分析浏览器针对同一域名的最大并发连接数限制（由IE6的2个到现代浏览器的6个），探讨域名发散（Domain Sharding）架构。
演示如何将静态图片分散部署在`img1.foo.com`至`img4.foo.com`四个独立二级域名下，打破单域名并发下载天花板、实现16张大图同时高速并行拉取。 -
第2-4章 无阻塞脚本加载的六大模式
详尽对比XHR Eval、XHR注入、Script In Iframe、Script DOM Element与defer/async原生属性，给出加载顺序依赖管理的实战加载器方案。
手写轻量级动态异步依赖加载器（如早期LABjs架构原型），演示如何保证三个并行无阻塞下载的模块脚本严格按照依赖先后顺序串行执行。 -
第5-7章 整合异步脚本与内联代码
攻克异步脚本与页面内联原生代码的时序竞态问题，传授如何在脚本异步加载完成前对用户点击事件进行临时监听缓存并在脚本就绪后无缝重放。
解构现代前端SDK经典的‘队列垫片（Stubs Queue）’设计：`_gaq.push(['trackEvent', ...])`在分析脚本未下载完成时将调用存入数组，脚本加载完毕后自动清空队列执行。 -
第8-10章 编写高效的JavaScript与DOM精细控制
深入探讨作用域链查找耗时、事件委托（Event Delegation）、DOM重排重绘优化技巧，以及利用Web Workers解锁后台多线程算力。
对比为一个包含上万个列表项的ul每个li绑定独立click事件，与仅在父级ul绑定单一事件委托监听的内存消耗差距（内存节省达99%）。 -
第11-14章 无损图像压缩与移动网络进阶
总结全书，系统拆解JPEG/PNG底层文件格式与无损压缩算法，分析移动蜂窝网络（3G/EDGE）无线电资源控制（RRC）的高延迟特性与适配策略。
剖析移动网络下手机无线电芯片从空闲态到激活态所需的几百毫秒预热时延，论证在移动端集中批量突发发送请求以避免频繁唤醒无线电的省电降耗法则。