Linear快如闪电秘诀揭秘:从数据库到动画,全方位提升性能!
本文涵盖内容包括浏览器中的数据库、让首次加载感觉即时完成、同步引擎、为速度而设计、动画效果等方面。浏览器中的数据库多数Web应用遵循传统循环模式会出现加载指示器等问题。Linear颠覆传统其用户界面读取的数据库位于浏览器的IndexedDB中数据变更先本地应用再异步推送。构建快速Web应用要消除网络请求Linear做到了。通过示例展示Linear请求操作的简单性其联合创始人托马斯表示一开始就明确了同步引擎的重要性。大多数人可借助库通过乐观更新提升应用速度乐观请求能让应用如原生应用般快速。还介绍了Linear的技术栈其坚持使用客户端渲染也能实现即时加载。让首次加载感觉即时完成首次加载体验很关键客户端应用初始加载变慢有诸多原因。Linear四次重写构建管道减少JavaScript和CSS数量带来代码传输量减少、压缩后体积缩小等改进。即便优化后仍传输约21MB压缩后的JavaScript但代码按需获取。将JavaScript分割成小代码块后可预加载Linear让浏览器并行发送请求冷加载时间线变为并行批量加载。服务工作者缓存路由级代码块让应用可离线使用。Linear每个包独立缓存细化供应商缓存。其在字体加载、内联应用外壳、先渲染后认证等方面的设置也确保了快速加载。同步引擎Linear速度快源于将服务器作为同步目标其同步引擎有三个支柱数据已存在从IndexedDB加载到内存对象池数据分块使引擎可扩展数据变更无需等待网络本地变更后再与服务器同步一次变更只更新一个单元格避免级联更新。三个支柱协同工作使应用保持快速。为速度而设计速度也是设计问题Linear将键盘作为主要工具每个常见操作有快捷键命令面板一键打开这种设计和工程结合让应用使用快速。动画效果糟糕动画效果会影响前面的努力。Linear只对少数属性动画处理如合成属性等知道何时停止动画且动画持续时间短而简洁进入和退出采用不对称时间设置。