Web前端性能极致优化与实践-littenli 2.ppt

* 4）自动化 HAR文件 一个用来储存HTTP请求/响应信息的通用文件格式，基于JSON * 4）自动化 如何获取har file？ chrome 插件 phantomJs * 4）自动化 har file转换成结果 输入：har file 输出：测试结果 PageSpeed or Yslow * 4）自动化 因此我们得到整个流程 url，业务，负责人数据库 phantomJs 根据url生成har文件 将har文件输入pagespeed，输出结果 整理结果，输出展示页面 * 4）自动化 * 4）自动化 * 4）自动化 * 4）自动化 注意事项 cookie缺失 参数缺失 /qlevel/index.html#gc=267010411 * 4）自动化 end thx * 2）深入本地缓存 * 2）深入本地缓存 思考一个问题 为何不拆分成“键-值”， 再保存在localStorage里？ * 1）再议减少HTTP请求 举个例子4 localStorage测试 * 1）再议减少HTTP请求 localStorage存储路径 * 2）深入本地缓存 内存 VS 磁盘 少数据 VS 大数据 一次 VS 多次 * 2）深入本地缓存 内存 磁盘 少数据 ≈ 大数据 一次 多次 * 2）深入本地缓存 结论 a 使用尽可能少的键值 b 确保每次访问读取数据最大化 * 2）深入本地缓存 firefox的方案 加载页面的同时读取localStorage数据到内存 页面加载时间？ * 3）第三方 重要程度层级： 安全 稳定 性能 性能比较工具： P3PC * 3）第三方 * 3）第三方 页面平均加载时间: 4.9s 页面完成: 平均 44 个资源，它们来自 7 个域名, 大小大概是 320KB A lot of whats loaded is third party content 《Dont Let Third Parties Slow You Down》 ——verlocity google * 3）第三方 * 3）第三方 单一故障点： script节点对应的脚本下载且执行结束前，浏览器不会发起任何新的HTTP请求， 也不会对该节点以下的任何内容进行渲染。 * 3）第三方 异步引入 var script = document.createElement(script); script.type = text/javascript; script.async = true; script.src = src; // 插入script元素 * 3）第三方 同步引入 var protocol = (https: == tocol) ? https:// : http://; document.write(script src=protocol + /extern.js charset=utf-8\/script); * 3）第三方 document.write HTML解析过程回溯 Tokenizer Tree Construct Script DOM Tree * 3）第三方 避免单点故障的document.write iframe + document.write 但另外一个问题是… * 3）第三方 移动iframe元素在DOM中的位置 影响统计数值 影响请求数，渲染 浏览器 结果 IE6-8 不重新加载 IE9 重新加载 Firefox 重新加载 Chrome 重新加载 Opera 重新加载 * 3）第三方 所以我们能得出结论？ 别急… * 3）第三方 现在我们有三种方案 1、document.write() 同步 2、scriptDom() 异步 3、iframeLoad() 异步 * 3）第三方 性能比较 —— taobao 2012 * 3）第三方 引入脚本是为了添加第三方内容； 那么内容需要注意什么？ 渲染 * 3）第三方 第三方内容 download(or cache) Tokenization Tree Construction Rendering 减少首屏Dom节点 * 3）第三方 怎么减少首屏节点 a 用js字符串来存放html代码 script var data = psome data/p...; /script 需要对单引号或双引号做转义; 代码必须用换行符连接（改变原有开发习惯） 如果html片段里面含有script，再含有单行注释？