前端部分知识点补充

HTML语义化

定义

语义化的HTML元素指的是那些使用最恰当的HTML进行标记的内容，在标记构成中并不关心内容显示。语义化的HTML是构建有效网站的基石。
用最恰当的标签来标记内容
例如在页面中需要加入一个标题h1，我们有很多种方式去实现，例如一个p标签用css来规定其样式，使这个p标签看起来像一个h1标签。但是对于浏览器而言，这个标题依旧是文本，而不是标题。
也就是说：语义化的html不会关心渲染样式，去掉css之后结构依然存在。

作用

1. 即使在没有CSS样式的条件下，也能很好地呈现出内容结构、代码结构
2. 使HTML结构变的清晰，有利于维护代码和添加样式
3. 提升搜索引擎优化(SEO)的效果。和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
4. 通常语义化HTML会使代码变的更少，使页面加载更快

搜索引擎优化SEO

定义

搜索引擎优化（search engine optimization）简称SEO，是一种透过了解搜索引擎的运作规则来调整网站，以提高目的网站在有关搜索引擎内排名的方式

1. 简化代码结构，更利于搜索引擎分析抓取有用内容
2. 每个页面只能出现一次H1标签，H2标签可以多次：H1权重很高，普遍认为仅次于title，一般资讯详情页的标题、商品详情页的标题，都放在H1里。
3. 图片一定要添加alt属性，title属性可选，爬虫不认识图片上的内容，只能通过alt属性来判断
4. 做好404页面，一般会加首页链接及错误提示，并测试其返回状态码为404：
   1. 用户体验友好，可以留住用户，不至于直接关闭页面；
   2. 有利于爬虫抓取，可以返回抓取其他页面。
5. 网站结构呈扁平状树型，目录结构不宜过深，每个页面离首页最多点击不超过3次，过深不利于搜索引擎的抓取。
6. 结构元素语义化
7. 利用meta标签 keywords属性

减少页面加载时间的方法

• 尽量减少页面中重复的HTTP请求数量
• css样式的定义放置在文件头部
• Javascript脚本放在文件末尾
• 压缩合并Javascript、CSS代码
• 使用浏览器缓存，设置e-tag和control-cache，last-modified-date
• 使用事件委托，减少DOM操作

SVG和Canvas的优缺点

SVG

• 优点

1. 矢量图，不依赖于像素，无限放大后不会失真。

2. 以dom的形式表示，事件绑定由浏览器直接分发到节点上。

• 缺点

3. dom形式，涉及到动画时候需要更新dom，性能较低。

Canvas

• 优点

4. 定制型更强，可以绘制绘制自己想要的东西。

5. 非dom结构形式，用JavaScript进行绘制，涉及到动画性能较高。

• 缺点

6. 事件分发由canvas处理，绘制的内容的事件需要自己做处理。

7. 依赖于像素，无法高效保真，画布较大时候性能较低。

src和href的区别

src是source的缩写，指向外部资源的位置，表示引用资源，替换当前元素，用在img，script，iframe上。在请求src资源的时候，会将其指向的资源下载并应用到当前文档。
href是指超文本引用，用在link和a标签上，href是引用，和页面相关联，在当前元素和引用资源之间建立联系。

DOM 事件有哪些阶段？

1. 事件捕获阶段
   事件从文档的根节点触发，随着dom树的结构向事件目标节点流去。途中经过各个层次的dom节点，并在各节点上触发捕获事件，直到到达目标节点。捕获阶段的任务就是建立这个事件传递路线（以便后面冒泡阶段顺着这条路线返回 Window）
2. 处于目标阶段
   当事件不断的传递到目标节点的时候，最终在目标节点上触发这个事件，就是目标阶段
3. 事件冒泡阶段
   事件从发生事件所在节点，逐级传播到较为不具体的节点。
   总的来说就是事件一开始从文档的根节点流向目标对象，然后在目标对象上被触发，之后再回溯到文档的根节点。
   阻止冒泡：防止事件冒泡带来的不必要的错误和困扰，使用 stopPropagation()

优雅降级和渐进增强

优雅降级是指刚开始就构建完整的功能，然后再针对低版本浏览器进行兼容；

渐进增强是指针对低版本浏览器构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能，以达到更好的用户体验。

严格模式 use strict

use strict是一种ECMAscript 5 添加的（严格）运行模式,这种模式使得 Javascript 在更严格的条件下运行,使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。
全局变量的显示声明,函数必须声明在顶层，不允许在非函数代码块内声明函数,arguments.callee也不允许使用；
消除代码运行的一些不安全之处，保证代码运行的安全,限制函数中的arguments修改，严格模式下的eval函数的行为和非严格模式的也不相同;
提高编译器效率，增加运行速度；
为未来新版本的Javascript标准化做铺垫。

JS数组方法

• join()

将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符，该方法只接收一个参数：即分隔符。

• push()和pop()

push():可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。
pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。

• shift() 和 unshift()
  shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。
  unshift():将参数添加到原数组开头，并返回数组的长度 。
• sort()
  按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。
• reverse()
  反转数组项的顺序
• concat()
  将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本
• slice()
  返回从原数组中指定开始下标到结束下标之间的项组成的新数组。
• splice()
  可以实现删除、插入和替换
• indexOf()和 lastIndexOf() （ES5新增）
  indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的开头（位置 0）开始向后查找。
  lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的末尾开始向前查找。
• forEach() （ES5新增）
  forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数。
• map() （ES5新增）
  指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
• filter() （ES5新增）
  filter()：“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。
• every() （ES5新增）

判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true

• some() （ES5新增）
  判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。
• reduce()和 reduceRight() （ES5新增）
  两者都会迭代数组的所有项，然后构建一个最终返回的值
  reduce()方法从数组的第一项开始，逐个遍历到最后。而 reduceRight()则从数组的最后一项开始，向前遍历到第一项。接收两个参数：函数和基础的初始值。函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。

js 字符串方法

1. toLowerCase(): 把字符串转为小写，返回新的字符串。

2. toUpperCase(): 把字符串转为大写，返回新的字符串。

3. charAt(): 返回指定下标位置的字符。如果index不在0-str.length(不包含str.length)之间，返回空字符串。

4. charCodeAt(): 返回指定下标位置的字符的unicode编码,这个返回值是 0 - 65535 之间的整数。如果index不在0-str.length(不包含str.length)之间，返回NaN。

5. indexOf(): 返回某个指定的子字符串在字符串中第一次出现的位置

6. lastIndexOf(): 返回某个指定的子字符串在字符串中最后出现的位置。

7. slice(): 返回字符串中提取的子字符串。

8. substring(): 提取字符串中介于两个指定下标之间的字符

9. substr(): 返回从指定下标开始指定长度的的子字符串

10. split(): 把字符串分割成字符串数组。

11. replace(): 在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

12. match(): 返回所有查找的关键字内容的数组。

js对象方法

• Object.assign()
  将所有可枚举的自身属性的值从一个或多个源对象复制到目标对象。
• Object.create()

用指定的原型对象和属性创建一个新对象。

• Object.defineProperty()

将给定描述符描述的命名属性添加到对象。

• Object.defineProperties()

将给定描述符描述的命名属性添加到对象。

• Object.values()

返回一个数组，该数组包含与给定对象自己的所有可枚举字符串属性相对应的值。

• Object.setPrototypeOf()

设置对象的原型（其内部[[Prototype]]属性）

• Object.keys()

返回一个数组，其中包含给定对象自己的所有可枚举字符串属性的名称。

• Object.is()

判断两个值是否是相同的值

Object.is(0, -0);            // false
Object.is(-0, -0);           // true
Object.is(NaN, 0/0);         // true