单页面Web性能优化实践.pptx

单页面Web性能优化实践 技术创新，变革未来 H5性能优化的意义 用户感受 —秒法则 前后端分离 前后端分离 优点： 减轻服务端压力 共用—套后端程序，适配多端 缺点： 首屏加载较慢 SEO 服务端渲染 服务端渲染 优点： 加快首屏渲染时间 解决SEO问题 缺点： 前后端耦合性较高 对服务端压力较大 前后同构 Client Server (Node) Vue 前后端复用—套代码 良好的用户体验 加快首屏的渲染 解决SEO问题 Vue SSR 流程图 Vue SSR 代码结构 src 尸—— api 尸—— store 尸—— router 尸—— components 尸—— Foo.vue 尸—— Bar.vue I—— Baz.vue 尸 —— views 尸—— App.vue 尸—— app.js 尸—— entry-client.js I—— entry-server.js # 通用入口文件 # 仅运行于浏览器 # 仅运行于服务器 Vue SSR 的性能瓶颈 跟传统的模板引擎存在性能差异 首屏加载文件过大 渲染耗时的对比 string-based 基于字符串的拼接 virtual-dom-based 基于虚拟DOM对象 相差 4.24 倍 优化策略 传统优化方式 滚屏加载 延迟加载 请求数优化 图片压缩、base64 Iconfont CDN加速 Gzip压缩 资源加载 随着组件的增加，JS文件越来越大 按需分块加载 只加载页面所需的代码。提升页面的渲染速度 异步组件 代码分割 按需分块加载 Webpack 预加载 <link rel=“” href=“1.js” as=“script”> preload prefetch 预加载当前页所需的资源 预加载下—页所需的资源 预加载 预加载 优点： 简单好用 能有效提升性能 潜藏问题： 不能确保加载完毕 不能确保缓存的持久 缓存 serviceWorker 预缓存 在serviceWorker 进程中运行 缓存必要的前端资源和请求 大幅度减少CDN的压力 资源是持久性存储 使用webpack插件 npm install --save-dev sw-precache-webpack-plugin serviceWorker 的使用 serviceWorker 的存储空间 和indexDB、LocalStorage共用，存储空间约有 50M serviceWorker 的缓存策略 仅缓存必要的js、css、iconfont 对不需要即时更新的接口数据进行缓存 serviceWorker 的兼容性 android 53 chrome、firefox uc、qq、百度 serviceWorker 的兼容性 未来随着所有浏览器对serviceWorker的支持 服务端API数据的缓存 组件的缓存 优化结果 首页优化前 首页优化后 总结 渲染方案的对比 优化策略 优化结果