前端性能优化—6大角度综合型优化方案|百度云下载

资源简介

我们常说性能永远是第一需求,作为一个前端工程师,不管使用什么框架,不管从事什么类型的网站或应用开发,只要是项目被用户使用,性能优化就永远是你需要关注的问题。通常情况下,工程师们在深入了解前端技术的原理后,才能总结出性能优化的方案,需要多年经验的积累。前端技术日新月异,优秀的性能优化方案在近几年也层出不穷。本课程,我会带你使用当今行业中非常前沿&专业的方案,解决前端性能优化问题。无论是为了解决工作中的实际问题,还是为了提升能力,这门课都能帮到你。

《前端性能优化—6大角度综合型优化方案|百度云下载》

课程目录

可以对照下资源目录,可能不全!

第1章 课程介绍

介绍这门课程要讲的主要内容,讲解方式、课程主线、以及能有的收获。

1-1 课程导学 【课程背景,大纲速览】试看

第2章 性能优化的指标和工具 (告别前端小白,成为大神的必经之路)

本章带大家认识前端优化优化的重要性,了解当前的行业标准,流行的模型和测量工具,以及如何有针对性的进行性能的测量,解读性能报告;还会学习到很多与性能相关的APIs的使用和实用的例子。

2-1 为什么要进行Web性能优化【企业刚需】
2-2 性能指标和优化目标【了解行业标准】
2-3 RAIL测量模型【黄金指南】
2-4 使用WebPageTest评估Web网站性能【快捷好用的在线分析工具】
2-5 使用LightHouse分析性能【一站式全面呈现性能指标】
2-6 使用Chrome DevTools分析性能【最大法宝】
2-7 常用的性能测量APIs【不可不知,打开精细化、自定义测量的大门】试看

第3章 渲染优化 (与浏览器为友,共进退)

本章涵盖现代浏览器的渲染原理,详细解读各个环节的作用和相互联系,具体讲解如何减少和避免回流和重绘,还有如何解决布局抖动的问题。

3-1 浏览器渲染原理和关键渲染路径【大厂前端面试必考】
3-2 回流与重绘, 如何避免布局抖动
3-3 使用FastDom【防止布局抖动的利器】
3-4 复合线程与图层【深入渲染流水线的最后一站】
3-5 避免重绘【必学,加速页面呈现】
3-6 高频事件防抖【解救页面卡顿的秘药】
3-7 React时间调度实现【中高级前端需要了解的React调度原理】

第4章 代码优化 (快来看看怎样写出真正高性能的代码)

本章主要了解在代码层面上可以进行的极致优化,涉及JavaScript,CSS和HTML的方方面面;较深的理论知识会做到深入浅出的讲解,让你了解如何配合JS引擎写会可以被它有效优化的代码。

4-1 JS开销和如何缩短解析时间【为什么我的JS运行慢】
4-2 配合V8 有效优化代码【路走对了才能快】
4-3 函数优化【必会】
4-4 对象优化【JS对象避坑地图】
4-5 HTML优化【必会】
4-6 CSS对性能的影响 【必会】

第5章 资源优化 (经典性能优化解决方案)

本章学习如何对Web加载的资源进行有效的优化,不仅涉及压缩的知识,还详细讲解一些针对图片、字体类资源本身特性和使用方式不同可以带来的性能提升。

5-1 资源的压缩与合并【见效最明显的优化方法】
5-2 图片格式优化【多种图片格式,哪种最合适】
5-3 图片加载优化【突破大型网站图片加载的瓶颈】
5-4 字体优化【千万不可忽略】

第6章 构建优化(揭开webpack性能优化的内幕)

本章讲解基于Webpack项目如何进行全方位的性能优化,让你的企业级应用速度翻倍。以一个基本webpack工程开始,逐项讲解如何进行配置,达到优化的效果。

6-1 webpack的优化配置【了解这些优化配置才敢说会用webpack】
6-2 webpack的依赖优化【小改动,大作用】
6-3 基于webpack的代码拆分【让网站按需加载】
6-4 手把手教你做webpack的资源压缩
6-5 基于webpack的持久化缓存【大型企业级应用的必会技能】
6-6 基于webpack的应用大小监测与分析【webpack性能分析的法宝】
6-7 React按需加载的实现方式【中高级前端必会的React按需加载】

第7章 传输加载优化(前沿技术解决高访问量网站性能优化问题)

本章包括了前沿的网络加载优化技术,从了解现代网络上的问题和多样的流行技术解决方案,给大型、高访问量的网站带来质的飞跃。

7-1 启用压缩Gzip【必会的传输压缩方案】
7-2 启用Keep Alive【通过一个参数提速连接】
7-3 HTTP资源缓存【必会的HTTP缓存方法】
7-4 一次性理解Service workers技术,给网站提速
7-5 HTTP 2的性能提升
7-6 用流行的SSR技术给前端减负

第8章 前沿优化解决方案

本章在之前章节知识点的基础上,补充了更多流行的Web性能优化技术。以例子为导向掌握用法。

8-1 拯救移动端图标SVG【拯救移动端图标】
8-2 使用Flexbox优化布局(上)
8-3 使用Flexbox优化布局(下)
8-4 优化资源加载的顺序【给资源设置优先级】
8-5 预渲染页面【提前完成任务的意义】
8-6 Windowing提高列表性能【开源节流,用什么画什么】
8-7 使用骨架组件减少布局移动【论占位置的重要性】

第9章 性能优化问题面试指南【能胸有成竹的一步】

本章在之前章节的基础之上,针对当前高频的性能优化相关问题进行剖析,让大家同时了解应对的方法,如何准确理解问题,抓住重点进行作答。

9-1 Web加载&渲染基本原理
9-2 首屏加载优化
9-3 JavaScript 内存管理

第10章 互联网外企offer与立足之道【能不能出国,就看这一章了】

本章向大家介绍互联网外企面试中常见流程和考察重点,同时带来在外企生存的职业经验分享。

10-1 互联网外企offer
10-2 英语与工作

资源目录

前端性能优化 掌握行业实用专业前沿的解决方案 [1.6G]
      ┣━━第10章 互联网外企offer与立足之道【能不能出国,就看这一章了】 [30.2M]
      ┃    ┗━━第10章 互联网外企offer与立足之道【能不能出国,就看这一章了】.mp4 [30.2M]
      ┣━━第1章 课程介绍 [18M]
      ┃    ┗━━第1章 课程介绍.mp4 [18M]
      ┣━━第2章 性能优化的指标和工具 (告别前端小白,成为大神的必经之路) [288.3M]
      ┃    ┗━━第2章 性能优化的指标和工具 (告别前端小白,成为大神的必经之路).mp4 [288.3M]
      ┣━━第3章 渲染优化 (与浏览器为友,共进退) [198.5M]
      ┃    ┗━━第3章 渲染优化 (与浏览器为友,共进退).mp4 [198.5M]
      ┣━━第4章 代码优化 (快来看看怎样写出真正高性能的代码) [115.8M]
      ┃    ┗━━第4章 代码优化 (快来看看怎样写出真正高性能的代码).mp4 [115.8M]
      ┣━━第5章 资源优化 (经典性能优化解决方案) [139.7M]
      ┃    ┗━━第5章 资源优化 (经典性能优化解决方案).mp4 [139.7M]
      ┣━━第6章 构建优化(揭开webpack性能优化的内幕) [188.4M]
      ┃    ┗━━第6章 构建优化(揭开webpack性能优化的内幕).mp4 [188.4M]
      ┣━━第7章 传输加载优化(前沿技术解决高访问量网站性能优化问题) [210.2M]
      ┃    ┗━━第7章 传输加载优化(前沿技术解决高访问量网站性能优化问题).mp4 [210.2M]
      ┣━━第8章 前沿优化解决方案 [388.6M]
      ┃    ┗━━第8章 前沿优化解决方案.mp4 [388.6M]
      ┣━━第9章 性能优化问题面试指南【能胸有成竹的一步】 [54.5M]
      ┃    ┗━━第9章 性能优化问题面试指南【能胸有成竹的一步】.mp4 [54.5M]
      ┗━━前端性能优化 资料 [2.2M]
            ┣━━completed-master.zip [1.3M]
            ┣━━doc-master.zip [5.2K]
            ┗━━original-master.zip [851.9K]

资源下载

抱歉,只有登录并在本文发表评论才能阅读隐藏内容,切记不要恶意刷评论白嫖资源,评论前切记阅读用户规则,一旦进入黑名单,不可能再放出来。
点赞
  1. 城市睦人说道:

    非常感谢分享,想学学这一块知识

  2. iwatchme2说道:

    学习学习啊。

  3. loveagri说道:

    真及时,目前正需要

  4. zxhy说道:

    :smile: (*^__^*) 嘻嘻……,我来围观下,终于修复好了。2020年9月23日12:04:30

  5. 默然说道:

    这个资源不错,学习一下

  6. xiexie说道:

    谢谢分享,努力学习!!!

  7. zhaorui说道:

    提升前端技能,感谢楼主分享,学习一下。

  8. 田幺小说道:

    谢谢博主分享

  9. Ds说道:

    学习学习 :eek:

  10. zcc说道:

    学习一下前端,感谢楼主

  11. react说道:

    学学学他

  12. netcat说道:

    学习学习。 这个登录看起来怪怪的。

  13. 你若安好说道:

    支持楼主,给力!!!!!

  14. feiliam说道:

    哇呀,快来学习

  15. fa说道:

    :smile: 来看看内容全不全

  16. takan说道:

    很全面的一套资料啊,前端必看

  17. 氢气球说道:

    前端优化看起来好难啊

  18. bobz说道:

    做前端的必看了,谢谢博主分享

  19. 封里说道:

    感谢分享~~

  20. qq1067说道:

    了解了解 看一下 谢谢分享

  21. rocket250说道:

    非常感谢楼主的分享 :rolleyes:

  22. cseve123说道:

    感谢分享,学习一下!!!

  23. 171799383说道:

    学到了

  24. shred说道:

    不错的资源,一起学起来

  25. yanhuayileng说道:

    正好在找这个视频,谢谢楼主了

  26. 初心说道:

    正好需要这方面的资源,学习了 :razz:

  27. dreamzhhl说道:

    感谢分享

  28. JoshuaX说道:

    不是很懂前端,了解下 :razz:

  29. 小松鼠说道:

    很好的资源 学习

  30. 996说道:

    不错的资源,一起学起来

  31. tt说道:

    好东西,要学习了 :wink:

  32. mekor说道:

    :biggrin: 感谢分享,可以看看前端的知识,正在学习前端。

  33. xiaolingis说道:

    从指标工具、渲染优化、代码优化、资源优化、构建优化、传输加载优化到前沿前端优化解决方案,很全面的一套资料,多谢共享。

  34. 无羽毛的学习说道:

    前端性能优化学习下,谢谢 :mad:

  35. 阿白说道:

    能看么兄弟们

  36. 圣暗说道:

    前端优化是门学问,越来越重要

  37. Miracle说道:

    太棒了,找这个资源好久了,感谢

  38. Alegeba说道:

    感谢分享,可以看看前端的知识,正在学习前端。

  39. openbilibili说道:

    很好的资源 学习

  40. qxedu说道:

    学习一下

  41. memo说道:

    正是我要找的资源,好及时,谢谢

  42. wing说道:

    正需要解决高访问量网站性能优化问题

  43. tom说道:

    做为一个做为前端开发多年的我,总遇到性能瓶颈,这课让无法抵抗 :arrow:

  44. temp说道:

    博主更新资源很是积极哈,感谢

  45. fengchenxiujisd说道:

    咦 大家都有了?

  46. haha说道:

    真及时,目前正需要,谢谢!

    1. 山涧小石说道:

      修改昵称,避免误杀

  47. JackRock说道:

    学习学习,多谢

  48. hellokitty说道:

    前端资源拿下,先看了

  49. 1198365681说道:

    不错的资源,一起学起来

  50. hsl说道:

    学习学习啊。

    1. 山涧小石说道:

      已经修复链接

发表评论