KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #ai-agent #developer-tools #codex #typescript #cli #deepseek-harness #claude-code #ai-agents #mcp #rust

fe-practice-hard

★ 69 Open GitHub ↗

晚练课

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center">前端刻意练习（原:前端晚练课）</h1>

每天一个前端知识点，苦练前端真功夫

> 很多时候，我们在看书或网上的教程时“一学就会”，可真正解决实际问题时往往“一写就跪”，看似“学会”的知识其实并没有掌握，我们缺乏相对应的必要练习。

## 本期练习传送门

- [第 129 期(W3C标准-CSS-动画)：跳动的心 for 10.24程序员节](https://github.com/fezaoduke/fe-practice-hard/issues/132)

<!--
- [前端刻意练习-周末小测-2](https://exam.kaoshixing.com/exam/exam_skip_login/292991/136969)

> 开考日期：2019-07-19 至 2019-07-21 
 > 考试时长：8 分钟 
 > 人数限制：25 人（用的第三方考试系统，免费版限制 25 人） 
 > 及格分数：4 分（满分 6 分），考完自动核算成绩 
-->

<!--
## 榜单

- [参与者排行榜（第1-100期）](https://fezaoduke.github.io/fe-practice-hard/ranking-list/index.html?session=1) （前三有奖励哦）
- [名人堂](https://fezaoduke.github.io/fe-practice-hard/honor-wall/)
-->

## 知识体系

### 基本功 ![](https://raw.githubusercontent.com/fezaoduke/fe-practice-hard/master/assets/images/dumbbell.png)

- #### W3C标准
  - HTML/HTML5
    - [第 17 期(W3C标准-HTML)：ol标签计数器](https://github.com/fezaoduke/fe-practice-hard/issues/20)
    - [第 18 期(W3C标准-HTML)：a 标签](https://github.com/fezaoduke/fe-practice-hard/issues/21)
    - [第 19 期(W3C标准-HTML)：换行](https://github.com/fezaoduke/fe-practice-hard/issues/22)
    - [第 20 期(W3C标准-HTML)：meta标签](https://github.com/fezaoduke/fe-practice-hard/issues/23)
    - [第 33 期(W3C标准-HTML)：汉语拼音](https://github.com/fezaoduke/fe-practice-hard/issues/36)
    - [第 43 期(W3C标准-HTML)：快捷键](https://github.com/fezaoduke/fe-practice-hard/issues/46)
    - [第 66 期(W3C标准-HTML)：特殊实体字符HTML、CSS、JS对照表](https://github.com/fezaoduke/fe-practice-hard/issues/69)
    - [第 67 期(W3C标准-HTML)：form 特性](https://github.com/fezaoduke/fe-practice-hard/issues/70)
    - [第 96 期(W3C标准-HTML)：output 元素](https://github.com/fezaoduke/fe-practice-hard/issues/99)
    - [第 105 期(W3C标准-HTML)：表单验证](https://github.com/fezaoduke/fe-practice-hard/issues/108)
    - [第 106 期(W3C标准-HTML)：原生HTML实现输入框下拉补全提示](https://github.com/fezaoduke/fe-practice-hard/issues/109)
    - [第 112 期(W3C 标准-HTML)：table的colgroup和col](https://github.com/fezaoduke/fe-practice-hard/issues/115)
  - CSS/CSS3
    - 语法
      - [第 53 期(W3C标准-CSS-语法)：样式的顺序](https://github.com/fezaoduke/fe-practice-hard/issues/56)    
      - [第 32 期(W3C标准-CSS-语法)：两种盒模型的区别](https://github.com/fezaoduke/fe-practice-hard/issues/35)
      - [第 115 期(W3C标准-CSS-语法)：CSS 单位](https://github.com/fezaoduke/fe-practice-hard/issues/118)
    - 伪类/伪元素
      - [第 114 期(W3C标准-CSS-伪类&伪元素)：focus-within 伪类](https://github.com/fezaoduke/fe-practice-hard/issues/117)
      - [第 123 期(W3C标准-CSS-伪类&伪元素)：表单验证伪类](https://github.com/fezaoduke/fe-practice-hard/issues/126)
    - 布局排版
      - [第 35 期(W3C标准-CSS-布局排版)：图片等比缩放匹配父容器尺寸](https://github.com/fezaoduke/fe-practice-hard/issues/38)
      - [第 54 期(W3C标准-CSS-布局排版)：word-break与word-wrap](https://github.com/fezaoduke/fe-practice-hard/issues/57)
      - [第 70 期(W3C标准-CSS-布局排版)：不定高垂直居中](https://github.com/fezaoduke/fe-practice-hard/issues/73)
      - [第 97 期(W3C 标准-CSS-布局排版)：首字下沉效果](https://github.com/fezaoduke/fe-practice-hard/issues/100)
      - [第 98 期(W3C 标准-CSS-布局排版)：首行文字自定义](https://github.com/fezaoduke/fe-practice-hard/issues/101)
      - [第 100 期(W3C 标准-CSS-布局排版)：两端对齐](https://github.com/fezaoduke/fe-practice-hard/issues/103)
    - 绘制
      - [第 4 期(W3C标准-CSS-绘制)：CSS 菱形剪切](https://github.com/fezaoduke/fe-practice-hard/issues/6)
      - [第 92 期(W3C 标准-CSS-绘制)：background-origin 背景图片绘制参照点](https://github.com/fezaoduke/fe-practice-hard/issues/95)
      - [第 107 期(W3C标准-CSS-绘制)：占位区块效果](https://github.com/fezaoduke/fe-practice-hard/issues/110)
      - [第 127 期(W3C标准-CSS-绘制)：border-radius](https://github.com/fezaoduke/fe-practice-hard/issues/130)
    - 响应式布局
      - [第 39 期(W3C标准-CSS-响应式布局)：基于Grid的响应式布局](https://github.com/fezaoduke/fe-practice-hard/issues/42)
    - 动画
      - [第 46 期(W3C标准-CSS-动画)：按钮loading动画效果](https://github.com/fezaoduke/fe-practice-hard/issues/49)
      - [第 109 期(W3C标准-CSS-动画)：翻转缩放动画](https://github.com/fezaoduke/fe-practice-hard/issues/112)
      - [第 129 期(W3C标准-CSS-动画)：跳动的心 for 10.24程序员节](https://github.com/fezaoduke/fe-practice-hard/issues/132)
  - JavaScript
    - [第 64 期(W3C标准-JavaScript)：JavaScript中常用的转义字符](https://github.com/fezaoduke/fe-practice-hard/issues/67)
    - [第 94 期(W3C 标准-JavaScript)：toFixed 方法](https://github.com/fezaoduke/fe-practice-hard/issues/97)
    - [第 116 期(W3C 标准-JavaScript)：atob & btoa —— base64 的解码编码](https://github.com/fezaoduke/fe-practice-hard/issues/119)
    - [第 124 期(W3C 标准-JavaScript)：unicode码互转](https://github.com/fezaoduke/fe-practice-hard/issues/127)
    - [第 126 期(W3C 标准-JavaScript)：iframe父子通信](https://github.com/fezaoduke/fe-practice-hard/issues/129)
    - DOM
      - [第 24 期(W3C标准-JavaScript-DOM)：复选框的全选反选](https://github.com/fezaoduke/fe-practice-hard/issues/27)
      - [第 41 期(W3C标准-JavaScript-DOM)：点击空白处检测](https://github.com/fezaoduke/fe-practice-hard/issues/44)
      - [第 71 期(W3C标准-JavaScript-DOM)：复选框的半选](https://github.com/fezaoduke/fe-practice-hard/issues/74)
      - [第 84 期(W3C 标准-JavaScript-DOM)：client、offset和scroll](https://github.com/fezaoduke/fe-practice-hard/issues/87)
      - [第 90 期(W3C 标准-JavaScript-DOM)：获取DOM的样式](https://github.com/fezaoduke/fe-practice-hard/issues/93)
      - [第 117 期(W3C 标准-JavaScript-DOM)：监听页面DOM元素的插入](https://github.com/fezaoduke/fe-practice-hard/issues/120)
      - [第 119 期(W3C 标准-JavaScript-DOM)：DocumentFragment - 文档片段](https://github.com/fezaoduke/fe-practice-hard/issues/122)
      - [第 121 期(W3C 标准-JavaScript-DOM)：dataset](https://github.com/fezaoduke/fe-practice-hard/issues/124)
    - BOM
      - [第 59 期(W3C标准-JavaScript-BOM)：location 位置操作](https://github.com/fezaoduke/fe-practice-hard/issues/62)
    - 事件
      - [第 38 期(W3C标准-JavaScript-事件)：事件的绑定与移除](https://github.com/fezaoduke/fe-practice-hard/issues/41)
      - [第 51 期(W3C标准-JavaScript-事件)：复合事件](https://github.com/fezaoduke/fe-practice-hard/issues/54)
      - [第 55 期(W3C标准-JavaScript-事件)：页面卸载事件 beforeunload](https://github.com/fezaoduke/fe-practice-hard/issues/58)
      - [第 80 期(W3C标准-JavaScript-事件)：InputEvent.inputType](https://github.com/fezaoduke/fe-practice-hard/issues/83)
      - [第 120 期(W3C 标准-JavaScript-事件)：pagehide 和 pageshow](https://github.com/fezaoduke/fe-practice-hard/issues/123)
    - 存储
      - [第 58 期(W3C标准-JavaScript-存储)：保存文本域的内容刷新不丢失](https://github.com/fezaoduke/fe-practice-hard/issues/61)
    - 异步
      - [第 36 期(W3C标准-JavaScript-异步)：实现一个Promise方法](https://github.com/fezaoduke/fe-practice-hard/issues/39)
      - [第 65 期(W3C标准-JavaScript-异步)：手写实现AJAX](https://github.com/fezaoduke/fe-practice-hard/issues/68)
      - [第 113 期(W3C 标准-JavaScript-异步)：async 和 await](https://github.com/fezaoduke/fe-practice-hard/issues/116)
    - Math
      - [第 5 期(2019-05-12)：数组最大数最小数](https://github.com/fezaoduke/fe-practice-hard/issues/7)
      - [第 7 期(2019-05-14)：n以内的随机数](https://github.com/fezaoduke/fe-practice-hard/issues/9)
    - Date
      - [第 6 期(2019-05-13)：获取过去n天的日期](https://github.com/fezaoduke/fe-practice-hard/issues/8)
      - [第 93 期(W3C 标准-JavaScript-Date)：获取指定月份有多少天](https://github.com/fezaoduke/fe-practice-hard/issues/96)
      - [第 111 期(W3C 标准-JavaScript-Date)：五种获取指定日期毫秒数的方法](https://github.com/fezaoduke/fe-practice-hard/issues/114)
  - WCAG
  - JSON
    - [第 10 期(2019-05-17)：JSON.parse方法polyfill](https://github.com/fezaoduke/fe-practice-hard/issues/12)
    - [第 21 期(W3C标准-JSON)：JSON.stringify](https://github.com/fezaoduke/fe-practice-hard/issues/24)
  - XML
  - SVG
    - [第 28 期(W3C标准-SVG)：用SVG画西瓜](https://github.com/fezaoduke/fe-practice-hard/issues/31)
    - [第 104 期(W3C 标准-SVG)：SVG优雅降级显示](https://github.com/fezaoduke/fe-practice-hard/issues/107)
  - canvas
    - [第 83 期(W3C标准-canvas)：canvas 画布尺寸](https://github.com/fezaoduke/fe-practice-hard/issues/86)
    - [第 108 期(W3C标准-canvas)：碎屑特效](https://github.com/fezaoduke/fe-practice-hard/issues/111)
  - URL
    - [第 79 期(W3C标准-URL)：URLSearchParams](https://github.com/fezaoduke/fe-practice-hard/issues/82)
- #### ECMAScript
  - 语法
    - [第 13 期(2019-05-20)：无返回值的语句](https://github.com/fezaoduke/fe-practice-hard/issues/15)
    - [第 14 期(ECMAScript-语法)：类型判断](https://github.com/fezaoduke/fe-practice-hard/issues/16)
    - [第 16 期(ECMAScript-语法)：浅克隆](https://github.com/fezaoduke/fe-practice-hard/issues/18)
    - [第 23 期(ECMAScript-语法)：字符串对象HTML格式替代方法](https://github.com/fezaoduke/fe-practice-hard/issues/26)
    - [第 34 期(ECMAScript-语法)：js 对象深拷贝](https://github.com/fezaoduke/fe-practice-hard/issues/37)    
    - [第 57 期(ECMAScript-语法)：setTimeout的其他参数](https://github.com/fezaoduke/fe-practice-hard/issues/60)
    - [第 72 期(ECMAScript-语法)：判断整数](https://github.com/fezaoduke/fe-practice-hard/issues/75)
    - [第 73 期(ECMAScript-语法)：Unicode字符与编码互转](https://github.com/fezaoduke/fe-practice-hard/issues/76)
    - [第 76 期(ECMAScript-语法)：如何判断空对象](https://github.com/fezaoduke/fe-practice-hard/issues/79)
  - 上下文环境
    - [第 12 期(2019-05-19)：同名函数的执行](https://github.com/fezaoduke/fe-practice-hard/issues/14)
    - [第 52 期(WECMAScript-上下文环境)：模拟call方法](https://github.com/fezaoduke/fe-practice-hard/issues/55)
    - [第 56 期(WECMAScript-上下文环境)：模拟apply方法](https://github.com/fezaoduke/fe-practice-hard/issues/59)
  - 原型链 继承
    - [第 22 期(ECMAScript-原型链 继承)：实现 Array map](https://github.com/fezaoduke/fe-practice-hard/issues/25)
    - [第 26 期(ECMAScript-原型链 继承)：实现 Array reduce](https://github.com/fezaoduke/fe-practice-hard/issues/29)
    - [第 37 期(ECMAScript-原型链 继承)：原型链的尽头](https://github.com/fezaoduke/fe-practice-hard/issues/40)
  - 作用域 闭包
    - [第 2 期(ECMAScript-作用域 闭包)：定时输出数字](https://github.com/fezaoduke/fe-practice-hard/issues/3)
    - [第 31 期(ECMAScript-作用域 闭包)：模拟ES6 Generator](https://github.com/fezaoduke/fe-practice-hard/issues/34)
  - 正则表达式
    - [第 9 期(ECMAScript-正则表达式)：CSS兼容性验证](https://github.com/fezaoduke/fe-practice-hard/issues/11)
    - [第 27 期(ECMAScript-正则表达式)：金额数值格式化](https://github.com/fezaoduke/fe-practice-hard/issues/30)
  - 严格模式
    - [第 11 期(ECMAScript-严格模式)：arguments与'use strict'](https://github.com/fezaoduke/fe-practice-hard/issues/13)
- #### HTTP 标准
  - 请求过程
    - [第 40 期(HTTP规范-请求过程)：HTTP的方法](https://github.com/fezaoduke/fe-practice-hard/issues/43)
  - 状态码
    - [第 77 期(HTTP 标准-状态码)：HTTP状态码和请求阶段码](https://github.com/fezaoduke/fe-practice-hard/issues/80)
  - 头部信息
  - HTTPS

### 内功 ![](https://raw.githubusercontent.com/fezaoduke/fe-practice-hard/master/assets/images/strength.png)

- #### 设计模式
- #### 算法
  - 搜索
    - [第 3 期(2019-05-10)：无重复字符的最长子串](https://github.com/fezaoduke/fe-practice-hard/issues/4)
    - [第 30 期(算法-搜索)：二分搜索算法](https://github.com/fezaoduke/fe-practice-hard/issues/33)
    - [第 42 期(算法-搜索)：获取多层嵌套对象的目标属性值](https://github.com/fezaoduke/fe-practice-hard/issues/45)
  - 排序
    - [第 1 期(算法-排序)：多重排序](https://github.com/fezaoduke/fe-practice-hard/issues/2)
    - [第 86 期(算法-排序)：经典排序算法之冒泡排序](https://github.com/fezaoduke/fe-practice-hard/issues/89)
    - [第 87 期(算法-排序)：经典排序算法之选择排序](https://github.com/fezaoduke/fe-practice-hard/issues/90)
    - [第 88 期(算法-排序)：经典排序算法之插入排序](https://github.com/fezaoduke/fe-practice-hard/issues/91)
    - [第 89 期(算法-排序)：经典排序算法之计数排序](https://github.com/fezaoduke/fe-practice-hard/issues/92)
    - [第 91 期(算法-排序)：经典排序算法之快速排序](https://github.com/fezaoduke/fe-practice-hard/issues/94)
    - [第 101 期(算法-排序)：根据内容排序数组](https://github.com/fezaoduke/fe-practice-hard/issues/104)
    - [第 118 期(算法-排序)：数组乱序](https://github.com/fezaoduke/fe-practice-hard/issues/121)
  - 递归
    - [第 25 期(算法-递归)：汉诺塔（河内塔）](https://github.com/fezaoduke/fe-practice-hard/issues/28)
    - [第 125 期(算法-递归)：统计子类目数量](https://github.com/fezaoduke/fe-practice-hard/issues/128)
  - 数学
    - [第 8 期(算法-数学)：求斐波那契数前N项](https://github.com/fezaoduke/fe-practice-hard/issues/10)
    - [第 29 期(算法-数学)：抽奖概率算法](https://github.com/fezaoduke/fe-practice-hard/issues/32)
    - [第 82 期(算法-数学)：如何将一张图片完全显示在容器里](https://github.com/fezaoduke/fe-practice-hard/issues/85)
    - [第 85 期(算法-数学)：判断一个数是否为素数（质数）](https://github.com/fezaoduke/fe-practice-hard/issues/88)
- #### 数据结构
  - 队列
    - [第 62 期(数据结构-队列)：队列和队列的模拟](https://github.com/fezaoduke/fe-practice-hard/issues/65)
    - [第 63 期(数据结构-队列)：队列的应用](https://github.com/fezaoduke/fe-practice-hard/issues/66)
  - 栈
    - [第 60 期(数据结构-栈)：栈和栈的模拟](https://github.com/fezaoduke/fe-practice-hard/issues/63)
    - [第 61 期(数据结构-栈)：栈的应用](https://github.com/fezaoduke/fe-practice-hard/issues/64)
  - 树
  - 链表
    - [第 74 期(数据结构-链表)：什么是链表](https://github.com/fezaoduke/fe-practice-hard/issues/77)
    - [第 75 期(数据结构-链表)：单链表的实现](https://github.com/fezaoduke/fe-practice-hard/issues/78)
  - 哈希
    - [第 122 期(数据结构-哈希)：哈希表](https://github.com/fezaoduke/fe-practice-hard/issues/125)
  - 数组
    - [第 15 期(数据结构-数组)：数组去重](https://github.com/fezaoduke/fe-practice-hard/issues/17)
    - [第 48 期(数据结构-数组)：获取字母表](https://github.com/fezaoduke/fe-practice-hard/issues/51)
    - [第 81 期(数据结构-数组)：数组项的互换和移动](https://github.com/fezaoduke/fe-practice-hard/issues/84)
    - [第 95 期(数据结构-数组)：伪数组](https://github.com/fezaoduke/fe-practice-hard/issues/98)
    - [第 110 期(数据结构-数组)：清空数组](https://github.com/fezaoduke/fe-practice-hard/issues/113)
- #### 性能
    - [第 102 期(内功-性能)：节流](https://github.com/fezaoduke/fe-practice-hard/issues/105)
    - [第 103 期(内功-性能)：防抖](https://github.com/fezaoduke/fe-practice-hard/issues/106)

### 招术 ![](https://raw.githubusercontent.com/fezaoduke/fe-practice-hard/master/assets/images/boxing.png)

- 主流框架
    - React
      - [第 49 期(主流框架-React)：生命周期函数](https://github.com/fezaoduke/fe-practice-hard/issues/52)
  - 技巧
    - [第 47 期(技巧)：图片加载器](https://github.com/fezaoduke/fe-practice-hard/issues/50)
    - [第 50 期(技巧)：npm和yarn的命令行](https://github.com/fezaoduke/fe-practice-hard/issues/53)
    - [第 68 期(技巧)：git 时光机(一)](https://github.com/fezaoduke/fe-practice-hard/issues/71)
    - [第 69 期(技巧)：git 时光机(二)](https://github.com/fezaoduke/fe-practice-hard/issues/72)
    - [第 78 期(技巧)：如何优化SPA首屏加载](https://github.com/fezaoduke/fe-practice-hard/issues/81)
    - [第 99 期(技巧)：前端工程师容易犯的一些低级错误](https://github.com/fezaoduke/fe-practice-hard/issues/102)
    - [第 128 期(技巧)：关于logo显示的SEO小技巧](https://github.com/fezaoduke/fe-practice-hard/issues/131)

> 参考资料：[《前端工程师的知识体系》](https://www.cnblogs.com/yoshirogu/p/4174463.html)、[《WEB前端知识体系脑图》](https://www.jianshu.com/p/00baf1e65322)、[《自己总结的web前端知识体系大全》](https://www.cnblogs.com/wangfupeng1988/p/4649709.html)

## 友情赞助商：前端早读课

`前端早读课` 是由知名互联网公司大牛情封（4399 UED/高级主管）开设的前端学习公众号，每天清晨发布前端技术文章，与七万+同行相伴成长。欢迎扫码关注：

![](https://raw.githubusercontent.com/fezaoduke/fe-practice-hard/master/screenshot/official-public-accounts.jpg)

fe-practice-hard

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README