-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
578 lines (412 loc) · 32 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 6.0.0">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
<link rel="mask-icon" href="/images/logo.svg" color="#222">
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
<script id="hexo-configurations">
var NexT = window.NexT || {};
var CONFIG = {"hostname":"jplay.github.io","root":"/","scheme":"Pisces","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}};
</script>
<meta property="og:type" content="website">
<meta property="og:title" content="JPlay">
<meta property="og:url" content="https://jplay.github.io/index.html">
<meta property="og:site_name" content="JPlay">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="JPlay">
<meta property="article:tag" content="JPlay, Blogs">
<meta name="twitter:card" content="summary">
<link rel="canonical" href="https://jplay.github.io/">
<script id="page-configurations">
// https://hexo.io/docs/variables.html
CONFIG.page = {
sidebar: "",
isHome : true,
isPost : false,
lang : 'zh-cn'
};
</script>
<title>JPlay</title>
<noscript>
<style>
.use-motion .brand,
.use-motion .menu-item,
.sidebar-inner,
.use-motion .post-block,
.use-motion .pagination,
.use-motion .comments,
.use-motion .post-header,
.use-motion .post-body,
.use-motion .collection-header { opacity: initial; }
.use-motion .site-title,
.use-motion .site-subtitle {
opacity: initial;
top: initial;
}
.use-motion .logo-line-before i { left: initial; }
.use-motion .logo-line-after i { right: initial; }
</style>
</noscript>
</head>
<body itemscope itemtype="http://schema.org/WebPage">
<div class="container use-motion">
<div class="headband"></div>
<header class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-brand-container">
<div class="site-nav-toggle">
<div class="toggle" aria-label="Toggle navigation bar">
<span class="toggle-line toggle-line-first"></span>
<span class="toggle-line toggle-line-middle"></span>
<span class="toggle-line toggle-line-last"></span>
</div>
</div>
<div class="site-meta">
<a href="/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<h1 class="site-title">JPlay</h1>
<span class="logo-line-after"><i></i></span>
</a>
</div>
<div class="site-nav-right">
<div class="toggle popup-trigger">
</div>
</div>
</div>
<nav class="site-nav">
<ul id="menu" class="main-menu menu">
<li class="menu-item menu-item-home">
<a href="/" rel="section"><i class="fa fa-home fa-fw"></i>Home</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>Archives</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="back-to-top">
<i class="fa fa-arrow-up"></i>
<span>0%</span>
</div>
<main class="main">
<div class="main-inner">
<div class="content-wrap">
<div class="content index posts-expand">
<article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-cn">
<link itemprop="mainEntityOfPage" href="https://jplay.github.io/2022/05/26/%E4%B8%AD%E7%9A%84%E5%83%8F%E7%B4%A0%E5%AF%B9%E9%BD%90/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="JPlay">
<meta itemprop="description" content="">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="JPlay">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2022/05/26/%E4%B8%AD%E7%9A%84%E5%83%8F%E7%B4%A0%E5%AF%B9%E9%BD%90/" class="post-title-link" itemprop="url">聊聊 iOS 中的像素对齐</a>
</h2>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time title="Created: 2022-05-26 16:16:39" itemprop="dateCreated datePublished" datetime="2022-05-26T16:16:39+08:00">2022-05-26</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar-check"></i>
</span>
<span class="post-meta-item-text">Edited on</span>
<time title="Modified: 2022-05-27 09:57:41" itemprop="dateModified" datetime="2022-05-27T09:57:41+08:00">2022-05-27</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="点和像素"><a href="#点和像素" class="headerlink" title="点和像素"></a>点和像素</h2><p>在 iOS 开发中，我们布局一个 UIView 和 CoreGraphics 绘制内容的时候，使用的单位是点（Point, 缩写 pt），而屏幕上的显示单位是像素（Pixel, 缩写 px）。<br>点和像素的换算规则取决于屏幕的精细程度（PPI：屏幕上每英寸可以显示的像素点的数量），比如：</p>
<ul>
<li>iPhone 3GS 中一点等于一像素</li>
<li>iPhone 4 中一点等于两像素</li>
<li>iPhone 6 Plus 中一点等于三像素</li>
</ul>
<p>这个比例值我们可以通过 <code>CGFloat screenScale = [UIScreen mainScreen].scale</code> 获取 。</p>
<h2 id="什么是像素对齐"><a href="#什么是像素对齐" class="headerlink" title="什么是像素对齐"></a>什么是像素对齐</h2><p>通常我们指定一个 UIView 的 frame 会采用整数，由于点是像素的整数倍，所以这里像素是对齐的。<br>但是有的时候我们的 frame 是通过计算出来的，就会出现小数，这个小数乘以 screenScale 得出的数值可能不是整数，这就是像素不对齐。<br>还有一种特殊的像素不对齐，是使用 CoreGraphics 绘制内容时特有的，后面会详细说明。</p>
<h2 id="UIView-的像素对齐"><a href="#UIView-的像素对齐" class="headerlink" title="UIView 的像素对齐"></a>UIView 的像素对齐</h2><h3 id="UILabel-的试验"><a href="#UILabel-的试验" class="headerlink" title="UILabel 的试验"></a>UILabel 的试验</h3><p>我们设置一个 UILabel ：</p>
<figure class="highlight objc"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">UILabel</span> *label = [[<span class="built_in">UILabel</span> alloc] init];</span><br><span class="line">label.text = <span class="string">@"UIView 的像素不对齐"</span>;</span><br><span class="line">label.frame = <span class="built_in">CGRectMake</span>(<span class="number">100</span>, <span class="number">100</span>, <span class="number">300</span>, <span class="number">500.001</span>);</span><br><span class="line">[<span class="keyword">self</span>.view addSubview:label];</span><br></pre></td></tr></table></figure>
<p>通过 iPhone 13 Pro Max 的模拟器打开，在模拟器菜单中打开 Debug - Color Misaligned Images 选项，你会发现这个 UILabel 的背景变成黄色：<br><img src="https://s2.loli.net/2022/05/26/IF2YBUJfPpvAhnX.png" width=400 />这是因为系统发现了 500.001 是一个像素不对齐的高度，将它标记它为黄色。<br>同样的，(100.1, 100, 300, 500)，(100, 100.1, 300, 500) 都会有问题。<br>修正为 (100, 100, 300, 500) 就没问题了。<br>还有 (100, 100, 300, 500.33333) 也是没问题的，因为 500.33333 * 3 = 1501 是整数。<br>神奇的是，(100, 100, 300.1, 500) 是没问题的，猜测是 UILabel 的自动宽度导致（没有验证）。</p>
<h3 id="不对齐会怎么样"><a href="#不对齐会怎么样" class="headerlink" title="不对齐会怎么样"></a>不对齐会怎么样</h3><p>有同学可能会问，对齐不对齐会有什么问题呢？好像也没什么影响，看起来上面的 UILable 也显示很正常。<br>我们采用「像素眼」来看看：(100, 100, 300, 500) vs (100, 100, 300, 500.1)<br><img src="https://s2.loli.net/2022/05/26/gui8JOQDmr4YW7s.png">很明显，右边指定的高度高，渲染的时候需要多填充一个像素，而填充内容是一些半透明的像素，主观来说就是「右边糊了」。</p>
<p>再看：(100, 100, 300, 500) vs (100.1, 100, 300, 500)<br><img src="https://s2.loli.net/2022/05/26/NCdGsUxbWRi43QI.png">这对比就更加夸张了，各种细节不一样，这是 x 处于像素点的中间位置，结果引发了更多抗锯齿来补充过渡颜色。</p>
<h3 id="为什么会糊"><a href="#为什么会糊" class="headerlink" title="为什么会糊"></a>为什么会糊</h3><p>让我们再进一步调查一下为什么会糊？<br>之前有个普遍猜想，当我们设置 x 为 100.1 或者 100.9 的时候，系统会自动帮我们取整数像素单位来显示，这对吗？<br>对的，但是跟我们想的可能有点不一样。<br>我们来对比一下 (100.1, 100, 300, 500) vs (100.9, 100, 300, 500)：<br><img src="https://s2.loli.net/2022/05/26/vJ7abZMVSXmRlfh.png" width=400 /> 我们可以很显著的发现，最左边那条竖线的颜色不一致，这是为什么呢？<br>先用苹果官方的话来解释一下：<br><img src="https://s2.loli.net/2022/05/26/x3ufVHeiWANzQjy.png">简单理解一下就是，<strong>如果你非得从 0.5 像素的位置开始画线，系统也会帮你画，只是会触发抗锯齿（antialiasing），也就是会帮你把半个像素补齐到一个像素</strong>。</p>
<p>补齐规则是什么呢？<br>苹果没说，我根据试验结论猜测一下：根据<strong>该像素的占用面积的比例乘上原始颜色渲染出一个新的像素</strong>，比如苹果这个示例中就是 0.5 * 黑色，得出一个灰色。<br>结合上述论证与猜想，可以推测出上面文字 100.1 vs 100.9 竖线颜色不一的问题了。<br><img src="https://s2.loli.net/2022/05/26/bDFTLwPx1WG2XlS.png">根据我们前面的推测，100.1 占了 90% 像素面积，于是就是 90% 颜色深度，而 100.9 占了 10% 像素面积，也就是 10% 颜色深度。<br>所以，肉眼可见 100.1 比 100.9 深了许多。</p>
<h3 id="其他视图"><a href="#其他视图" class="headerlink" title="其他视图"></a>其他视图</h3><p>如果去尝试其他视图的情况，可以发现 UIImageView，UIButton 只要设置了图片或文字，都会有上述情况。<br>一个 UIView 只设置了背景颜色，那么像素不对齐也不会有什么问题。但是，用 CoreGraphics 画上一条蓝线，就会出现问题了。<br><img src="https://s2.loli.net/2022/05/26/FArqwfJEseNhdgR.png">所以得出结论：<strong>UIView 在有内容的情况下，像素不对齐就会触发抗锯齿，就会导致模糊现象。如果没有内容，只是设置了背景色则不会有问题。</strong></p>
<h2 id="CoreGraphics-的像素对齐"><a href="#CoreGraphics-的像素对齐" class="headerlink" title="CoreGraphics 的像素对齐"></a>CoreGraphics 的像素对齐</h2><p>CoreGraphics 的像素对齐问题，又是什么情况呢？<br>假设我们用 CoreGraphics 在 (3, 0 ) 到 (3, 5) 画一条一像素宽的线时，这条线会落在哪里？<br>让我们魔改一下苹果的原图，会更好理解：<br><img src="https://s2.loli.net/2022/05/26/UPa8hnF3i7rl4Vg.png" width=400 /> 很明显，一倍屏的情况下，是在第三个点（point）上左右平分半个像素。<br>半个像素，是不是想起了什么？没错，触发了抗锯齿，于是你的一像素黑线变成了二像素灰线。<br>怎么解决呢？有两个方法：</p>
<ol>
<li>向左或向右移动半个像素，在不同屏幕下通用公式是： ±(1 / screenScale / 2)</li>
<li>把线的宽度补齐到两个像素，这样你会获得一条两个像素的黑线</li>
</ol>
<p>推广一下：<strong>使用 CoreGraphics 绘制奇数像素宽/高度线的时候，像素不对齐，会触发抗锯齿，导致模糊。</strong></p>
<p>注意，偶数宽/高度的情况下，因为绘制内容会均匀地落在坐标两边的像素点中，不需要也不能去做奇数时的处理方案。<br>再来魔改一下苹果的图，方便大家理解偶数的情况：<br><img src="https://s2.loli.net/2022/05/26/pLQhZSEP4k8NoJY.png" width=400 />最终还有一个点容易搞错，CoreGraphics 绘制问题不要运用到 UIView 体系中。<br>因为 CoreGraphics 画线的时候在宽度上是没有方向性的，所以在 x 点画一条线的时候，是以 x 为中线，左右平均分配线宽。<br>而 UIView 在布局的时候是有坐标系的，当我们指定一个 (3, 0, 1, 10) 的矩形框的时候（一倍屏），可以准确地在 3 像素开始向右边画出一个一像素宽的矩形（也就是一像素线）。</p>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>所以，再次提炼一下「像素对齐」：当我们绘制视图时，应该让内容填满像素格。否则会触发了抗锯齿，可能导致内容模糊。</p>
<h2 id="参考文档"><a href="#参考文档" class="headerlink" title="参考文档"></a>参考文档</h2><p><em><a target="_blank" rel="noopener" href="https://developer.apple.com/library/archive/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/GraphicsDrawingOverview/GraphicsDrawingOverview.html">iOS Drawing Concepts</a><br><a target="_blank" rel="noopener" href="https://www.cnblogs.com/smileevday/p/ios_pixelvspoint.html">iOS 绘制1像素的线</a><br><a target="_blank" rel="noopener" href="https://www.jianshu.com/p/432fea0232b8">iOS优化：解决iOS中像素不对齐问题</a><br><a target="_blank" rel="noopener" href="https://www.jianshu.com/p/38cf9c170141">iOS Color Misaligned Images优化</a><br><a target="_blank" rel="noopener" href="https://alistra.ghost.io/2014/10/01/aligned-uiviews/">Aligned UIViews</a></em></p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-cn">
<link itemprop="mainEntityOfPage" href="https://jplay.github.io/2022/02/04/%E9%87%8D%E6%96%B0%E5%BC%80%E5%A7%8B%E5%AD%A6%E4%B9%A0%E8%AE%A1%E7%AE%97%E6%9C%BA/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="JPlay">
<meta itemprop="description" content="">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="JPlay">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2022/02/04/%E9%87%8D%E6%96%B0%E5%BC%80%E5%A7%8B%E5%AD%A6%E4%B9%A0%E8%AE%A1%E7%AE%97%E6%9C%BA/" class="post-title-link" itemprop="url">重新开始学习计算机</a>
</h2>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time title="Created: 2022-02-04 21:40:08" itemprop="dateCreated datePublished" datetime="2022-02-04T21:40:08+08:00">2022-02-04</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar-check"></i>
</span>
<span class="post-meta-item-text">Edited on</span>
<time title="Modified: 2022-02-05 01:09:09" itemprop="dateModified" datetime="2022-02-05T01:09:09+08:00">2022-02-05</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-folder"></i>
</span>
<span class="post-meta-item-text">In</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/%E5%AD%A6%E4%B9%A0/" itemprop="url" rel="index"><span itemprop="name">学习</span></a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h3 id="思考"><a href="#思考" class="headerlink" title="思考"></a>思考</h3><p>年初离开美图公司，进入了一段比较自由的工作时期。<br>略微松弛之后，反而有了慌张的感觉，开始有空思考之前担忧的两个职业问题：</p>
<ul>
<li>35岁之后竞争力何在？</li>
<li>作为 iOS 开发者，苹果不行了，该怎么办？</li>
</ul>
<p>其实之前，我有一些自以为是的应对之道：</p>
<ul>
<li>35岁就该有35岁开发者该具备的技能，35岁还是25岁的水平，活该被淘汰。</li>
<li>苹果的平台就算被淘汰，也应该是被一个全新的平台淘汰，那我们就是转型新平台最容易的一批人。</li>
</ul>
<p>仔细想想，以上应对都建立在一个核心能力上：拥有扎实的基础知识。<br>基础知识可以帮助我解决深度问题，也就是初级开发者解决不了的问题。<br>基础知识可以让我在不同平台开发中轻松切换，不局限于开发语言，或者平台特性。</p>
<h3 id="基础知识"><a href="#基础知识" class="headerlink" title="基础知识"></a>基础知识</h3><p>基础知识其实是一个很宽泛的概念，该怎么定义呢？<br>我的答案是，尽量不考虑具体平台特性，从代码到机器运行的每个过程：</p>
<ul>
<li>设计模式</li>
<li>从高级语言编写，到编译、汇编、链接成为机器码的过程</li>
<li>数据结构与算法</li>
<li>操作系统</li>
<li>计算机组成原理</li>
<li>基础硬件知识</li>
<li>简单的数字电路知识</li>
</ul>
<p>还有很多我没罗列到的，比如网络知识。但是，我想暂时只考虑我感兴趣的。</p>
<p>接下来是我今年学习的课程：</p>
<h3 id="Crash-Course-Computer-Science-概览计算机科学"><a href="#Crash-Course-Computer-Science-概览计算机科学" class="headerlink" title="Crash Course Computer Science - 概览计算机科学"></a>Crash Course Computer Science - 概览计算机科学</h3><ul>
<li>难度：⭐</li>
<li>耗时：20天左右</li>
<li>获取方式：<a target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=tpIctyqH29Q&list=PLH2l6uzC4UEW0s7-KewFLBC1D0l6XRfye">油管原版</a> <a target="_blank" rel="noopener" href="https://www.bilibili.com/video/BV1EW411u7th">B站中文版</a> </li>
<li>概述：该课程非常适合快速预览计算机基础知识，可以从中选取感兴趣的方面，再做深入了解。也可以快速帮我回顾计算机的发展史。</li>
<li>学习情况：很轻松地学完了整个课程。</li>
</ul>
<h3 id="清华的操作系统原理-了解操作系统"><a href="#清华的操作系统原理-了解操作系统" class="headerlink" title="清华的操作系统原理 - 了解操作系统"></a>清华的操作系统原理 - 了解操作系统</h3><ul>
<li>难度：⭐⭐</li>
<li>耗时：40天左右</li>
<li>获取方式：<a target="_blank" rel="noopener" href="https://www.bilibili.com/video/BV1uW411f72n?spm_id_from=333.999.0.0">B站</a> </li>
<li>概述：该课程非常细致的讲述了操作系统的方方面面，内容总体较为浅显易懂，很适合普通开发者作为入门。</li>
<li>学习情况：较为正常地学完了整个课程，其中有一些逻辑推演需要反复学习，特别是多线程相关。</li>
</ul>
<h3 id="操作系统实战45讲-深入操作系统"><a href="#操作系统实战45讲-深入操作系统" class="headerlink" title="操作系统实战45讲 - 深入操作系统"></a>操作系统实战45讲 - 深入操作系统</h3><ul>
<li>难度：⭐⭐⭐⭐⭐</li>
<li>耗时：???（还没学完）</li>
<li>获取方式：<a target="_blank" rel="noopener" href="http://gk.link/a/117HO">极客时间</a> </li>
<li>概述：该课程非常深入地介绍了怎么开发一个操作系统，难度很高。</li>
<li>学习情况：目前还没学完。为了学习该课程，我不得不去补充很多相关知识，比如操作系统基础知识，部分硬件基础知识。</li>
</ul>
<h3 id="数据结构与算法之美-重拾数据结构与算法"><a href="#数据结构与算法之美-重拾数据结构与算法" class="headerlink" title="数据结构与算法之美 - 重拾数据结构与算法"></a>数据结构与算法之美 - 重拾数据结构与算法</h3><ul>
<li>难度：⭐⭐⭐</li>
<li>耗时：40天左右</li>
<li>获取方式：<a target="_blank" rel="noopener" href="http://gk.link/a/117HR">极客时间</a> </li>
<li>概述：该课程非常详细地介绍了常用的数据结构与算法。理论结合例子，再匹配上课程中非常好的逻辑分析，让我觉得算法也没那么难了。最难得的是，将数据结构和算法的关联性反复推演，让我理解了为什么两者是密不可分的，是很好的数据结构与算法入门课程。</li>
<li>学习情况：有一定难度，其中有一些算法推演需要反复学习，有部分不常用且难懂的算法只做了解没有完全掌握。只写了一个课后作业，课后作业基本上靠自己思考，再对答案。</li>
</ul>
<h3 id="设计模式之美-重拾设计模式"><a href="#设计模式之美-重拾设计模式" class="headerlink" title="设计模式之美 - 重拾设计模式"></a>设计模式之美 - 重拾设计模式</h3><ul>
<li>难度：⭐⭐⭐⭐</li>
<li>耗时：40天左右</li>
<li>获取方式：<a target="_blank" rel="noopener" href="http://gk.link/a/117HZ">极客时间</a> </li>
<li>概述：该课程不像市面上流通的设计模式介绍课程，不仅仅是介绍，还是通过实战演练，层层深入设计模式的内核。结合了一些源码作为例子，深入剖析了常用的设计模式。比之于招式，该课程更像内功。</li>
<li>学习情况：有一定难度，许多章节需要反复学习。课后作业基本上靠自己思考，再对答案。</li>
</ul>
<h3 id="编程前你最好了解的基本硬件和计算机基础知识第一季-了解模拟电路"><a href="#编程前你最好了解的基本硬件和计算机基础知识第一季-了解模拟电路" class="headerlink" title="编程前你最好了解的基本硬件和计算机基础知识第一季 - 了解模拟电路"></a>编程前你最好了解的基本硬件和计算机基础知识第一季 - 了解模拟电路</h3><ul>
<li>难度：⭐⭐⭐</li>
<li>耗时：10天左右</li>
<li>获取方式：<a target="_blank" rel="noopener" href="https://www.bilibili.com/video/BV1774114798?spm_id_from=333.999.0.0">B站</a> </li>
<li>概述：该课程以非常生动有趣的方式讲了模拟电路，非常适合作为入门课程。</li>
<li>学习情况：内容本身有一定难度，但是课程非常好，把学习曲线打平了。</li>
</ul>
<h3 id="编程前你最好了解的基本硬件和计算机基础知识第二季-了解数字电路"><a href="#编程前你最好了解的基本硬件和计算机基础知识第二季-了解数字电路" class="headerlink" title="编程前你最好了解的基本硬件和计算机基础知识第二季 - 了解数字电路"></a>编程前你最好了解的基本硬件和计算机基础知识第二季 - 了解数字电路</h3><ul>
<li>难度：⭐⭐⭐</li>
<li>耗时：10天左右</li>
<li>获取方式：<a target="_blank" rel="noopener" href="https://www.bilibili.com/video/BV1Hi4y1t7zY?spm_id_from=333.999.0.0">B站</a> </li>
<li>概述：该课程以非常生动有趣的方式讲了数字电路，非常适合作为入门课程。</li>
<li>学习情况：内容本身有一定难度，但是课程非常好，把学习曲线打平了。</li>
</ul>
<h3 id="从0到1设计一台计算机-概述计算机组成原理"><a href="#从0到1设计一台计算机-概述计算机组成原理" class="headerlink" title="从0到1设计一台计算机 - 概述计算机组成原理"></a>从0到1设计一台计算机 - 概述计算机组成原理</h3><ul>
<li>难度：⭐⭐⭐</li>
<li>耗时：10天左右</li>
<li>获取方式：<a target="_blank" rel="noopener" href="https://www.bilibili.com/video/BV1wi4y157D3?spm_id_from=333.999.0.0">B站</a> </li>
<li>概述：该课程以非常生动有趣的方式讲了怎么做一台计算机，也可以算组成原理的入门。</li>
<li>学习情况：内容本身有一定难度，但是课程非常好，把学习曲线打平了。</li>
</ul>
<h3 id="小码哥教育周末汇编班-入门汇编"><a href="#小码哥教育周末汇编班-入门汇编" class="headerlink" title="小码哥教育周末汇编班 - 入门汇编"></a>小码哥教育周末汇编班 - 入门汇编</h3><ul>
<li>难度：⭐⭐⭐</li>
<li>耗时：40天左右</li>
<li>获取方式：<a target="_blank" rel="noopener" href="https://b23.tv/siEfelI">B站</a> （不是完全版本，完全版请自行搜索）</li>
<li>概述：该课程非常非常细致，有时候略显啰嗦地讲了汇编基础内容。从 x86 汇编讲起，扩展到了多个架构的汇编特性。</li>
<li>学习情况：作者靠极其细致的讲解，强行打平了汇编学习的陡峭曲线，是很好的汇编入门课程。</li>
</ul>
<h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><p>内容方面。以上课程，都是我认为很好的，好在几个方面：</p>
<ul>
<li>内容言之有物。</li>
<li>结合了实际生产环境。</li>
<li>概念推理的时候，往往会先抛出一个粗浅但简单的方案，再逐步去完善。</li>
</ul>
<p>平台方面：</p>
<ul>
<li>B站真是一个好平台，提供了大量优质且免费的内容。</li>
<li>极客时间的大部分课程内容不错，但是有部分课程注水了，最好认真试读完再购买。</li>
<li>小码哥教育有许多围绕 iOS 开发相关的课程，可以挑选部分课程作为内容补充，方便 iOS 开发入门基础课程，比如汇编。</li>
</ul>
<p>时间方面：<br>二娃之后，我没有多少业余时间，基本上靠着每天遛娃的时间听音频完成学习，需要看图或者看代码的地方，就掏出手机看一眼。一开始还很不习惯，后面慢慢渐入佳境，竟然也习惯了这种学习模式，每到遛娃的时候，竟然也有点兴奋。当然，很多需要敲代码的地方就没办法跟着操作了，自然效果是打折扣的。不过，再怎么样也算是在慢慢进步。</p>
<p>希望新的一年，也可以持续进步💪🏻</p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
</div>
<script>
window.addEventListener('tabs:register', () => {
let { activeClass } = CONFIG.comments;
if (CONFIG.comments.storage) {
activeClass = localStorage.getItem('comments_active') || activeClass;
}
if (activeClass) {
let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
if (activeTab) {
activeTab.click();
}
}
});
if (CONFIG.comments.storage) {
window.addEventListener('tabs:click', event => {
if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
let commentClass = event.target.classList[1];
localStorage.setItem('comments_active', commentClass);
});
}
</script>
</div>
<div class="toggle sidebar-toggle">
<span class="toggle-line toggle-line-first"></span>
<span class="toggle-line toggle-line-middle"></span>
<span class="toggle-line toggle-line-last"></span>
</div>
<aside class="sidebar">
<div class="sidebar-inner">
<ul class="sidebar-nav motion-element">
<li class="sidebar-nav-toc">
Table of Contents
</li>
<li class="sidebar-nav-overview">
Overview
</li>
</ul>
<!--noindex-->
<div class="post-toc-wrap sidebar-panel">
</div>
<!--/noindex-->
<div class="site-overview-wrap sidebar-panel">
<div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
<p class="site-author-name" itemprop="name">JPlay</p>
<div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
<nav class="site-state">
<div class="site-state-item site-state-posts">
<a href="/archives/">
<span class="site-state-item-count">2</span>
<span class="site-state-item-name">posts</span>
</a>
</div>
<div class="site-state-item site-state-categories">
<span class="site-state-item-count">1</span>
<span class="site-state-item-name">categories</span>
</div>
<div class="site-state-item site-state-tags">
<span class="site-state-item-count">1</span>
<span class="site-state-item-name">tags</span>
</div>
</nav>
</div>
<div class="links-of-author motion-element">
<span class="links-of-author-item">
<a href="https://github.com/JPlay" title="GitHub → https://github.com/JPlay" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
</span>
<span class="links-of-author-item">
<a href="mailto:[email protected]" title="E-Mail → mailto:[email protected]" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
</span>
</div>
</div>
</div>
</aside>
<div id="sidebar-dimmer"></div>
</div>
</main>
<footer class="footer">
<div class="footer-inner">
<div class="copyright">
©
<span itemprop="copyrightYear">2022</span>
<span class="with-love">
<i class="fa fa-heart"></i>
</span>
<span class="author" itemprop="copyrightHolder">JPlay</span>
</div>
<div class="powered-by">Powered by <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://pisces.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Pisces</a>
</div>
</div>
</footer>
</div>
<script src="/lib/anime.min.js"></script>
<script src="/lib/velocity/velocity.min.js"></script>
<script src="/lib/velocity/velocity.ui.min.js"></script>
<script src="/js/utils.js"></script>
<script src="/js/motion.js"></script>
<script src="/js/schemes/pisces.js"></script>
<script src="/js/next-boot.js"></script>
</body>
</html>