技术分享

基础类型

基本类型

Undefined 值未定义

未声明或者未定义
Boolean 布尔值
Null 空对象指针
String 字符串

不可变数据结构，一旦创建就不能修改，要想改变得先销毁原来的字符串，然后创建一个新的字符串
Number 数值类型

表示整数或者浮点数,浮点数占用的空间是整数的两倍，所以js引擎自动把1.或者10.0自动转换成正数存储

引用类型

Objec、Null、Array、RegExp、Date、Function、(String、Number、Boolean)

Object 复杂数据类型

页面加载过程

DNS服务器通过域名查找对应的web 服务器ip地址

查找浏览器缓存
查找系统缓存
查找路由器缓存
查找运营商DNS缓存
递归搜索
- 首先向根域名服务器请求顶级域com的IP地址；
- 获取返回值后，向顶级域com的服务器请求一级域名taobao的IP地址；
- 获取返回值后，向一级域名taobao的服务器请求二级域名m的IP地址；
- 获取返回值后，完成查找，返回m.taobao.com的IP地址；根据网络的不同，这一块的耗时可能高达十几秒。

浏览器访问web服务器

创建TCP链接
创建http链接
发送请求

服务器处理完成返回html

接受数据
根据http协议处理数据

浏览器解析、加载页面

DOM解析和资源加载

回流重绘

解析html -解析过程哪些会被阻塞?
构建dom树和css树
构建render树 ---（删除不显示的节点）
reflow—哪些操作会触发reflow
repaint—哪些操作会触发repaint

浏览器访问web服务器--最后分析各种请求的加载顺序

资源分类

{
    kMainResource,
    kImage,
    kCSSStyleSheet,
    kScript,
    kFont,
    kRaw,//动态请求ajax
    kSVGDocument,
    kXSLStyleSheet,
    kLinkPrefetch,
    kTextTrack,//video的字幕
    kImportResource,
    kMedia,  // Audio or video file requested by a HTML5 media element
    kManifest,
    kMock  // Only for testing
  }

prepareRequest（预处理）

检查请求是否合法
- CSP(Content Security Policy)内容安全策略检查
CSP是减少XSS攻击一个策略,我们只允许加载自己域的图片的话，可以加上下面这个meta标签
- ```
<meta http-equiv="Content-Security-Policy" content="img-src 'self';">
```
- upgrade-insecure-requests
- ```
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
```
- Mixed Content混合内容block ,在https的网站请求http的内容就是Mixed Content(Audio,img,video)
- Origin Block
- 如果协议、域名、端口号都一样则通过检查。需要这里和同源策略是两码事，这里的源阻塞是连请求都发不出去，而同源策略只是阻塞请求的返回结果
把请求做些修改
资源优先级

在优先级在Medium以下的为delayable，即可推迟的，而大于等于Medium的为不可delayable的。从刚刚我们总结的表可以看出：css/js是不可推迟的，而图片、preload的js为可推迟加载
- 高优先级的资源(>=Medium)、同步请求和非http(s)的请求能够立刻加载
- 只要有一个layout blocking的资源在加载，最多只能加载一个delayable的资源
- 只有当layout blocking和high priority的资源加载完了，才能开始加载delayable的资源
- 同时加载的delayable资源同一个域只能有6个，同一个client即同一个页面最多只能有10个，否则要进行排队。
注：layout blocking：是当还没有渲染body标签，并且优先级在Medium之上的
network的状态

白色条是指queue的时间段，而灰色的是已经in flight了但受到同域只能最多只能建立6个TCP连接等的影响而进入的stalled状态，绿色是TTFB（Time to First Byte）从开始建立TCP连接到收到第一个字节的时间，蓝色是下载的时间。

http---发展

http协议—不讲

强缓存和协商缓存

缓存

为什么做缓存

减少冗余的数据传输
减少服务器负担
加快客户端加载网页的速度

第一次请求

强缓存

Expires：是http1.0的规范，它的值是一个绝对时间的GMT格式的时间字符串
Cache-Control ：Cache-Control是在http1.1中出现的
- max-age
- no-cache
- no-store
- public
- private

协商缓存

Etag和If-None-Match
与Last-Modified不一样的是，当服务器返回304 Not Modified的响应时，由于ETag重新生成过，response header中还会把这个ETag返回，即使这个ETag跟之前的没有变化。
Last-Modified和If-Modified-Since

区别

一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新GET；

某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了N次)，If-Modified-Since能检查到的粒度是s级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒)；

某些服务器不能精确的得到文件的最后修改时间。

有缓存

什么是跨域

CSRF（Cross-site request forgery），中文名称：跨站请求伪造

跨域

什么是同源：协议+域名+端口
跨域例子：

http://www.example.com/dir/page.html

http://www.example.com/dir2/other.html：同源
http://example.com/dir/other.html：不同源（域名不同）
http://v2.www.example.com/dir/other.html：不同源（域名不同）
http://www.example.com:81/dir/other.html：不同源（端口不同）

解决跨域

一级域名相同

http://w1.example.com/a.html
http://w2.example.com/b.html

不同源通信
- window.name
- 片段识别符（fragment identifier）
- 跨文档通信API（Cross-document messaging）
跨域前后端通信
- 服务器端做代理
- jsonp
- websocket
- cors(跨源资源分享)

跨源资源分享

跨域资源共享 CORS

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

简单请求
非简单请求

什么是简单请求

同时满足以下两请求

（1) 请求方法是以下三种方法之一：

HEAD
GET
POST
（2）HTTP的头信息不超出以下几种字段：

Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

简单请求

自动在头信息之中，添加一个Origin字段

发送

GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

Content-Type: text/html; charset=utf-8
Access-Control-Allow-Origin: http://api.bob.com //必须
Access-Control-Allow-Credentials: true //Cookie
Access-Control-Expose-Headers: FooBar //Cache-Control、Content-Language、Content-Type、                                      Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须                                     在Access-Control-Expose-Headers里面指定

如果需要发送cookie，需要客户端显示添加withCredentials=true

非简单请求

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

发送

var url = 'http://api.alice.com/cors';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();

预检请求

`OPTIONS /cors HTTP/1.1`---
Origin: http://api.bob.com---
Access-Control-Request-Method: PUT---
Access-Control-Request-Headers: X-Custom-Header---
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

预检返回

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

如果浏览器否定了"预检"请求，会返回一个正常的HTTP回应，但是没有任何CORS相关的头信息字段。这时，浏览器就会认定，服务器不同意预检请求，因此触发一个错误，被XMLHttpRequest对象的onerror回调函数捕获。控制台会打印出如下的报错信息。

返回的其他CORS字段

Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000

Access-Control-Allow-Origin字段是每次回应都必定包含的

websocket

建立在 TCP 协议之上，服务器端的实现比较容易。
与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
数据格式比较轻量，性能开销小，通信高效。
可以发送文本，也可以发送二进制数据。
没有同源限制，客户端可以与任意服务器通信。
协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

线程

js运作在浏览器中,是单线程的，即js代码始终在一个线程上执行，这个线程称为js引擎线程。
- UI渲染线程
- 浏览器事件触发线程
- http请求线程
- EventLoop轮询的处理线程
消息队列
- 消息队列
- 所有同步任务都在主线程上执行，形成一个执行栈。
- 主线程之外，还存在一个”任务队列”。只要异步任务有了运行结果，就在”任务队列”之中放置一个事件。
- 一旦”执行栈”中的所有同步任务执行完毕，系统就会读取”任务队列”，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
- 主线程不断重复上面的第三步。
- 分类
microtasks:
- process.nextTick
- promise
- Object.observe
- MutationObserver
macrotasks:
- setTimeout
- setInterval
- setImmediate
- I/O
- UI渲染
webworker
- 同源限制。webworker不能跨域加载JS
- DOM限制。worker内代码不能访问dom，原因是worker有自己独立的global worker环境，不是浏览器window，所以alert(),dom等操作无法进行
- 文件限制。子线程无法读取本地文件，即worker只能加载网络文件。
- 不是每个浏览器都支持这个新特性，且各个浏览器对Worker的实现不大一致
ServiceWorker

例如使用Service Worker来进行缓存，是用javascript代码来拦截浏览器的http请求，并设置缓存的文件，直接返回，不经过web服务器，然后，我们就可以开发基于浏览器的离线应用。这使得我们的web应用减少对网络的依赖。如果我们使用了Service Worker做缓存，浏览器http请求会先经过Service Worker，通过url mapping去匹配，如果匹配到了，则使用缓存数据，如果匹配失败，则继续执行你指定的动作。一般情况下，匹配失败则让页面显示“网页无法打开”。

前端存储

cookie(4k) and Session

expires 属性
path 属性
domain 属性
secure 属性
HttpOnly 属性 (防止跨站脚本攻击（Cross-sitescripting，XSS）对Cookie 的信息窃取)

localStorage

localStorage的优势

localStorage拓展了cookie的4K限制
localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

localStorage的局限

浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
localStorage在浏览器的隐私模式下面是不可读取的
localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
localStorage不能被爬虫抓取到
localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

indexedDB

Indexed

使用IndexedDB，你可以存储或者获取数据，使用一个key索引的。你可以在事务(transaction)中完成对数据的修改。和大多数web存储解决方案相同，indexedDB也遵从同源协议(same-origin policy). 所以你只能访问同域中存储的数据，而不能访问其他域的。 API包含异步(asynchronous) API 和同步(synchronous)API两种。异步API适合大多数情况, 同步API必须同 WebWorkers一同使用. 目前，没有主流浏览器支持同步API

事务
游标
索引

js 错误类型

SyntaxError：语法错误.
```
var 1
```
Uncaught ReferenceError：引用错误(引用一个不存在的变量时发生的错误)
```
console.log(a)
```
RangeError：范围错误
```
[].length = -5
```
TypeError类型错误(变量或参数不是预期类型时发生的错误)

123()      

var o = {}
o.run()       

var p = new 456

URIError，URL错误
```
decodeURI("%")
```
EvalError eval()函数执行错误
ES5以上的JavaScript中已经不再抛出该错误，但依然可以通过new关键字来自定义该类型的错误提示。

chenjf5 / note

技术分享 #13

技术分享

基础类型

基本类型

引用类型

页面加载过程

DNS服务器通过域名查找对应的web 服务器ip地址

浏览器访问web服务器

服务器处理完成返回html

浏览器解析、加载页面

浏览器访问web服务器--最后分析各种请求的加载顺序

资源分类

prepareRequest（预处理）

http---发展

http协议—不讲

强缓存和协商缓存

为什么做缓存

第一次请求

强缓存

协商缓存

区别

有缓存

什么是跨域

解决跨域

跨源资源分享

什么是简单请求

简单请求

非简单请求

websocket

线程

消息队列

webworker

ServiceWorker

前端存储

cookie(4k) and Session

localStorage

indexedDB

js 错误类型