前端必知必会知识点汇总Part 2

时间 2019-11-08

标签前端必会知识汇总繁體版

原文原文链接

9.JavaScript脚本加载defer与async特性

JavaScript代码的执行会阻塞页面的解析渲染以及其余资源的下载javascript
script标签的位置：html

传统全部script元素都放在head元素中，必须等到所有js代码都被下载、解析、执行完毕后，才能开始呈现网页的内容（浏览器在遇到标签时才开始呈现内容），这在须要不少js代码的页面来讲，会形成浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口将是一片空白。所以。通常把script标签放在标签前面。java
defer&async：数组
- 除IE9如下，其余浏览器不支持内部脚本defer属性，IE10+才支持async特性，opera mini不支持async特性，另外，async是不支持内部脚本的。
- defer="defer"和async="true/false"
- 没有defer或async，浏览器会当即加载并执行指定的JS脚本，也就是说，不等待后续载入的文档元素，读到JS脚本就加载并执行。
- 有async，加载后续文档元素的过程将和JS的加载与执行并行进行（异步）。
- 有defer，加载后续文档元素的过程将和JS的加载并行进行（异步），但JS的执行要在全部文档元素解析完成以后，DOMContentLoaded 事件触发以前完成。
共同点浏览器
- 不会阻塞文档元素的加载。
- 使用这两个属性的脚本中不能调用document.write方法。指定异步脚本的目的是不让页面解析来等待脚本的下载和执行，从而异步加载页面其余内容，所以，建议异步脚本不要在加载期间修改DOM。
- 容许不定义属性值，仅仅使用属性名。
- 只适用于外部脚本（IE9如下支持，可是把延迟脚本放在页面底部仍然是最佳选择）
不一样点缓存
- async让浏览器能并行下载脚本且不阻塞浏览器的文档解析和渲染，下载完成后脚本当即执行，可能无序执行，取决于下载完成的时间。必定会在window.onload以前执行，但可能在document的DOMContentLoaded以前或以后执行。
- defer使得浏览器能延迟脚本的下载，等document文档载入和解析完成后，按照他们在文档中出现顺序再去下载解析。也就是说defer属性的script就相似于将script放在body底部的效果，会在document的DOMContentLoaded事件以前执行。

不支持async的浏览器能够动态建立script，经过window.onload方法确保页面加载完毕再将script标签插入到DOM中。实现脚本的异步载入和执行。服务器

window.onload = function(){
  var script = document.createElement('script');
  script.setAttribute("type","text/javascript");
  script.src = url;
  document.body.appendChild(script);
}
复制代码

10.判断一个对象是否为空

ES6的Object.keys()方法cookie

var data = {};
var arr = Object.keys(data);
console.log(arr.length == 0);// true
复制代码

Object.getOwnPropertyNames()方法网络

var data = {};
var arr = Object.getOwnPropertyNames(data);
console.log(arr.length == 0);// true
复制代码

JSON.stringify()app

var data = {};
var result = (JSON.stringify(data) == "{}");
console.log(result);// true
复制代码

for in遍历

var data = {};
var result = function() {
  for(var key in data) {
    return false;
  }
  return true;
}
alert(result);// true
复制代码

11.事件处理机制和事件委托

事件流：指从页面中接收事件的顺序，有冒泡流和捕获流。
DOM2级事件流：事件捕获阶段、处于目标阶段、事件冒泡阶段

假设定义的事件绑定在图中div上，实际的div元素在捕获阶段不会接收到事件，意味着在捕获阶段，事件从document到

后就中止了。下一个阶段是“处于目标阶段”，因而事件在div上发生，并在事件处理中被当作是冒泡阶段的一部分。最后，冒泡阶段发生，事件又传播回文档。
DOM2级事件处理程序：

addEventListener(eventName,handlers,boolean)和removeEventListener(),两个方法都同样接收三个参数,要处理的事件名,第二个是事件处理程序函数,第三个值为布尔值。布尔值是true,表示在捕获阶段调用事件处理程序。false时表示在事件冒泡阶段调用事件处理程序,通常建议在冒泡阶段使用,特殊状况才在捕获阶段。

经过addEventListener()添加的事件处理程序只能用removeEventListener()来移除，而且须要参数彻底一致，好比参数都是同一个函数的引用。
事件对象：

事件被触发时，会默认给事件处理程序传入一个参数e , 表示事件对象。在事件处理程序内部，对象this始终等于currentTarget的值，target包含事件的实际目标。（e.currentTarget === this）
- preventDefault() 阻止事件的默认行为
- event.stopPropagation()能够阻止事件的传播.,取消进一步的事件冒泡或者捕获
事件委托：
- 利用事件冒泡，只在外层父元素指定一个事件处理程序，就能够管理某一类型的全部事件。
- 优势：
  - 减小内存消耗：若是每一个dom节点都绑定事件，那么会增长不少与dom的交互，同时会保存不少对象占用内存，这二者都将致使页面性能变低。而咱们若是只使用一个代理，那么会减小不少dom交互和内存占用。
  - 动态绑定：新生dom节点若是用原来的方式是没法绑定事件的，用委托的方式这方面能够轻松实现，保证父元素存在便可。
- 例子：
```
<ul id="myLinks">
  <li id="goSomewhere">Go somewhere</li>
  <li id="doSomething">Do something</li>
  <li id="sayHi">Say hi</li>
</ul>
复制代码
```
```
var item1 = document.getElementById("goSomewhere");
var item2 = document.getElementById("doSomething");
var item3 = document.getElementById("sayHi");

document.addEventListener("click", function (event) {
  var target = event.target;
  switch (target.id) {
    case "doSomething":
      document.title = "事件委托";
      break;
    case "goSomewhere":
      location.href = "http://www.baidu.com";
      break;
    case "sayHi": 
      alert("hi");
      break;
  }
})
复制代码
```
- 注意事项：
  
  使用“事件委托”时，并非说把事件委托给的元素越靠近顶层就越好。事件冒泡的过程也须要耗时，越靠近顶层，事件的”事件传播链”越长，也就越耗时。若是DOM嵌套结构很深，事件冒泡经过大量祖先元素会致使性能损失。

12.load和DOMContentLoaded事件

Dom文档加载步骤：
1. 解析html结构
2. 加载外部脚本和样式表文件
3. 解析并执行脚本代码
4. 构造HTML DOM模型 //DOMContentLoaded执行点
5. 加载图片等外部文件
6. 页面加载完毕 //load
应用场景：

给元素绑定事件处理函数，将绑定的函数放在这两个事件的回调中，保证能在页面元素加载完毕以后再绑定事件的函数。

13.HTTP状态码

1xx：指示信息–表示请求已接收，继续处理。
2xx：成功–表示请求已被成功接收、理解、接受。
3xx：重定向–要完成请求必须进行更进一步的操做。
4xx：客户端错误–请求有语法错误或请求没法实现。
5xx：服务器端错误–服务器未能实现合法的请求。
常见状态码：
- 200：OK。请求成功，通常用于GET与POST请求。
- 204：No Content。无内容。服务器成功处理，但未返回内容。在未更新网页的状况下，可确保浏览器继续显示当前文档。
- 301：Moved Permanently。永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。从此任何新的请求都应使用新的URI代替。
- 302：Found。临时移动。与301相似。但资源只是临时被移动。客户端应继续使用原有URI。
- 304：Not Modified。未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端一般会缓存访问过的资源，经过提供一个头信息指出客户端但愿只返回在指定日期以后修改的资源。
- 400：Bad Request。客户端请求的语法错误，服务器没法理解。
- 401：Unauthorized。请求要求用户的身份认证。
- 403：Forbidden。服务器理解请求客户端的请求，可是拒绝执行此请求。
- 404：Not Found。服务器没法根据客户端的请求找到资源（网页）。经过此代码，网站设计人员可设置"您所请求的资源没法找到"的个性页面
- 500：Internal Server Error。服务器内部错误，没法完成请求。

14.移动端触摸事件

touchstart: 当手指触摸屏幕时候触发；
touchmove: 当手指在屏幕上滑动的时候连续触发；能够调用阻止默认事件event.preventDefault()阻止屏幕滚动；
touchend: 手指离开屏幕时触发；
touchcancel: 系统中止跟踪触摸时触发；

以上事件都会冒泡，并且均可以取消冒泡。
触摸事件属性：
- touches: 跟踪返回Touch对象的数组；
- targetTouchs: 特定事件目标的Touch对象的数组；
- changeTouchs: 上次触摸以来改变了的Touch对象的数组；
Touch对象包含的属性：
- clientX: 触摸目标在浏览器中的x坐标
- clientY: 触摸目标在浏览器中的y坐标
- pageX: 触摸目标在当前DOM中的x坐标
- pageY: 触摸目标在当前DOM中的y坐标
- screenX: 触摸目标在屏幕中的x坐标
- screenY: 触摸目标在屏幕中的y坐标
- target: 触摸的DOM节点目标

15.meta标签用法

SEO搜索引擎优化
定义页面的language
自动刷新并指向新的页面
实现网页转换时的动态效果
控制页面缓冲
网页的顶级定级评价
控制窗口显示

name/content属性：
- keywords告诉搜索引擎网页的关键字
- description告诉搜索引擎网站的主要内容
- robots告诉搜索机器人哪些页面须要索引，哪些页面不须要索引
  
  对应的content有all,none,index,noindex,follow,nofollow。默认是all
- author
- renderer告诉浏览器渲染模式
- viewport视图模式
http-equiv/content属性：
- X-UA-Compatible浏览模式
- expires设定网页到期时间，到期后必须到服务器上从新传输，必须使用GMT时间格式
```
<meta http-equiv="expires"content="Fri,01Jan201618:18:18GMT">
复制代码
```
- Pragma(cache模式)
  
  若是禁止浏览器从本地缓存访问则将content设为no-cache
- Refresh自动刷新并在多少秒后且指向新的页面
```
<meta http-equiv="Refresh" content="2;URL=http://www.lbw.com">
复制代码
```
- Set-cookie 网页若是过时，存盘的cookie也将被删除，GMT时间格式
```
<meta http-equiv="Set-Cookie"content="cookievalue=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">
复制代码
```
- Window-target 当content为_blank，强制当前窗口以独立页面显示
- content-Type 显示字符集
- content-Language 显示语言
- Cache-Control 指定请求和响应遵循的缓存机制

16.计算机网络相关

七层：应用层、表示层、会话层、传输层、网络层、数据链路层、物理层
TCP：面向链接、传输可靠(保证数据正确性,保证数据顺序)、用于传输大量数据(流模式)、速度慢，创建链接须要开销较多(时间，系统资源)
UDP：面向非链接、传输不可靠、用于传输少许数据(数据包模式)、速度快
TCP通常用于文件传输（FTP HTTP 对数据准确性要求高，速度能够相对慢），发送或接收邮件（POP IMAP SMTP 对数据准确性要求高，非紧急应用），远程登陆（TELNET SSH 对数据准确性有必定要求，有链接的概念）等等；UDP通常用于即时通讯（QQ聊天对数据准确性和丢包要求比较低，但速度必须快），在线视频（RTSP 速度必定要快，保证视频连续，可是偶尔花了一个图像帧，人们仍是能接受的），网络语音电话（VoIP 语音数据包通常比较小，须要高速发送，偶尔断音或串音也没有问题）等等。
HTTPS即加密的HTTP，HTTPS并非一个新协议，而是HTTP+SSL（TLS）。本来HTTP先和TCP（假定传输层是TCP协议）直接通讯，而加了SSL后，就变成HTTP先和SSL通讯，再由SSL和TCP通讯，至关于SSL被嵌在了HTTP和TCP之间
线程和进程：

线程是最小的执行单元，而进程由至少一个线程组成。如何调度进程和线程，彻底由操做系统决定，程序本身不能决定何时执行，执行多长时间。进程指计算机中已运行的程序。线程指操做系统可以进行运算调度的最小单位。
死锁：当两个以上的运算单元，双方都在等待对方中止运行，以获取系统资源，可是没有一方提早退出时，就称为死锁。