前端性能优化：基础优化笔记

Redirect 重定向 App Cache 缓存 DNS dns解析 TCP 寻址 Request Response

readyStart = timing.fetchStart - timing.navigationStart; // 准备新页面耗时 redirectTime = timing.redirectEnd - timing.redirectStart; // 重定向耗时 appcacheTime = timing.domainLookupStart - timing.fetchStart; // Appcache耗时 unloadEventTime = timing.unloadEventEnd - timing.unloadEventStart; // unload前 文档耗时 lookupDomainTime = timing.domainLookupEnd - timing.domainLookupStart; // DNS查询耗时 connectTime = timing.connectEnd - timing.connectStart; // TCP 连接耗时 requestTime = timing.responseEnd - timing.requestStart; // request请求耗时 initDomTreeTime = timing.domInteractive - timing.responseEnd; // 请求完毕至加载DOM domReadyTime = timing.domComplete - timing.domInteractive; // 解析DOM树耗时 loadTime = timing.loadEventEnd - timing.navigationStart; // 从开始页面至加载事件总耗时

---

前端页面渲染流程

HTML页面请求

HTML文档下载

• html文档本身
• link css样式
• javascript脚本
• 媒体资源 img video audio等

HTML文档解析

• dom树生成 所有结构
• render树生成（可见） 显示级别的
• 逐级解析dom树

解析DOM树 -> link - css 尽量减少reflow，从而避免repaint -> js绘制DOM节点会阻塞其他标签解析，下载等（若alert、document.write） -> media 图片、视频可以先使用分辨率较低的图片

浏览器JS引擎处理

V8(C++)

V8是Google发布的开源JavaScript引擎，采用C++编写，在Google的Chrome浏览器中被使用。 V8引擎可以独立运行，也可以用来嵌入到C++应用程序中执行。

SpiderMonkey -> 是Mozillia项目的一部分，是一个用C语言实现的JavaScript引擎脚本

rhino(Java) -> Rhino是用纯Java写成的JavaScript的开放源码实现，它最常被用于嵌入Java应用程序，以便为终端用户提供脚本的能力。

---

技术优化出发点

复用（维护性、开发成本）

前端复用

文件复用 html css js 媒体文件 模块复用 通过js维护整个模块（包括动态以入的css/js） iframe方法引入整个页面

后端复用

通过接口复用（对外） UI模块复用（例如php, jsp中的include） 通用工具API复用，如：上传服务，DAO等（对内）

加载方式（提升用户体验）

同步加载 加载完毕才展示给用户 较少的tcp连接就能完成页面加载

分级加载 同步加载和异步加载相结合 先给用户加载重要信息，如logo/核心功能，后面加载不重要的

按需加载 用户不触发该功能我们就不加载 用户不触发该功能，但是带宽闲置，或者页面的主要元素都加载完