淘宝本地生活 Mini Head 实践

本地生活 Mini 头实践 —— 元晃

OVERVIEW OVERVIEW head 里的 js 头大的问题 解决问题 部署 && 应用

head 里的 js head • 125KB+ • 45KB+ gzip

头大的问题头大的问题 • 阻塞 ——head 中的脚本会阻塞页面渲染！

头大的问题头大的问题 <!doctype html> <html> <head> <title>js 阻塞测试 </title> </head>
<body> 主体 </body> </html> <script src="sleep.php?delay=20"></script> 20s

解决问题解决问题 • 让 head 轻一点 —— 把 head 中的脚本往页面底部挪

解决问题解决问题 • 但是……

解决问题 HOW? 解决问题 • 作假

解决问题 • 单击此处编辑母版文本样式 – 第二级 – 第三级 • 第四级 –
第五级

解决问题存储匿名函数

解决问题 • 单击此处编辑母版文本样式 – 第二级 – 第三级 • 第四级 –
第五级取出匿名函数并执行

• 一个轻量头解决方案 • 只有 50 行左右 • 改造成本低

量化 • HttpWatch • 注意 -HttpWatch 的 clear cache 功能可能有问
题，请用 IE 自带的工具条设置“总是从服务器更新” Render Start DOM Load Page Load

部署 • 两部分 -mini_core.js 20 行左右，直接写在 head 中 -mini_exe.js 30
行左右 • Source and test code • 本地生活

The End

d2forum