• 欢迎访问TT7.org ,TT7 专注IT技术学习与分享。欢迎一起成长。

前端全链路性能优化实战,极客时间刘威老师Web前端视频课程

前端 爱学习的小T 3周前 (06-20) 53次浏览 0个评论

前端全链路性能优化实战
平常我们学习和解决前端性能优化问题的时候,往往是在网上搜索一些教程,对某一点进行优化,再或者就是看一些陈旧的教程文章,头痛医头脚痛医脚。这样学来的知识很不系统,也无法进行很好的总结,导致没有沉淀和积累。同时只关注前端 CSS、JavaScript 技术本身的优化,一但涉及到 App、后端、网络等不是很熟悉的领域,你就变得束手无策了。本套课程不能局限于前端,而是要补齐整个体系上的优化技术和理念,由点及面,带你全面掌握全链路的前端性能优化知识和解决方案,帮助互联网从业者学习前端性能优化、性能优化的课程。

刘威老师10年来一直从事前端研发方面工作,曾带领团队打造跨终端技术体系、前端监控体系、多终端可视化页面搭建体系、前端性能优化体系等。

对于一个网站来说,保持用户访问的活跃度是至关重要的,页面加载是否够快,操作响应是否及时,直接影响着用户的体验感。通过各种优化策略和优化方法,提高前端代码执行效率,便是前端性能优化的本质。不过,它并不只是前端的事情,这是一个需要在全链路上进行研究和解决的难题。
前端研发流程视频截图

课程大纲:
1.静态资源优化;
2.页面渲染架构设计与性能优化;
3.原生App优化;
4.服务端和网络优化;
5.研发开发流程优化;
6.全链路质量监控体系建设。
精简HTML代码 视频截图
课程收获:
1.全面解析静态资源优化方案;
2.了解页面渲染架构设计和优化策略;
3.原生 App、服务端及网络优化实战;
4.研发流程优化及全链路监控体系建设。

页面渲染技术选型的合理化建议:
1.存在即合理;
2.依赖业务形式;
3.依赖团队规模;
4.依赖技术水平;
5.没有银弹。

如何减少HTTP请求数:
1.CSS Sprites;
2.图片使用DataURI、Web Font;
3.JS/CSS文件合并;
4.JS/CSS请求Combo;
5.接口合并;
6.接口存储 LocalStorage;
7.静态资源存储 LocalStorage。
CSS性能优化 视频截图

如何提升代码质量:
1.制定代码规范(小组内或者团队内);
2.静态代码扫描(可以在上线系统里增加流程);
3.CodeReview(高工或者小组内);
4.阅读框架核心源码(站在巨人肩膀上)。

浏览器缓存策略 视频截图

前端全链路性能优化实战

01丨课程介绍

02丨内容综述

03丨图片优化:如何为不同格式的图片选择合适的应用场景?

04丨图优化:怎样让图片加载得更快?

05丨图片优化:在服务器端进行图片自动优化的原理是什么?

06丨HTML:怎样精简优化HTML的代码结构?

07丨CSS:CSS的优化应该遵循哪些原则?

08丨JavaScript:如何提升JavaScript的执行效率?

09丨JavaScript:如何对JavaScript的缓存进行优化?

10丨JavaScript:如何选择合适的模块化加载方案?

11丨怎样才能减少浏览器的回流和重绘?

12丨DOM编程优化:怎样控制DOM大小并简化DOM操作?

13丨静态文件:有哪些常用的压缩工具?

14丨静态文件:怎样打包才更合理?

15丨静态文件:版本号更新,你应该遵循哪些策略?

16丨构建工具:常用的前端构建工具有哪些?如何选型?

17丨打包优化:提升webpack打包效率的6个小技巧

18丨浏览器渲染:你是否清楚浏览器的渲染过程?

19丨页面渲染:主流的页面渲染技术架构和方案有哪些?

20丨后端同步渲染:JSP是如何同步渲染出页面的?

21丨页面静态化:动态页面静态化要如何实施?

22丨前后端分离:如何正确理解和实现前后端分离?

23丨单页面应用:什么情况下该选择单页面应用?怎样实现?

24丨BigPipe:什么是BigPipe?你了解它的工作原理吗?

25丨同构直出:有哪些主流的同构直出方案?如何选择?

26丨PWA:如何做到媲美原生应用的体验?

27丨页面渲染:怎样选择合理的技术方案?

28丨页面加载:加载策略都有哪些?又该如何选型?

29丨接口优化:如何对接口调用进行优化?

30丨接口优化:如何对接口缓存进行优化?

31丨WebView:如何选择合适的WebView内核?

32丨浏览器优化:如何设置全局WebView?

33丨浏览器优化:如何实现导航栏预加载?

34丨浏览器优化:如何打通登录态?

35丨浏览器优化:如何实现URL预加载?

36丨浏览器优化:如何提升滚动条的使用体验?

37丨浏览器优化:如何对JS-SDK进行优化?

38丨浏览器优化:目前主流的缓存策略有哪些?

39丨HTML5 离线化:主流的技术实现方案有哪些?

40丨混合式开发: React Native内核及优势介绍

41丨混合式开发:小程序内核及优势介绍

42丨混合式开发:Flutter内核及优势介绍

43丨CDN:如何合理配置CDN缓存?

44丨DNS :主流的DNS优化方法有哪些?

45丨HTTP:如何减少HTTP请求数?

46丨Cookie :减少Cookie大小的策略和益处

47丨服务器:缓存配置和优化方案

48丨服务器:如何开启和配置gzip压缩

49丨HTTPS:如何开启全站HTTPS?

50丨HTTP-2 :升级HTTP-2的好处有哪些?如何升级?

51丨流程优化:如何优化前端团队的研发流程?

52丨协作模式:前端和后端如何开展更高效的合作?

53丨自动化测试:有哪些主流的技术方案?如何选型?

54丨自动化上线:有哪些方案可供选择?如何部署?

55丨代码质量:如何有效提升团队整体的代码质量?

56丨上线前:如何对HTML5的质量做即时检测?

57丨上线后:如何进行HTML5的性能和错误监控?

58丨线上业务:如何进行线上业务的基调监控?

59丨发版后:如何进行App的性能和错误监控?

60丨课程总结和后续展望


版权归原作者所有,交流学习联系:tt(at)tt7.org
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址