浅谈Web性能优化策略

针对不同的业务场景应使用不同的优化策略。

渲染优化

首页一级页面,采用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 )尽量合并域名。

减少请求次数

  1. Js、CSS打包到HTML中
  2. Js控制图片异步加载或懒加载
  3. 小型图片使用data-uri

减少传输体积

  1. 尽量使用SVG/gradient 代替图片
  2. 根据机型网络状况控制图片的清晰度
  3. 对低清晰度的图片使用锐化来提升体验
  4. 设计上避免大型背景图