mirror
/
front-end-interview-handbook
mirror of https://github.com/yangshun/front-end-interview-handbook.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

qns(quiz): fix zh-CN translations Markdown errors

This commit is contained in:
Yangshun 2023-05-10 09:48:11 +08:00
parent 3150e75e87
commit 362e2abbcd
4 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/zh-CN.mdx
View File

@ -5,9 +5,9 @@ subtitle: 您是否知道任何例外情况？
简而言之， 这种CSS `<link>` 和 JavaScript `<script>` 的放置可以更快地呈现页面和更好的整体性能。
## 将<link>` 放置在`<head> \` 中
## 将`<link>` 放置在`<head> ` 中
将<link>` 放入`<head>`是建立一个优化网站的正确规范的一部分。 当页面首次加载时，HTML和CSS同时解析； HTML 创建DOM (文档对象模型) ， CSS 创建CSSOM (CSS 对象模型)。 两者都需要在网站中创建视觉效果，以优化 "首次有意义的绘制 "时机。 将 CSS `<link>` 放入`<head>\`中确保了样式表已加载并准备在浏览器开始渲染页面时使用。
将`<link>` 放入`<head>`是建立一个优化网站的正确规范的一部分。 当页面首次加载时，HTML和CSS同时解析； HTML 创建DOM (文档对象模型) ， CSS 创建CSSOM (CSS 对象模型)。 两者都需要在网站中创建视觉效果，以优化 "首次有意义的绘制 "时机。 将 CSS `<link>` 放入`<head>`中确保了样式表已加载并准备在浏览器开始渲染页面时使用。
这种渐进式渲染是网站在其性能评分中衡量的一个指标。 将样式表放在文档的底部是禁止在许多浏览器中进行渐进式渲染的原因。 某些浏览器阻止渲染以避免在其样式改变时需要重新刷新页面元素。 然后，用户会被卡住，面对一个空白页面。 其它时候可能会有无样式内容的闪烁(FOUC)，它会显示一个没有应用样式的网页。

6
packages/quiz/questions/describe-the-difference-between-script-async-and-script-defer/zh-CN.mdx
View File

@ -2,15 +2,15 @@
title: 描述`<script>`、`<script async>`和`<script defer> `之间的差异
---
<script> 标签用于在网页上包含 JavaScript 。 "async" 和 `defer` 属性用于更改脚本加载和执行的方式/时机。
`<script>` 标签用于在网页上包含 JavaScript 。 "async" 和 `defer` 属性用于更改脚本加载和执行的方式/时机。
## 普通`<script>`
对于普通的<script>标签，在遇到它们时没有任何`async` 或 `defer`。 HTML解析被阻止，脚本会被下载并立即执行。 脚本执行后HTML解析恢复。
对于普通的`<script>`标签，在遇到它们时没有任何`async` 或 `defer`。 HTML解析被阻止，脚本会被下载并立即执行。 脚本执行后HTML解析恢复。
## `<script async>`
在"<script async>"中，脚本将与HTML解析并行获取，并在其可用时立即执行（可能在HTML解析完成之前），而且不一定按照HTML文档中的顺序执行。 当脚本独立于页面上的任何其他脚本时使用 "async" ，比如分析。
在`<script async>`中，脚本将与HTML解析并行获取，并在其可用时立即执行（可能在HTML解析完成之前），而且不一定按照HTML文档中的顺序执行。 当脚本独立于页面上的任何其他脚本时使用 `async` ，比如分析。
## `<script defer>`

2
packages/quiz/questions/what-is-progressive-rendering/zh-CN.mdx
View File

@ -10,7 +10,7 @@ title: 什么是渐进式渲染？
页面上的图像没有一次性全部加载。 只有当用户滚动到/靠近显示图像的页面部分时才加载图像。
- <img loading="lazy">是指示浏览器推迟加载屏幕外图像直到用户滚动附近的现代方法。
- `<img loading="lazy">`是指示浏览器推迟加载屏幕外图像直到用户滚动附近的现代方法。
- 使用 JavaScript 监听滚动位置，并在图像即将进入屏幕时加载图像(通过将图像坐标与滚动位置进行比较)。
## 优先考虑可见内容（或正面渲染）。

2
packages/quiz/questions/whats-the-difference-between-an-attribute-and-a-property/zh-CN.mdx
View File

@ -2,7 +2,7 @@
title: '"attribute" 和 "property" 之间有什么区别？'
---
"attribute"定义在 HTML 标记上，但"property"定义在 DOM 上。 为了说明不同之处，请想象我们在HTML中有这个Input：<input type="text" value="Hello">\`.
"attribute"定义在 HTML 标记上，但"property"定义在 DOM 上。 为了说明不同之处，请想象我们在HTML中有这个Input：`<input type="text" value="Hello">`.
```js
const input = document.querySelector('input');