分享 【云盘分享】前端性能优化--6 大角度综合型优化方案

bianchengyuan2 · 2020年09月10日 · 424 次阅读

前端性能优化--6 大角度综合型优化方案

下载地址:百度云盘

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

适合人群 1-3 年开发经验的前端开发者 初入社会的毕业生

技术储备要求 HTML/CSS/JS 基础 基本的 Webpack, React, Node.js 知识

章节目录: 第 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 英语与工作 本课程已完结

下载地址:百度云盘

更多原创文章干货分享,请关注公众号
  • 加微信实战群请加微信(注明:实战群):gocnio
暂无回复。
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册