Skip to content

Commit

Permalink
Format all files
Browse files Browse the repository at this point in the history
  • Loading branch information
@yangshun
yangshun committed Mar 24, 2018
1 parent 2942ae3 commit 3539083
Show file tree
Hide file tree
Showing 31 changed files with 2,000 additions and 2,807 deletions.
4 changes: 2 additions & 2 deletions Translations/Chinese/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@

## 这是什么？

与典型的软件工程师面试不同，前端面试对算法的重视比较低。面试会更多考查错综复杂的前端知识，像HTML、CSS、JavaScript等等。
与典型的软件工程师面试不同，前端面试对算法的重视比较低。面试会更多考查错综复杂的前端知识，像 HTML、CSS、JavaScript 等等。

虽然现在有一些资料，可以帮助前端开发者准备面试，但是远不如软件工程师那么丰富。目前为止，最有用的前端面试资料是[前端开发者面试问题集](https://github.com/h5bp/Front-end-Developer-Interview-Questions)。但是，有相当一部分问题，我在网上找不到完整满意的答案。因此，我在这里试着回答这些问题。这是一个开源项目，希望随着社区广泛参与，得到更多的支持。

Expand All @@ -39,7 +39,7 @@

## 相关

如果你对数据结构如何实现感兴趣的话，可以看看[Lago](https://github.com/yangshun/lago)，这是一个数据结构和算法由JavaScript实现的函数库。这个项目仍然在开发中，我计划把它打造成可用于实际生产的函数库，同时，也可以作为了解数据结构和算法的参考资料。
如果你对数据结构如何实现感兴趣的话，可以看看[Lago](https://github.com/yangshun/lago)，这是一个数据结构和算法由 JavaScript 实现的函数库。这个项目仍然在开发中，我计划把它打造成可用于实际生产的函数库，同时，也可以作为了解数据结构和算法的参考资料。

## 参与共建

Expand Down
26 changes: 13 additions & 13 deletions Translations/Chinese/questions/css-questions.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ CSS 的`clear`属性通过使用`left`、`right`、`both`，让该元素向下

```css
.clearfix::after {
content: "";
content: '';
display: block;
clear: both;
}
Expand Down Expand Up @@ -301,7 +301,7 @@ CSS 伪元素是添加到选择器的关键字，去选择元素的特定部分

* `:first-line`和`:first-letter`可以用来修饰文字。
* 上面提到的`.clearfix`方法中，使用`clear: both`来添加不占空间的元素。
* 使用`:before`和`after`展示提示中的三角箭头。鼓励关注点分离，因为三角被视为样式的一部分，而不是真正的 DOM。如果不使用额外的HTML元素，只用CSS样式绘制三角形是不太可能的。
* 使用`:before`和`after`展示提示中的三角箭头。鼓励关注点分离，因为三角被视为样式的一部分，而不是真正的 DOM。如果不使用额外的 HTML 元素，只用 CSS 样式绘制三角形是不太可能的。

###### 参考

Expand All @@ -311,9 +311,9 @@ CSS 伪元素是添加到选择器的关键字，去选择元素的特定部分

### 说说你对盒模型的理解，以及如何告知浏览器使用不同的盒模型渲染布局。

CSS盒模型描述了以文档树中的元素而生成的矩形框，并根据排版模式进行布局。每个盒子都有一个内容区域（例如文本，图像等）以及周围可选的`padding`、`border`和`margin`区域。
CSS 盒模型描述了以文档树中的元素而生成的矩形框，并根据排版模式进行布局。每个盒子都有一个内容区域（例如文本，图像等）以及周围可选的`padding`、`border`和`margin`区域。

CSS盒模型负责计算：
CSS 盒模型负责计算：

* 块级元素占用多少空间。
* 边框是否重叠，边距是否合并。
Expand Down Expand Up @@ -355,14 +355,14 @@ TODO

我把`block`也加入其中，为了获得更好的比较。

| | `block` | `inline-block` | `inline` |
| ------------------------------------ | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 大小 | 填充其父容器的宽度。 | 取决于内容。 | 取决于内容。 |
| 定位 | 从新的一行开始，并且不允许旁边有HTML元素（除非是`float`） | 与其他内容一起流动，并允许旁边有其他元素。 | 与其他内容一起流动，并允许旁边有其他元素。 |
| 能否设置`width`和`height` | 能 | 能 | 不能。 设置会被忽略。 |
| 可以使用`vertical-align`对齐 | 不可以 | 可以 | 可以 |
| 边距（margin）和填充（padding） | 各个方向都存在 | 各个方向都存在 | 只有水平方向存在。垂直方向会被忽略。 尽管`border`和`padding`在`content`周围，但垂直方向上的空间取决于'line-height' |
| 浮动（float） | - | - | 就像一个`block`元素，可以设置垂直边距和填充。 |
| | `block` | `inline-block` | `inline` |
| ------------------------------- | ----------------------------------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------ |
| 大小 | 填充其父容器的宽度。 | 取决于内容。 | 取决于内容。 |
| 定位 | 从新的一行开始，并且不允许旁边有 HTML 元素（除非是`float`） | 与其他内容一起流动，并允许旁边有其他元素。 | 与其他内容一起流动，并允许旁边有其他元素。 |
| 能否设置`width`和`height` | 能 | 能 | 不能。 设置会被忽略。 |
| 可以使用`vertical-align`对齐 | 不可以 | 可以 | 可以 |
| 边距（margin）和填充（padding） | 各个方向都存在 | 各个方向都存在 | 只有水平方向存在。垂直方向会被忽略。 尽管`border`和`padding`在`content`周围，但垂直方向上的空间取决于'line-height' |
| 浮动（float） | - | - | 就像一个`block`元素，可以设置垂直边距和填充。 |

[[↑] 回到顶部](#css-问题)

Expand All @@ -373,7 +373,7 @@ TODO
* `static`：默认定位属性值。该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
* `relative`：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。
* `absolute`：不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
* `fixed`：不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。
* `fixed`：不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。
* `sticky`：盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 `table` 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。`position: sticky` 对 `table` 元素的效果与 `position: relative` 相同。

###### 参考
Expand Down
34 changes: 17 additions & 17 deletions Translations/Chinese/questions/html-questions.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
* [将 HTML5 看作成开放的网络平台，什么是 HTML5 的基本构件（building block）？](#将-html5-看作成开放的网络平台什么是-html5-的基本构件building-block)
* [请描述`cookie`、`sessionStorage`和`localStorage`的区别。](#请描述cookiesessionstorage和localstorage的区别)
* [请描述`<script>`、`<script async>`和`<script defer>`的区别。](#请描述scriptscript-async和script-defer的区别)
* [为什么最好把CSS的`<link>`标签放在`<head></head>`之间？为什么最好把JS的`<script>`标签恰好放在`</body>`之前，有例外情况吗？](#为什么最好把css的link标签放在headhead之间为什么最好把js的script标签恰好放在body之前有例外情况吗)
* [为什么最好把 CSS 的`<link>`标签放在`<head></head>`之间？为什么最好把 JS 的`<script>`标签恰好放在`</body>`之前，有例外情况吗？](#为什么最好把css的link标签放在headhead之间为什么最好把js的script标签恰好放在body之前有例外情况吗)
* [什么是渐进式渲染（progressive rendering）？](#什么是渐进式渲染progressive-rendering)
* [为什么在`<img>`标签中使用`srcset`属性？请描述浏览器遇到该属性后的处理过程。](#为什么在img标签中使用srcset属性请描述浏览器遇到该属性后的处理过程)
* [你有过使用不同模版语言的经历吗？](#你有过使用不同模版语言的经历吗)
Expand Down Expand Up @@ -113,8 +113,8 @@
### 请描述`<script>`、`<script async>`和`<script defer>`的区别。

* `<script>` - HTML 解析中断，脚本被提取并立即执行。执行结束后，HTML 解析继续。
* `<script async>` - 脚本的提取、执行的过程与HTML解析过程并行，脚本执行完毕可能在HTML解析完毕之前。当脚本与页面上其他脚本独立时，可以使用`async`，比如用作页面统计分析。
* `<script defer>` - 脚本仅提取过程与HTML解析过程并行，脚本的执行将在HTML解析完毕后进行。如果有多个含`defer`的脚本，脚本的执行顺序将按照在 document 中出现的位置，从上到下顺序执行。
* `<script async>` - 脚本的提取、执行的过程与 HTML 解析过程并行，脚本执行完毕可能在 HTML 解析完毕之前。当脚本与页面上其他脚本独立时，可以使用`async`，比如用作页面统计分析。
* `<script defer>` - 脚本仅提取过程与 HTML 解析过程并行，脚本的执行将在 HTML 解析完毕后进行。如果有多个含`defer`的脚本，脚本的执行顺序将按照在 document 中出现的位置，从上到下顺序执行。

注意：没有`src`属性的脚本，`async`和`defer`属性会被忽略。

Expand All @@ -126,15 +126,15 @@

[[↑] 回到顶部](#html-问题)

### 为什么最好把CSS的`<link>`标签放在`<head></head>`之间？为什么最好把JS的`<script>`标签恰好放在`</body>`之前，有例外情况吗？
### 为什么最好把 CSS 的`<link>`标签放在`<head></head>`之间？为什么最好把 JS 的`<script>`标签恰好放在`</body>`之前，有例外情况吗？

**把`<link>`放在`<head>`中**

把`<link>`标签放在`<head></head>`之间是规范要求的内容。此外，这种做法可以让页面逐步呈现，提高了用户体验。将样式表放在文档底部附近，会使许多浏览器（包括Internet Explorer）不能逐步呈现页面。一些浏览器会阻止渲染，以避免在页面样式发生变化时，重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容。
把`<link>`标签放在`<head></head>`之间是规范要求的内容。此外，这种做法可以让页面逐步呈现，提高了用户体验。将样式表放在文档底部附近，会使许多浏览器（包括 Internet Explorer）不能逐步呈现页面。一些浏览器会阻止渲染，以避免在页面样式发生变化时，重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容。

**把`<script>`标签恰好放在`</body>`之前**

脚本在下载和执行期间会阻止HTML解析。把`<script>`标签放在底部，保证HTML首先完成解析，将页面尽早呈现给用户。
脚本在下载和执行期间会阻止 HTML 解析。把`<script>`标签放在底部，保证 HTML 首先完成解析，将页面尽早呈现给用户。

例外情况是当你的脚本里包含`document.write()`时。但是现在，`document.write()`不推荐使用。同时，将`<script>`标签放在底部，意味着浏览器不能开始下载脚本，直到整个文档（document）被解析。也许，对此比较好的做法是，`<script>`使用`defer`属性，放在`<head>`中。

Expand All @@ -152,9 +152,9 @@

一些举例：

* 图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript将加载并显示图像。
* 确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的CSS、脚本和内容，然后可以使用延迟加载脚本或监听`DOMContentLoaded`/`load`事件加载其他资源和内容。
* 异步加载HTML片段——当页面通过后台渲染时，把HTML拆分，通过异步请求，分块发送给浏览器。更多相关细节可以在[这里](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/)找到。
* 图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript 将加载并显示图像。
* 确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的 CSS、脚本和内容，然后可以使用延迟加载脚本或监听`DOMContentLoaded`/`load`事件加载其他资源和内容。
* 异步加载 HTML 片段——当页面通过后台渲染时，把 HTML 拆分，通过异步请求，分块发送给浏览器。更多相关细节可以在[这里](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/)找到。

###### 参考

Expand All @@ -173,14 +173,14 @@

所以，有了这些属性，浏览器会：

1. 查看设备宽度
2. 检查sizes列表中哪个媒体条件是第一个为真
3. 查看给予该媒体查询的槽大小
4. 加载srcset列表中引用的最接近所选的槽大小的图像
###### 参考
* https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
1. 查看设备宽度
2. 检查 sizes 列表中哪个媒体条件是第一个为真
3. 查看给予该媒体查询的槽大小
4. 加载 srcset 列表中引用的最接近所选的槽大小的图像

###### 参考

* https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

[[↑] 回到顶部](#html-问题)

Expand Down
Loading

0 comments on commit 3539083

Please sign in to comment.