针对不同的业务场景应使用不同的优化策略。
渲染优化
首页一级页面,采用SSR或Native的渲染方式
- 客户端(浏览器)加载HTML是采用串行的形式去加载(先加载HTML,再加载CSS、JS,加载完JS之后再执行JS、解析JS去Render页面),比较耗时。所以一级页面渲染时可交由服务端,使用Server Render的形式去渲染。
- native渲染,可选择使用React Native、Flutter等方式去渲染。
预渲染
- 如个人中心等页面样式较为固定的,在数据为加载前可采用预渲染的形式,如loading、骨架屏、等预渲染的形式去加载。
弱网优化
客户端离线包
在弱网环境下,如3G或2G网可采用客户端提供离线包的形式。在页面第一次加载完之后,缓存到客户端本地的磁盘里面,在下一次访问时直接从本地磁盘中获取
PWA离线缓存技术
请求页面资源之后,创建Service Worker缓存页面资源,再下一次访问时从Service Worker中获取。
Webview优化
- 打开webview的同时,并行的加载页面数据。
- 也可采用缓存webview的形式。
HTTP性能优化
开源
抓数据源头,提升开发服务器自身的潜力。
利用Nginx反向代理能力实现动静分离,动态页面交给Tomcat、Django、Rails,图片、样式表等静态资源交给 Nginx。
节流
压缩
减少服务器和客户端只见那收发的数据量,在有限的带宽里传输更多的内容。
使用HTTP协议内置的“数据压缩”编码,不仅可以选择标准的gzip,还可以积极尝试使用心的压缩算法br,它有更好的压缩效果。
域名
DNS解析域名会消耗大量的时间,所以应当适当减少域名,限制在2-3个左右,减少解析完整域名所需的时间。
重定向
重定向引发的延迟也很好,除非必要,应当尽可能不适用重定向,或只是用Web 服务器的“内部重定向”
缓存
- 客户端控制的强缓存策略
降低请求成本
- HTTP DNS 由客户端控制,隔一段时间主动请求DNS获取域名IP,不走系统的DNS。
- TCP/TLS 链接复用.(服务端升级到HTTP 2.0 )尽量合并域名。
减少请求次数
- Js、CSS打包到HTML中
- Js控制图片异步加载或懒加载
- 小型图片使用data-uri
减少传输体积
- 尽量使用SVG/gradient 代替图片
- 根据机型网络状况控制图片的清晰度
- 对低清晰度的图片使用锐化来提升体验
- 设计上避免大型背景图