最前端

Appearance

语义化 ​

什么是语义化？就是用合理、正确的标签来展示内容，比如 h1~h6 定义标题。

好处：

  • 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构
  • 有利于 SEO，搜索引擎根据标签来确定上下文和各个关键字的权重
  • 方便其他设备解析，如盲人阅读器根据语义渲染网页
  • 有利于开发和维护，语义化更具可读性，代码更好维护，与 CSS3 关系更和谐

Html5 新标签新特性 ​

语义标签：

  • <hrader></header>： 定义了文档的头部区域
  • <footer></footer>： 定义了文档的尾部区域
  • <nav></nav> 定义文档的导航
  • <section></section>：定义文档中的节（section、区段）
  • <article></article>：定义页面独立的内容区域
  • <aside></aside>：定义页面的侧边栏内容
  • <detailes></detailes>：用于描述文档或文档某个部分的细节
  • <summary></summary>：标签包含 details 元素的标题
  • <dialog></dialog>：定义对话框，比如提示框
  • ...

增强型表单：

  1. 新增的 type 属性值

    • email: <input type="email"> 输入邮箱格式
    • tel: <input type="tel"> 输入手机号码格式
    • url: <input type="url"> 输入url格式
    • number: <input type="number"> 输入数字格式
    • search: <input type="search"> 搜索框（体现语义化）
    • range: <input type="range"> 自由拖动滑块
    • time: <input type="time"> 选择一个时间
    • date: <input type="date"> 从一个日期选择器选择一个日期
    • month: <input type="month"> 选择一个月份
    • week: <input type="week"> 选择周和年

  2. 新增的表单属性

    • placehoder：占位符，提供可描述输入字段预期值的提示信息
    • required：是一个 boolean 属性，要求填写的输入域不能为空
    • pattern：描述了一个正则表达式用于验证 <input> 元素的值
    • min, max：设置元素最小值与最大值
    • multiple：多文件上传
    • autofocus：是一个 boolean 属性，规定在页面加载时，域自动地获得焦点
    • autocomplete：规定表单是否应该启用自动完成功能
    • accesskey：规定激活（使元素获得焦点）元素的快捷键

多媒体标签：

  • embed：定义嵌入的内容
  • audio：播放音频
  • video：播放视频

Canvas 绘图：

基本使用方法：

html
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

<script>
　　var c = document.getElementById("myCanvas");
　　var ctx = c.getContext("2d");
　　ctx.fillStyle = "#FF0000";
　　ctx.fillRect(0, 0, 150, 75);
</script>

SVG 绘图：

SVG 是指可伸缩的矢量图形。

与 Canvas 的区别：

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

地理定位 API：

window.navigator.geolocation {
    getCurrentPosition:  fn  用于获取当前的位置数据
    watchPosition: fn  监视用户位置的改变
    clearWatch: fn  清除定位监视
}

拖拽 API

Web Worker

Web Storage

WebSocket

input 和 textarea 的区别 ​

input:

  • 要表现为文本框，需设置 type="text"
  • 单行文本框
  • 通过 size 属性指定文本框中能够显示的字符数
  • 通过 value 特性，可以设置文本框的初始值
  • 通过 maxlength 特性指定文本框可以接收的最大字符数

textarea:

  • 始终呈现为一个多行文本框
  • 可以使用 rows, cols 设置文本框大小（rows 指定的是文本框的字符行数；cols 指定文本框的字符列数）
  • <textarea> 的初始值必须要放在 <textarea> 和 </textarea> 之间
  • <textarea> 无 maxlength 属性

无论这两种文本框在标记中有什么区别，但它们都回将用户输入的内容保存在 value 属性中。可以通过这个属性读取和设置文本框的值，如下面的例子所示：

javascript
var textbox = documnet.getElementsByTagName("textarea").value;
textbox.value = "some new value";

用一个 div 模拟 textarea 的实现 ​

<textarea> 标签定义一个多行的文本输入控件。但是它不能像 div 一样随着内容增加而自动增加，一言不合就出现滚动条，于是为了更好的交互，部分业务场景下可能需要我们使用 div 来模拟 textarea 的实现：

html
<div contenteditable="true">
    <!-- 此处省略 -->
</div>
css
div {
    width: 400px;
    min-height: 100px;
    max-height: 300px;
    padding: 3px;
    outline: 0;
    border: 1px solid #a0b3d6;
    font-size: 12px;
    word-wrap: break-word;
    overflow-y: auto; /* 超过最大高度就出现滚动条 */
}

利用这一方法，我们还可以实现很多 textarea 无法实现的功能，比如在 textarea 里设置局部字体的颜色、字体大小等等，可以说我们实现了一个能够识别 html 代码的 textarea。

移动设备忽略将页面中的数字识别为电话号码的方法 ​

html
<meta name="format-detection" content="telephone=no" />

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

把 <link> 放在 <head> 中：

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

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

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

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

什么是渐进式渲染（progressive rendering）？ ​

渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。

在以前互联网带宽较小的时期，这种技术更为普遍。如今，移动终端的盛行，而移动网络往往不稳定，渐进式渲染在现代前端开发中仍然有用武之地。

一些举例：

  • 图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript 将加载并显示图像
  • 确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的 CSS、脚本和内容，然后可以使用延迟加载脚本或监听 DOMContentLoaded/load 事件加载其他资源和内容
  • 异步加载 HTML 片段 —— 当页面通过后台渲染时，把 HTML 拆分，通过异步请求，分块发送给浏览器

iframe 框架有那些优缺点 ​

优点：

  • iframe 能够原封不动的把嵌入的网页展现出来
  • 如果有多个网页引用 iframe，那么你只需要修改 iframe 的内容，就可以实现调用的每一个页面内容的更改，方便快捷
  • 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用 iframe 来嵌套，可以增加代码的可重用
  • 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由 iframe 来解决

缺点：

  • 搜索引擎的爬虫程序无法解读这种页面
  • 框架结构中出现各种滚动条
  • 使用框架结构时，保证设置正确的导航链接
  • iframe 页面会增加服务器的 http 请求

DOM 和 BOM 有什么区别 ​

DOM

  • Document Object Model，文档对象模型
  • DOM 是为了操作文档出现的 API，document 是其的一个对象
  • DOM 和文档有关，这里的文档指的是网页，也就是 html 文档。DOM 和浏览器无关，他关注的是网页本身的内容

BOM

  • Browser Object Model，浏览器对象模型
  • BOM 是为了操作浏览器出现的 API，window 是其的一个对象
  • window 对象既为 javascript 访问浏览器提供 API，同时在 ECMAScript 中充当 Global 对象

Doctype 有什么作用 ​

doctype 是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义（DTD）来解析文档。

声明是用来指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。声明必须是 HTML 文档的第一行，位于 html 标签之前。

浏览器本身分为两种模式，一种是标准模式，一种是怪异模式，浏览器通过 doctype 来区分这两种模式，doctype 在 html 中的作用就是触发浏览器的标准模式，如果 html 中省略了 doctype，浏览器就会进入到 Quirks 模式的怪异状态，在这种模式下，有些样式会和标准模式存在差异，而 html 标准和 dom 标准值规定了标准模式下的行为，没有对怪异模式做出规定，因此不同浏览器在怪异模式下的处理也是不同的，所以一定要在 html 开头使用 doctype。

href 和 src 区别 ​

href:

href 标识超文本引用，用在 link 和 a 等元素上，href 是引用和页面关联，是在当前元素和引用资源之间建立联系。

若在文档中添加 href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。

src:

src 表示引用资源，替换当前元素，用在 img, script, iframe 上，src 是页面内容不可缺少的一部分。

当浏览器解析到 src，会暂停其他资源的下载和处理（图片不会暂停其他资源下载），直到将该资源加载、编译、执行完毕，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

addEventListener 第三个参数是什么？ ​

  • useCapture
  • option:
    • capture: true 表示在捕获阶段触发
    • once: true 表示只调用一次
    • passive: true 表示 listener 永远不会调用 preventDefault()

Element 和 Node 的区别？ ​

Node 是一个基类，DOM 中的 Element, Text 和 Comment 都继承于它。

换句话说，Element，Text 和 Comment 是三种特殊的 Node，它们分别叫做ELEMENT_NODE, TEXT_NODE 和 COMMENT_NODE。