淘宝本地生活 Mini Head 实践

淘宝公用头脚本比较大，而head中的脚本会阻塞页面渲染，通过mini head来有效解决head过重问题

Transcript

1. 本地生活 Mini 头实践 —— 元晃
2. OVERVIEW OVERVIEW head 里的 js 头大的问题 解决问题 部署 && 应用
3. head 里的 js head • 125KB+ • 45KB+ gzip
4. 头大的问题 头大的问题 • 阻塞 ——head 中的脚本会阻塞页面渲染！
5. 头大的问题 头大的问题 <!doctype html> <html> <head> <title>js 阻塞测试 </title> </head> <body> 主体 </body> </html> <script src="sleep.php?delay=20"></script> 20s
6. 解决问题 解决问题 • 让 head 轻一点 —— 把 head 中的脚本往页面底部挪
7. 解决问题 解决问题 • 但是……
8. 解决问题 HOW? 解决问题 • 作假
9. 解决问题 • 单击此处编辑母版文本样式 – 第二级 – 第三级 • 第四级 – 第五级
10. 解决问题 存储匿名函数
11. 解决问题 • 单击此处编辑母版文本样式 – 第二级 – 第三级 • 第四级 – 第五级 取出匿名函数并执行
12. • 一个轻量头解决方案 • 只有 50 行左右 • 改造成本低
13. 量化 • HttpWatch • 注意 -HttpWatch 的 clear cache 功能可能有问 题，请用 IE 自带的工具条设置“总是从服务器 更新” Render Start DOM Load Page Load
14. 部署 • 两部分 -mini_core.js 20 行左右，直接写在 head 中 -mini_exe.js 30 行左右 • Source and test code • 本地生活
15. The End