前端性能优化技术选型及策略分析

对比CSR、SSR、NSR、PWA、闪开技术选型和策略分析

名词解析

• CSR：Client side rendering，即客户端渲染，指的是由页面在用户的浏览器环境中通过执行 JS 完成页面结构拼装的渲染处理技术。
• SSR：Server side rendering，即服务端渲染，由服务器完成页面的 html 结构拼接的页面处理技术。
• NSR：Native side rendering，即由客户端（Native 侧）实现页面结构的拼接，进而实现页面渲染的处理技术。
• PWA：Progressive Web Apps，渐进式 Web 应用。
• 闪开/秒开：即用户一点即开，表示极致的 Web 页面加载体验。

CSR

这个好理解，我们构建打包SPA静态页面，放到CDN上。浏览器加载后，页面请求数据，

SSR

PWA+直出+预加载（推荐方案）

https://github.com/CreateJS/PreloadJS

参考资料

http://www.alloyteam.com/2019/10/h5-performance-optimize/
[VasSonic]https://segmentfault.com/a/1190000010711024
[App内网页启动加速实践：静态资源预加载视角]https://zhuanlan.zhihu.com/p/77144845
[预加载]https://juejin.cn/post/6844904048257138695
[HTTP缓存小结]https://imweb.io/topic/5795dcb6fb312541492eda8c
https://zhuanlan.zhihu.com/p/60975107
https://yuweiguocn.github.io/android-h5/
https://mp.weixin.qq.com/s/AqQgDB-0dUp2ScLkqxbLZg