前端性能优化
目录
第三章:渲染优化
3.1 浏览器渲染——你是否清楚浏览器的渲染过程
![image-20210910174430573](https://i-blog.csdnimg.cn/blog_migrate/14029046edcc82296f9bf5c65241d9de.png)
3.2 页面渲染——主流的页面渲染技术架构和方案有哪些?
![image-20210910174825656](https://i-blog.csdnimg.cn/blog_migrate/4f2bdd8d444c68c17dc3b5b637f1515d.png)
3.3 后端同步渲染—— JSP 是如何同步渲染出页面的
![image-20210910175112055](https://i-blog.csdnimg.cn/blog_migrate/776872b5d9625b2891abe15ccd6a6733.png)
![image-20210910175301765](https://i-blog.csdnimg.cn/blog_migrate/658eea90ddbeb5fdc819364017d07ab1.png)
![image-20210910175545214](https://i-blog.csdnimg.cn/blog_migrate/80d953a382c76ea938ac614b00faa114.png)
3.4 页面静态化:动态页面静态化如何实现?
![image-20210910180034895](https://i-blog.csdnimg.cn/blog_migrate/9ded85191c315f8dd3a547f3e91d9c60.png)
![image-20210914190750499](https://i-blog.csdnimg.cn/blog_migrate/e4207665c095a4d20379e34f15b7f22f.png)
![image-20210910180329189](https://i-blog.csdnimg.cn/blog_migrate/cb61e0a86738b95090393166959b17cd.png)
3.5 前后端分离——如何正确理解和实现前后端分离
![image-20210910180600113](https://i-blog.csdnimg.cn/blog_migrate/3c358e1175f673af3386850abaf931a1.png)
![image-20210910180801412](https://i-blog.csdnimg.cn/blog_migrate/08cc80c7003232ee35ee4f60dec1c1f0.png)
![image-20210910181014592](https://i-blog.csdnimg.cn/blog_migrate/a65b9e6adcecff6d4e608e47837fa435.png)
- 不利于 SEO,搜索引擎更喜欢静态页面
3.6 单页面应用—— 什么情况下该选择单页面应用
![image-20210914190841386](https://i-blog.csdnimg.cn/blog_migrate/e6b6cf19934013f0d6bae56b9a0e3eeb.png)
![image-20210910181322615](https://i-blog.csdnimg.cn/blog_migrate/ddfba88c82c8b33f188a50fff75f735c.png)
- 缺点:
- 首次页面加载事件长
- SEO 难度比较大(SSR SEO好做一些)
![image-20210910181431587](https://i-blog.csdnimg.cn/blog_migrate/ae36bca14a94dae86479a1f58a99b9bf.png)
- 不需要跳转翻页(一个页面实现整个业务)
3.7 BIgPipe——什么是BgPipe,以及其工作原理
![image-20210910181829235](https://i-blog.csdnimg.cn/blog_migrate/86f9b44488e230c0d67ee535a8d9aa5a.png)
![image-20210910181848169](https://i-blog.csdnimg.cn/blog_migrate/1983c46d76b6eb1a5b6d65724172b583.png)
![image-20210910182003792](https://i-blog.csdnimg.cn/blog_migrate/088c0c18e4ac8c19eca77e43ed3bb939.png)
3.8 同构直出——有哪些主流的同构直出方案
![image-20210914191005949](https://i-blog.csdnimg.cn/blog_migrate/a5ca367fd2af98b76b3685a05a0ed48e.png)
- SSR:首屏渲染快,SEO比较好
![image-20210910182814621](https://i-blog.csdnimg.cn/blog_migrate/1d958a049e8d1dd8a7e4d35752e2fdd1.png)
![image-20210910182859145](https://i-blog.csdnimg.cn/blog_migrate/6d8b07adfa44e3d1d116e9cdf7ab79d4.png)
3.9 PWA——如何做到媲美原生应用的体验?
![image-20210910183750814](https://i-blog.csdnimg.cn/blog_migrate/57c710109848fc4ecf6b474f951a9484.png)
![image-20210910183946692](https://i-blog.csdnimg.cn/blog_migrate/858e006b60367e8318b77d86751652cc.png)
3.10 页面渲染:怎样选择合适的技术方案
![image-20210910184543742](https://i-blog.csdnimg.cn/blog_migrate/1c199ae5cc1168d5cb440e4b758669bf.png)
3.11 页面加载——加载策略有哪些?又该如何选型
![image-20210910185024022](https://i-blog.csdnimg.cn/blog_migrate/8fa5cbff30912c0affc266e5bfdb6633.png)
![image-20210910185204709](https://i-blog.csdnimg.cn/blog_migrate/c06126f3e8415d514624036b825c57a5.png)
![image-20210910185214074](https://i-blog.csdnimg.cn/blog_migrate/d3abbafd4633bdc655bc54841f6d7a33.png)
![image-20210910185612972](https://i-blog.csdnimg.cn/blog_migrate/0701b95163dc0734994b5e8bf047069d.png)
![image-20210910185705617](https://i-blog.csdnimg.cn/blog_migrate/8739492d857f6e6ac5a70cc0c9c3cc3b.png)
![image-20210910185728702](https://i-blog.csdnimg.cn/blog_migrate/b52ccb0ee2aaeda2d127a8a6b33448a7.png)
![image-20210910185833663](https://i-blog.csdnimg.cn/blog_migrate/d2170f6c588b005b4b571d2d1d1a3b4b.png)
![image-20210910185914869](https://i-blog.csdnimg.cn/blog_migrate/d8f0bea275db5c622b546f46bf4a5689.png)
![image-20210910190046034](https://i-blog.csdnimg.cn/blog_migrate/1e92cbf3d1dee04744c0344bfd348be5.png)
![image-20210910190132381](https://i-blog.csdnimg.cn/blog_migrate/8bb78dc83c87359a4688d0b06c6c8399.png)
![image-20210910190205128](https://i-blog.csdnimg.cn/blog_migrate/f7183a61ada80ada528806687b24dd81.png)