Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AutoCorrect files/zh-cn/learn/{l,p,s,t}* #6109

Merged
merged 3 commits into from
Jun 7, 2022
Merged

AutoCorrect files/zh-cn/learn/{l,p,s,t}* #6109

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f8e1365
AutoCorrect files/zh-cn/learn/{l,p,s,t}*
huacnlee Jun 4, 2022
fff8205
Update files/zh-cn/learn/server-side/express_nodejs/displaying_data/b…
yin1999 Jun 7, 2022
6cabd77
Merge branch 'main' into fix-095-3
yin1999 Jun 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions files/zh-cn/learn/learning_and_getting_help/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ <h3 id="不同的学习方法">不同的学习方法</h3>
<ol>
<li>知道如何使用工具 A 解决问题 A。</li>
<li>知道如何用工具 B 解决问题 B。</li>
<li>不知道如何解决问题 C 。</li>
<li>不知道如何解决问题 C。</li>
</ol>

<p>假设您一直专注于问题 C，然后感到沮丧，因为您无法思考如何解决它。但是，在散步获得新鲜空气后，你可能会发现，当你的头脑徘徊，你突然使工具 A 和工具 B 之间的连接，并意识到你可以使用它们一起解决问题 C！它并不总是这么简单，但它也令人惊讶的是多少次，这确实发生了。这也凸显了在电脑前学习时定期休息的重要性。</p>
Expand All @@ -44,7 +44,7 @@ <h3 id="不同的学习材料">不同的学习材料</h3>

<h4 id="文本文章">文本文章</h4>

<p>你会发现很多书面文章在网上教你有关网页设计。例如，像本课程的多数课程一样。有些文章将是教程，教你某种技术或重要概念（如"学习如何创建视频播放器"或"学习CSS框模型"），有些文章将是参考材料，允许您查找您可能忘记的细节（如"CSS属性的语法是什么"？<code>background</code></p>
<p>你会发现很多书面文章在网上教你有关网页设计。例如，像本课程的多数课程一样。有些文章将是教程，教你某种技术或重要概念（如"学习如何创建视频播放器"或"学习 CSS 框模型"），有些文章将是参考材料，允许您查找您可能忘记的细节（如"CSS 属性的语法是什么"？<code>background</code></p>

<p>MDN Web 文档对这两种类型都非常好 - 您当前位于的区域非常适合学习技术和概念，我们还有几个巨大的参考部分，允许您查找任何您不记得的语法。</p>

Expand All @@ -60,7 +60,7 @@ <h4 id="Videos">视频资料</h4>

<h4 id="Interactive_code_playgrounds">交互式的代码演练场</h4>

<p>你可能是那种喜欢简单指令的人，更喜欢直接开始操纵代码。这也是一种合理的方法，一些学习网站倾向于采用这种方法。例如像 <a href="https://www.codecademy.com/">Codecademy</a> 这类网站中, 教程主要由交互式代码编辑器组成，您必须直接编写代码并查看是否达到了预期的结果。</p>
<p>你可能是那种喜欢简单指令的人，更喜欢直接开始操纵代码。这也是一种合理的方法，一些学习网站倾向于采用这种方法。例如像 <a href="https://www.codecademy.com/">Codecademy</a> 这类网站中，教程主要由交互式代码编辑器组成，您必须直接编写代码并查看是否达到了预期的结果。</p>

<p>许多 MDN Web 文档参考页面中也提供了交互式的示例，您可以在其中更改代码，并查看实时结果的变化。在你的计算机上或者在像 <a href="https://jsbin.com/?html,css,js,output">JSBin</a>、<a href="https://codepen.io/">Codepen</a> 或 <a href="https://glitch.com/">Glitch</a> 这样的在线代码编辑器中创建自己的代码示例也是可以的。事实上，当你在学习时，你会被要求去做这些事情本身就是属于课堂的一部分！</p>

Expand Down Expand Up @@ -122,7 +122,7 @@ <h4 id="How_many_hours_per_week_do_I_need_to_dedicate">我每周需要投入多

<p>一旦你知道你需要做什么，以及你认为需要多长时间，你就可以开始写一个计划来实现你的目标。它可以简单到：</p>

<p>“我需要花 500 个小时来学习我需要知道的东西，我有一年的时间来学习。如果我假设有两周的假期，我打算每周为此学习 10 个小时(在晚上和周末有空的时候)，所以我会这样安排时间。”</p>
<p>“我需要花 500 个小时来学习我需要知道的东西，我有一年的时间来学习。如果我假设有两周的假期，我打算每周为此学习 10 个小时 (在晚上和周末有空的时候)，所以我会这样安排时间。”</p>

<p>当然，你能在这上面花多少时间取决于你的情况。如果你在学校，那么你有比其他有工作和孩子要养活的人地情况更多的空闲时间。如果不是，实现目标仍然是可能的，但你必须现实清楚地知道实现目标最快需要多长。</p>

Expand All @@ -148,9 +148,9 @@ <h3 id="Staying_motivated">保持动力</h3>
<ul>
<li><strong>尽量让你的工作环境更有效率</strong>。找一张舒适的办公桌椅，确保你有足够的光线看清楚你在做什么，并尽量提供有助于你集中注意力的东西（如柔和的音乐、香水，任何你需要的东西）。不要试图在一个分心的房间里工作——比如开着电视，朋友们在看足球！另外，把手机放在房间外——大多数人都会被手机分心，所以你应该把它放在其他地方。
</li>
<li><strong>定期休息</strong>。 不间断地工作几个小时对你的动力不好，尤其是当你发现工作很难或遇到问题时。这只会导致沮丧。通常最好休息一下，四处走动一会儿，然后在回去工作之前喝一杯咖啡或者饮料放松。正如我们之前所说，你在这段时间里所做的分散式学习通常可以帮助你找到解决你所面临问题的方法。长时间不休息也会对身体有害；盯着显示器看太久会伤害你的眼睛，久坐不动会对你的背部或腿部有害。我们建议每小时到90分钟这个区间内后休息15分钟。</li>
<li><strong>定期休息</strong>。不间断地工作几个小时对你的动力不好，尤其是当你发现工作很难或遇到问题时。这只会导致沮丧。通常最好休息一下，四处走动一会儿，然后在回去工作之前喝一杯咖啡或者饮料放松。正如我们之前所说，你在这段时间里所做的分散式学习通常可以帮助你找到解决你所面临问题的方法。长时间不休息也会对身体有害；盯着显示器看太久会伤害你的眼睛，久坐不动会对你的背部或腿部有害。我们建议每小时到 90 分钟这个区间内后休息 15 分钟。</li>
<li><strong>吃饭、锻炼和睡觉</strong>。健康饮食，经常锻炼，确保充足的睡眠。这听起来很明显，但当你真正开始编码时，很容易忘记。将这些基本要素纳入你的时间表，确保你除此之外没有安排更多的学习时间。</li>
<li><strong>奖励你自己</strong>。可以肯定的一点: <em>拼命工作而不娱乐会使你沉闷</em>。你应该尝试在每一次的学习之后安排一些有趣的事情，前提是你必须在完成学习任务之后。例如，如果你真的喜欢玩游戏，那么说“除非我完成了 5 个小时的学习，否则今晚不要玩游戏”是很有激励作用的。现在你只需要意志力。希望一些顺利。</li>
<li><strong>奖励你自己</strong>。可以肯定的一点：<em>拼命工作而不娱乐会使你沉闷</em>。你应该尝试在每一次的学习之后安排一些有趣的事情，前提是你必须在完成学习任务之后。例如，如果你真的喜欢玩游戏，那么说“除非我完成了 5 个小时的学习，否则今晚不要玩游戏”是很有激励作用的。现在你只需要意志力。希望一些顺利。</li>
<li><strong>共同学习和演示</strong>。这不是每个人的选择，但如果可能的话，试着和其他人一起学习。再说一次，如果你正在上一门关于网络开发的大学课程，这会更容易，但也许你可以说服一个朋友和你一起学习，或者找一个当地的聚会或技能分享小组？有人与你讨论想法并寻求帮助真的很有用，也很激励人，你还应该花时间向你的朋友展示你做了什么小样作品。那些感激的喊声会激励你前进。</li>
</ul>

Expand Down Expand Up @@ -191,7 +191,7 @@ <h4 id="Learn_and_recognize_the_patterns">学习并认知模式</h4>

<p>正如我们之前所说，web 设计/编程主要是关于问题解决和模式。一旦你写下了你需要做什么来解决一个特定的问题，你就可以开始弄清楚用什么技术特性来解决它了。例如，专业的 web 开发人员已经创建了很多水平导航菜单，所以他们会立即开始考虑这样的解决方案：</p>

<p>创建一个水平导航栏菜单经常利用到列表，比如: </p>
<p>创建一个水平导航栏菜单经常利用到列表，比如：</p>

<pre class="brush: html notranslate">&lt;ul&gt;
&lt;li&gt;First menu item&lt;/li&gt;
Expand All @@ -207,7 +207,7 @@ <h4 id="Learn_and_recognize_the_patterns">学习并认知模式</h4>
display: flex;
}</pre>

<p>接着删除不必要的间距和要点， 我们可以这样做：</p>
<p>接着删除不必要的间距和要点，我们可以这样做：</p>

<pre class="brush: css notranslate">ul {
list-style-type: none;
Expand All @@ -220,7 +220,7 @@ <h4 id="Learn_and_recognize_the_patterns">学习并认知模式</h4>

<p>当你找到这些问题的解决方案时，写下你所做的事情，并在某个文件目录中保留一些少量的代码示例，这样你就可以回顾以前的工作了。</p>

<p>另外， 网络上有 <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">开发者工具</a>，它使您可以查看用在 web 上构建任何网站的代码。如果你手头没有解决方案，一个好的研究方法是在网络某处地方找到具有类似功能的网站，并找出它们是如何做到的。</p>
<p>另外，网络上有 <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">开发者工具</a>，它使您可以查看用在 web 上构建任何网站的代码。如果你手头没有解决方案，一个好的研究方法是在网络某处地方找到具有类似功能的网站，并找出它们是如何做到的。</p>

<div class="blockIndicator note">
<p><strong>注</strong>: 请注意，上面我们讨论了我们首先要解决的问题，然后是用来解决这个问题的技术。这几乎总是最好的方法--不要从一个你看起来很酷但陌生的新技术开始，然后试着把它塞进用例中。</p>
Expand Down Expand Up @@ -251,7 +251,7 @@ <h3 dir="ltr" id="Effective_web_searches">高效的网络搜索</h3>
<ul dir="ltr">
<li>如果你想了解更多关于响应式网页设计的信息，你可以搜索”响应式网页设计”。</li>
<li>如果你想了解更多关于某项特定技术功能的信息，像 HTML 元素，CSS 属性，或者 JavaScript 方法，你应该直接搜索功能的名称。<code>&lt;video&gt;</code><code>background-color</code><code>opacity</code><code>Date.setTime()</code></li>
<li>如果您正在寻找一些更具体的信息，您可以添加其他关键字作为补充，例如 "&lt;video&gt; element autoplay attribute"， 或者 "Date.setTime parameters"。</li>
<li>如果您正在寻找一些更具体的信息，您可以添加其他关键字作为补充，例如 "&lt;video&gt; element autoplay attribute"，或者 "Date.setTime parameters"。</li>
</ul>

<p dir="ltr">如果你想搜索一些没有那么明显的专业术语的东西，你需要考虑最有可能搜索到想要的东西是什么。</p>
Expand Down Expand Up @@ -285,11 +285,11 @@ <h3 dir="ltr" id="Using_MDN">使用 MDN</h3>

<p dir="ltr">在 MDN 的这一部分中，我们提供了关于 web 开发基础知识的大部分问题的答案。如果你陷入困境，最好重新阅读相关文章，看看你是否遗漏了什么。</p>

<p dir="ltr">如果你不确定该读哪篇文章，那么尝试在 MDN 中搜索一些相关的关键字（如上所述），或者尝试一般的网络搜索。要在 MDN 上搜索，你可以使用网站内置的搜索功能，或者使用你最喜欢的搜索引擎，在搜索词前面加上 “MDN”。例如，“mdn responsive web design“ 或者 ”mdn background-color“。</p>
<p dir="ltr">如果你不确定该读哪篇文章，那么尝试在 MDN 中搜索一些相关的关键字（如上所述），或者尝试一般的网络搜索。要在 MDN 上搜索，你可以使用网站内置的搜索功能，或者使用你最喜欢的搜索引擎，在搜索词前面加上“MDN”。例如，“mdn responsive web design“或者”mdn background-color“。</p>

<h3 dir="ltr" id="Other_online_resources">其他在线资源</h3>

<p>我们在之前已经提到了 Stack Overflow， 但在这里还有其他在线资源可以提供帮助。</p>
<p>我们在之前已经提到了 Stack Overflow，但在这里还有其他在线资源可以提供帮助。</p>

<p>找到一个社区是件好事，如果你试图帮助别人回答他们的问题，也可以自己在上面提出问题，你会得到很多尊重。其他好论坛包括：</p>

Expand Down
12 changes: 6 additions & 6 deletions files/zh-cn/learn/performance/css/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,21 @@
slug: Learn/Performance/CSS
translation_of: Learn/Performance/CSS
---
<p>页面在样式没有渲染完毕的情况下被绘制，在样式渲染完毕后又被刷新，这大概是很糟糕的用户体验。因此，除非浏览器知道当前不需要 该 CSS，否则 该 CSS将阻止渲染。浏览器只会在下载 CSS 和构建 CSSOM之后绘制页面。浏览器遵循特定的渲染路径：绘制 paint 仅在布局 layout之后进行，布局 layout 则在创建渲染树 render tree 之后进行，创建渲染树则需要在DOM和CSSOM 树解析完成后进行。为了优化CSSOM的构造，请删除不必要的样式，对 CSS 进行最小化，压缩和缓存，并将页面加载时不需要的CSS拆分为其他文件，以减少CSS渲染阻塞。</p>
<p>页面在样式没有渲染完毕的情况下被绘制，在样式渲染完毕后又被刷新，这大概是很糟糕的用户体验。因此，除非浏览器知道当前不需要 该 CSS，否则 该 CSS 将阻止渲染。浏览器只会在下载 CSS 和构建 CSSOM 之后绘制页面。浏览器遵循特定的渲染路径：绘制 paint 仅在布局 layout 之后进行，布局 layout 则在创建渲染树 render tree 之后进行，创建渲染树则需要在 DOM 和 CSSOM 树解析完成后进行。为了优化 CSSOM 的构造，请删除不必要的样式，对 CSS 进行最小化，压缩和缓存，并将页面加载时不需要的 CSS 拆分为其他文件，以减少 CSS 渲染阻塞。</p>

<h3 id="阻塞渲染优化">阻塞渲染优化</h3>

<p>CSS 可以使用媒体查询将样式应用在特定条件下。媒体查询对于响应式 Web 设计非常重要，可以帮助我们优化关键渲染路径。浏览器会阻塞渲染，直到它解析完全部的样式，但不会阻塞渲染它认为不会使用的样式，例如打印样式表。通过基于媒体查询将CSS分成多个文件，可以防止在下载未使用的CSS期间阻止渲染。为了创建非阻塞 CSS 链接，将不会立即使用的样式（例如打印样式）移动到单独的文件中，将 <code><a href="/en-US/docs/Web/HTML/Element/link">&lt;link&gt;</a></code> 添加到 HTML 中，并添加媒体查询，在这种情况下说明它是打印样式表。</p>
<p>CSS 可以使用媒体查询将样式应用在特定条件下。媒体查询对于响应式 Web 设计非常重要，可以帮助我们优化关键渲染路径。浏览器会阻塞渲染，直到它解析完全部的样式，但不会阻塞渲染它认为不会使用的样式，例如打印样式表。通过基于媒体查询将 CSS 分成多个文件，可以防止在下载未使用的 CSS 期间阻止渲染。为了创建非阻塞 CSS 链接，将不会立即使用的样式（例如打印样式）移动到单独的文件中，将 <code><a href="/en-US/docs/Web/HTML/Element/link">&lt;link&gt;</a></code> 添加到 HTML 中，并添加媒体查询，在这种情况下说明它是打印样式表。</p>

<pre class="brush: html">&lt;link rel="stylesheet" href="styles.css"&gt; &lt;!-- blocking --&gt;
&lt;link rel="stylesheet" href="print.css" media="print"&gt; &lt;!-- not blocking --&gt;
&lt;link rel="stylesheet" href="mobile.css" media="screen and (max-width: 480px)"&gt; &lt;!-- not blocking on large screens --&gt;</pre>

<p>默认情况下，浏览器假设每个指定的样式表都是阻塞渲染的。通过添加 media属性附加媒体查询，告诉浏览器何时应用样式表。当浏览器看到一个它知道只会用于特定场景的样式表时，它仍会下载样式，但不会阻塞渲染。通过将 CSS 分成多个文件，主要的 阻塞渲染 文件（本例中为 <code>styles.css</code>）的大小变得更小，从而减少了渲染被阻塞的时间。</p>
<p>默认情况下，浏览器假设每个指定的样式表都是阻塞渲染的。通过添加 media 属性附加媒体查询，告诉浏览器何时应用样式表。当浏览器看到一个它知道只会用于特定场景的样式表时，它仍会下载样式，但不会阻塞渲染。通过将 CSS 分成多个文件，主要的 阻塞渲染 文件（本例中为 <code>styles.css</code>）的大小变得更小，从而减少了渲染被阻塞的时间。</p>

<h3 id="在GPU_上呈现动画">在GPU 上呈现动画</h3>
<h3 id="在GPU_上呈现动画">在 GPU 上呈现动画</h3>

<p>浏览器针对处理CSS动画和不会很好地触发重排（因此也导致重新绘制）的动画属性进行了优化。为了提高性能，可以将被动画化的节点从主线程移到GPU上。将导致合成的属性包括 3D transforms (<code><a href="/en-US/docs/Web/CSS/transform">transform: translateZ()</a></code>, <code><a href="/en-US/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code>，etc.)，animating transform 和 <code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code>, <code><a href="/en-US/docs/Web/CSS/position">position: fixed</a></code>，<code><a href="/en-US/docs/Web/CSS/will-change">will-change</a></code>，和 <code><a href="/en-US/docs/Web/CSS/filter">filter</a></code>。一些元素，例如 <code><a href="/en-US/docs/Web/HTML/Element/video">&lt;video&gt;</a></code>, <code><a href="/en-US/docs/Web/HTML/Element/canvas">&lt;canvas&gt;</a></code> 和 <code><a href="/en-US/docs/Web/HTML/Element/iframe">&lt;iframe&gt;</a></code>，也位于各自的图层上。 将元素提升为图层（也称为合成）时，动画转换属性将在GPU中完成，从而改善性能，尤其是在移动设备上。</p>
<p>浏览器针对处理 CSS 动画和不会很好地触发重排（因此也导致重新绘制）的动画属性进行了优化。为了提高性能，可以将被动画化的节点从主线程移到 GPU 上。将导致合成的属性包括 3D transforms (<code><a href="/en-US/docs/Web/CSS/transform">transform: translateZ()</a></code>, <code><a href="/en-US/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code>，etc.)，animating transform 和 <code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code>, <code><a href="/en-US/docs/Web/CSS/position">position: fixed</a></code>，<code><a href="/en-US/docs/Web/CSS/will-change">will-change</a></code>，和 <code><a href="/en-US/docs/Web/CSS/filter">filter</a></code>。一些元素，例如 <code><a href="/en-US/docs/Web/HTML/Element/video">&lt;video&gt;</a></code>, <code><a href="/en-US/docs/Web/HTML/Element/canvas">&lt;canvas&gt;</a></code> 和 <code><a href="/en-US/docs/Web/HTML/Element/iframe">&lt;iframe&gt;</a></code>，也位于各自的图层上。 将元素提升为图层（也称为合成）时，动画转换属性将在 GPU 中完成，从而改善性能，尤其是在移动设备上。</p>

<h3 id="will-change_属性"><code>will-change</code> 属性</h3>

Expand All @@ -39,4 +39,4 @@ <h3 id="font-display_属性"><code>font-display</code> 属性</h3>

<h3 id="contain_属性"><code>contain</code> 属性</h3>

<p>CSS的 <code>contain</code>属性允许作者指示元素及其内容尽可能独立于文档树的其余部分。 这允许浏览器针对DOM的有限区域而不是整个页面重新计算布局，样式，绘画，大小或它们的任意组合。</p>
<p>CSS 的 <code>contain</code>属性允许作者指示元素及其内容尽可能独立于文档树的其余部分。这允许浏览器针对 DOM 的有限区域而不是整个页面重新计算布局，样式，绘画，大小或它们的任意组合。</p>
Loading