Web前端性能优化 让你页面速度飞起来

课程简介:

让你页面速度飞起来 Web前端性能优化
从构建、浏览器渲染、缓存、PWA、服务端优化等多方面,梳理前端性能优化的技术点、综合分析技术的原理,根据不同的业务场景选择合适的性能优化点进行应用,最终为你的网站带来显著的速度提升和整体性能提升。

100%前端开发者最想解决的网页加载问题
几乎所有的开发者都会面临着开发的网站存在加载问题,想要加快网页的加载速度
前端的页面更需要在性能优化上下功夫,只有这样才能实现更好的用户体验

[code]官网课程链接:https://coding.imooc.com/class/130.html[/code]

课程目录:

第1章 课程简介
对课程做简单的介绍。
1-1 课程简介

第2章 资源合并与压缩
通过本章,我们学习和理解了web前端的概念,以及性能优化的意义所在,并且通过实战中的压缩与合并,深入理解了减少http请求数和减少http请求资源大小两个优化要点,并且通过实战,帮助学生掌握如何通过网站进行压缩与合并,如果使用半自动化的gulp脚本进行压缩与合并,最终通过优化前后的性能对比,更加量化地去理解了性能…
2-1 资源合并与压缩-http 清求的过程及潜在的性能优化点
2-2 资源合并与压缩-html 压缩
2-3 资源合并与压缩-css 及 js压缩
2-4 资源合并与压缩-文件合并
2-5 资源合并与压缩-实战-在线工具压缩
2-6 资源合并与压缩-实战-fis3 构建工具自动压缩合并-流程
2-7 资源合并与压缩-实战-fis3 构建工具自动压缩合并-实操
2-8 资源合并与压缩-总结

第3章 图片相关的优化
通过本章,帮助学员学习和掌握图片相关的优化方法,理解不同图片格式分别是什么以及如果在不同的业务场景中使用不同的图片格式和图片加载方式。
3-1 图片相关的优化- 一张JPG图片的解析过程
3-2 图片相关的优化- png8、png24、png32之间的区别
3-3 图片相关的优化- 不同格式图片常用的业务场景
3-4 图片相关的优化- 图片压缩几种方法-雪碧图、Image inline
3-5 图片相关的优化- 图片压缩案例分析
3-6 图片相关的优化- 图片压缩实战(上) webp、inline-image
3-7 图片相关的优化- 图片压缩实战(下)雪碧图、svg

第4章 css 和 js 的装载与执行
通过本章,帮助学员理解css和js在页面中的加载机制,让学员能初步建立通过理解浏览器渲染机制进行代码优化提升页面访问性能的概念,同时掌握css、js在装载与执行阶段的基础优化。
4-1 css和js的装载与执行-HTML 页面加载渲染的过程
4-2 css和js的装载与执行-HTML 演染过程的一些特点
4-3 css和js的装载与执行-顺序执行、并发加载
4-4 css和js的装载与执行-css 阻塞和 js 阻塞
4-5 css和js的装载与执行-依赖关系、js引入的方式
4-6 css和js的装载与执行-加载和执行的一些优化点
4-7 css和js的装载与执行-实战-验证对于某个域名浏览器并发数是有上限的
4-8 css和js的装载与执行-实战-验证css加载不会阻塞后面的 js 并发加载
4-9 css和js的装载与执行-实战-async、defter
4-10 css和js的装载与执行-实战-动态异步引入js实操
4-11 css和js的装载与执行-实战-@import、link实操
4-12 css和js的装载与执行-实战-手机淘宝加载分析

第5章 懒加载与预加载
通过本章,帮助学员理解资源加载时机对前端性能优化的影响,同时实战理解懒加载和预加载的实现机制。
5-1 懒加载与预加载-懒加载原理
5-2 懒加载与预加载-预加载原理
5-3 懒加载与预加载-懒加载、预加载使用场景
5-4 懒加载与预加载-懒加载原生 js 和 zepto.lazyload
5-5 懒加载与预加载-预加载原生 js 和 PreloadJS 实现

第6章 重绘与回流
通过本章,帮助学员理解高阶的浏览器渲染机制,深入理解浏览器重绘与回流的机制,从而掌握如何深入地从代码层面基于浏览器的渲染机制进行优化。
6-1 重绘与回流-css 性能让 Javacript 变慢?
6-2 重绘与回流-什么是重绘与回流
6-3 重绘与回流-避免重绘回流的两种方法
6-4 重绘与回流-案例解析-重绘、回流及图层
6-5 重绘与回流-案例解析- chrome 浏览器自动创建图层 layer
6-6 重绘与回流- 实战优化点总结
6-7 重绘与回流- 实战演练 1
6-8 重绘与回流- 实战演练 2
6-9 重绘与回流- 实战演练 3
6-10 重绘与回流- 实战演练 4
6-11 重绘与回流- 实战演练 5
6-12 重绘与回流- 实战演练 6
6-13 重绘与回流- 实战演练 7
6-14 重绘与回流- 实战演练 8 ,9

第7章 浏览器存储
通过本章,帮助学员理解浏览器存储的核心概念及其在关键业务中的应用,通过浏览器存储,可以在浏览器端建立可控制的缓存机制,从而帮助用户在自己的关键业务上进行相应的优化。
7-1 浏览器存储-cookies
7-2 浏览器存储-LocalStorage、SessionStorage
7-3 浏览器存储-IndexedDB
7-4 浏览器存储-案例解析
7-5 浏览器存储-Service Workers产生的意义
7-6 浏览器存储-PWA与Service Workers
7-7 浏览器存储-案例解析
7-8 浏览器存储-实战演练-cookie、localstorge、sessionStorge
7-9 浏览器存储-IndexeDB-基础操作-创建打开、关闭删除
7-10 浏览器存储-IndexeDB-基础操作
7-11 浏览器存储-IndexeDB-事务
7-12 浏览器存储-Service Workers-离线应用
7-13 浏览器存储-Service Workers-如何实现Service Workers主页面之间的通信

第8章 缓存优化
通过本章,帮助学员掌握如何使用在线cdn提升静态资源的加载速度,如果使用dns-prefetch,以及如何使用服务端缓存来进行搭建,更加完善的资源请求缓存机制。
8-1 缓存1
8-2 缓存2
8-3 缓存3-Last-Modified-If-Modified-Since
8-4 缓存4-Etag-If-None-Match
8-5 缓存5-案例解析
8-6 缓存6-流程图
8-7 缓存7-实战1
8-8 缓存8-实战2

第9章 SSR(服务端渲染)
通过本章,帮助学员了解服务端渲染的核心概念,以及vue如何做服务端渲染,从而让学员更加深入地理解渲染的性能消耗在性能优化中的意义。
9-1 服务端性能优化-1
9-2 服务端性能优化-2
9-3 服务端性能优化-3

课程截图:


感谢来自@一杯清茶 的投稿!

Web前端攻城狮培养计划 js/h5/web前端开发培训入门学习视频教程

课程简介:

零基础web前端学习路线,前端小白入门课程让你先学习基础知识,系统学习html、css、js、jQuery,然后进阶,最后再到精通,一套完成的前端工程师学习路线图,本专题是你走进前端世界的不二选择!

系统学习前端四大基础html、css、js、jQuery,配合800+练习题and教辅资料,你将有能力独立开发应用这些功能的项目

实现Web端界面和移动端的界面;比如,网站设计、网页界面开发、前台数据的获取和绑定、以及动态特效等等!

课程官方链接:https://class.imooc.com/sc/20

课程目录:

步骤1: HTML基础
HTML主要是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言,为搭建网页结构做出第一步。本阶段主要介绍了HTML的语法基础、表格、表单、等标签,并有案例结合,达到学以致用。
第1课-HTML基础
第2课-HTML表格
第3课-HTML表单
第4课-案例搭建网页HTML结构
第5课-HTML基础测试

步骤2: CSS基础
CSS是一种定义样式结构如字体、颜色、位置等样式的语言,被用于为页面添加效果。本步骤主要介绍了CSS的基础语法、选择器、文本、背景、列表、盒子模型、浮动、定位以及网页的布局方式。
第1课-CSS选择的艺术
第2课-CSS文本样式
第3课-盒子模型
第4课-CSS背景和列表
第5课-float浮动
第6课-CSS定位(position)
第7课-CSS网页布局基础
第8课-网页布局案例
第9课-CSS基础测试

步骤3: JavaScript基础
JavaScript是一种解释性脚本语言,主要用来向HTML页面添加交互行为。本阶段主要带领大家学习JS的基本语法、流程控制语句、函数、对象、DOM、BOM、事件以及轮播图的案例,实现网页的交互效果。
第1课-JavaScript语法
第2课-JavaScript流程控制语句
第3课-JavaScript函数
第4课-JavaScript内置对象
第5课-JavaScript DOM基础
第6课-JavaScript DOM事件
第7课-JavaScript BOM基础
第8课JavaScript实现轮播特效
第9课JavaScript基础测试

步骤4: jQuery基础
jQuery是一个快速、简洁的JavaScript框架,设计宗旨是“write Less,Do More”。本阶段将为大家介绍jQuery的基础语法、选择器、DOM、事件、插件、瀑布流案例等。
第1课-jQuery选择的艺术
第2课-jQuery DOM操作
第3课-jQuery事件
第4课-jQuery插件
第5课-jQuery弹出层案例
第6课-瀑布流布局案例
第7课jQuery基础测试

步骤5: 实战案例
通过前面步骤的学习,我们学会了网页开发的基础知识,本阶段将由多年开发经验的老师带领你体验企业开发中的流程,从ps切图到最后的网页完成,积累项目开发经验。
第1课-Photoshop辅助工具
第2课-统一挂号平台案例
第3课-实战测试

课程截图:

感谢来自@gf779464689 的投稿!

小凡老师五天手把手教你:项目实战-美团网 web前端开发入门到实战视频课程

课程简介:

这套在腾讯课堂免费讲课的视频 ,小凡老师在去年3月份已经免费分享出这套实战项目教程,是不可多得的精品课程。
1.对于前端开发人员来说,最核心的技能是什么?
2.前端基础,学的怎么样,能否独立开发一些项目?
3.对css和js掌握的怎么样?了解、熟练、精通or迷失
4.你对项目课程的期待是怎样的,希望通过本次项目收获些什么?
5.抱着什么样的心态,来学习本次项目?
上面的答案,都在本套视频教程中,绝对干货,让你提高前端实际开发经验

课程截图:

01讲 项目介绍
02讲 搭建整体的结构
03讲 顶部导航1
04讲 顶部导航2
05讲 中间的搜索区域
06讲 左边的全部下拉列表1
07讲 左边的全部下拉列表2
08讲 整个的nav部分及总结
09讲 底部的链接及选项卡
10讲 底部的获取-客服
11讲 项目模块实现
12讲 主页中名店抢购和美食
13讲 阶段小结
14讲 倒计时效果
15讲 三角形的边
16讲 滚动的名店导航
17讲 名店导航无缝效果
18讲 列表页开始
19讲 列表的基本结构
20讲 margin负值的理解
21讲 商品筛选条件栏
22讲 侧边栏及省略号
23讲 margin重合的问题
24讲 dom0级与dom2级事件
25讲 js文件组织及变量重名
26讲 图文混排-最近浏览
27讲 图文混排-用户评价
28讲 用户打分及印象标签
29讲 吸顶效果
30讲 详细页吸顶效果
31讲 页面小图标设置优化
32讲 总结祝福

课程截图:

Web前端开发工程师 移动前端开发视频课程

课程简介:

Web前端开发工程师,主要职责是利用HTML、XHTML、CSS、JavaScript、Flash等各种Web前端技术进行客户端产品的开发。完成客户端程序(也就是浏览器端)的开发,开发JavaScript以及Flash模块,同时结合后台开发技术模拟整体效果,进行丰富互联网的Web前端开发,致力于通过技术改善用户体验。

麦子学院WEB开发工程师入门到精通系统视频课程,如有侵权,请联系猴头客删除!

官方课程链接:http://www.maiziedu.com/course/web/

课程目录:

第一阶段:页面制作基础
从这一基础阶段开始,正式学习Web前端开发需要的编程语言HTML, CSS和JavaScript。HTML和CSS用于Web静态内容的展示,JavaScript用于Web动态交互。完成这一阶段前端开发的学习,你就可以独立实现一个动静结合的Web前端项目啦!

— 01.HTML+CSS基础入门
— 02.Javascript基础入门
— 03.Web前端开发规范
— 04.Html概述

第二阶段:主流框架应用
优秀的Web前端开发工程师一定都是追求高效率的”懒人“。这一框架阶段就是教你如何使用当今流行的Web前端框架,包括bootstrap、Angularjs等,来提高前端开发效率。在学习前端框架本身的同时,也希望你能掌握任意一种快速上手的web前端框架的方法!

— 01.锋利的Zepto
— 02.bootstrap入门
— 03.jquery基础应用
— 04.H5实现俄罗斯方块游戏

第三阶段:前端技术进阶
web前端开发进阶阶段的学习,主要是让大家快速掌握当今流行、实用、最新的技术,比如:less、sass、json、ajax等,并将这些前端技术快速用于实践,开发出更加符合客户体验度的web前端页面。

— 01.JavaScript面向对象编程
— 02.less从入门到精通
— 03.利用Sass编写高质量CSS
— 04.JSON入门
— 05.Web前端开发之Ajax初步
— 06.移动前端开发项目
— 07.AngularJS从入门到实战
— 08.Gulp+Angular+Express实现简易任务管理系统

第四阶段:前端技术拓展(选修)
web前端技术发展日新月异,因此前端技术的拓展学习及实践对于web前端工程师来说非常重要。本阶段就是基于KnockOut、Backbone、bootstrap、Webpack等技术的拓展学习和web前端项目的实战开发演练。

— 01.KnockOut从入门到精通
— 02.项目管理
— 03.前端开发项目:一起来做秒杀活动
— 04.ECMAScript6编程艺术
— 05.高级工程师手把手带你做企业门户前端
— 06.Backbone入门基础
— 07.企业网站后台制作实战
— 08.麦子商城项目制作
— 09.bootstrap综合实战
— 10.响应式web设计及项目实践
— 11.Webpack实战
— 12.Mock.js+Express实现京东商城数据模拟
— 13.Javascript 进阶
— 14.HTML5绘图
— 15.前端进阶指南
— 16.polymer入门教程
— 17.前端工程化
— 18.ReactJS从入门到实战
— 19.微信公众号JS全栈开发实战
— 20.Vue.js详解

课程截图: