前端-基础学习-05

rambler_wang
164 阅读7分钟

1.es6的常用新特性有哪些。

  • let、const申明变量。 let声明的变量可以随便修改，const声明的变量不能修改（实际上是变量的地址不能修改，如果申明的是对象，对象里面的东西可以修改）。

两者都会生成块级作用域，申明的变量没有变量提升，会存在暂时性死区。

  • 解构赋值 常用来解析后台数据、加载模块、拆分数据格式（例如时间段拆分为startTime和endTime）

  • 模板字符串。

    通过``和${}来拼接字符串。

    let m = 1,n=2;
    `${m} + ${n} = ${m + n}`  // "1 + 2 = 3"

标签函数：

    /**
     * @param arr 模板字符串通过${}分割而成的数组
     * @param params ${}按顺序传入
     */
    function f(arr,...param) {
        console.log(arr); //  ['', ' + ', ' = ', '']
        console.log(param); // ['m', 'n', 'y']
    }
    f`${'m'} + ${'n'} = ${'y'}`
    
    //使用模板字面量也可以直接获取原始的模板字面量内容（如换行符或 Unicode 字符），而不是被转 换后的字符表示。为此，可以使用默认的 String.raw 标签函数：
    function printRaw(strings) { 
        for (const string of strings) { 
            console.log(string); // © 回车
        }
        for (const rawString of strings.raw) { 
            console.log(rawString); // 原样输出 \u00A9  \n
        }
    } 
    printRaw`\u00A9${ 'and' }\n`;
  • 参数默认值默认参数
function f(str = 'project', ...arg) {
    console.log(str , arg)
}
f('str', 1, 2, 3, 4, 5)
// 输出 str [1,2,3,4,5]
  • 箭头函数。箭头函数的this指向定义时外层的this,异步回调使用。不能new。没有arguments
  • Object.assign()注意是浅拷贝。
  • Object.is(val1,val2) 比较数据是否全等，可比较+0、-0、NaN
  • Promise优雅的写异步，常用Promise.all()
  • set类似数组结构，但是值不会重复，可用来去重Array.from(new set(arr))
  • weakSet。只能存储对象的引用，并且为弱引用。
  • map以key、value形式存储数据，但是key不会解析为字符串，而是保持原样，复杂类型是引用。
  • weakMap。和weakset相似，key只能为弱引用。至可以任意。
  • for-of。直接遍历value值。
  • Object.keys()、Object.values()。返回对象的key（value）集合

2.从浏览器输入url到界面展示中间发生了什么？

  • DNS域名解析。 浏览器会首先从本地查找有没有缓存（浏览器或者系统的缓存），没有就依次从根服务器、顶级DNS服务器、权威DNS服务器。

// DNS的域名查找，在客户端和浏览器，本地DNS之间的查询方式是递归查询(找到最终结果才返回)；在本地DNS服务器与根域及其子域之间的查询方式是迭代查询（问一次返回一次，再去问下级域名）

  • 建立TCP连接。三次握手

第一次握手： 建立连接时，客户端发送syn包（seq=x）到服务器，并进入SYN_SENT状态，等待服务器确认；

第二次握手： 服务器收到syn包，必须确认客户的SYN（ack=x+1），同时自己也发送一个SYN包（seq=y），即SYN+ACK包，此时服务器进入SYN_RECV状态；

第三次握手： 客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=y+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。

image.png

  • 发起http请求 http请求由请求首部、请求头、请求体组成。

image.png 头部的常用字段：

Accept: 接收类型，表示浏览器支持的MIME类型 （对标服务端返回的Content-Type）

Accept-Encoding：浏览器支持的压缩类型,如gzip等,超出类型不能接收

Content-Type：客户端发送出去实体内容的类型

Cache-Control: 指定请求和响应遵循的缓存机制，如no-cache

If-Modified-Since：对应服务端的Last-Modified，用来匹配看文件是否变动，只能精确到1s之内，http1.0

Expires：缓存控制，在这个时间内不会请求，直接使用缓存，http1.0，而且是服务端时间

Max-age：代表资源在本地缓存多少秒，有效时间内不会请求，而是使用缓存，http1.1

If-None-Match：对应服务端的ETag，用来匹配文件内容是否改变（非常精确），http1.1

Cookie: 有cookie并且同域访问时会自动带上

Connection: 当浏览器与服务器通信时对于长连接如何进行处理,如keep-alive

Host：请求的服务器URL

Origin：最初的请求是从哪里发起的（只会精确到端口）,Origin比Referer更尊重隐私

Referer：该页面的来源URL(适用于所有类型的请求，会精确到详细页面地址，csrf拦截常用到这个字段)

User-Agent：用户客户端的一些必要信息，如UA头部等

  • 服务器处理http后返回响应，响应主要包含状态码、响应头部、响应体。 状态码分析：

1xx：指示信息–表示请求已接收，继续处理。

2xx：成功–表示请求已被成功接收、理解、接受。常见200成功、

3xx：重定向–要完成请求必须进行更进一步的操作。常见304自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容

4xx：客户端错误–请求有语法错误或请求无法实现。常见404没找到、403服务器拒绝请求

5xx：服务器端错误–服务器未能实现合法的请求。500服务端错误、503服务端暂时不可访问，可能正在更新。

响应头部常用： Access-Control-Allow-Headers: 服务器端允许的请求Headers

Access-Control-Allow-Methods: 服务器端允许的请求方法

Access-Control-Allow-Origin: 服务器端允许的请求Origin头部（譬如为*）

Content-Type：服务端返回的实体内容的类型

Date：数据从服务器发送的时间

Cache-Control：告诉浏览器或其他客户，什么环境可以安全的缓存文档

Last-Modified：请求资源的最后修改时间

Expires：应该在什么时候认为文档已经过期,从而不再缓存它

Max-age：客户端的本地资源应该缓存多少秒，开启了Cache-Control后有效

ETag：请求变量的实体标签的当前值

Set-Cookie：设置和页面关联的cookie，服务器通过这个头部把cookie传给客户端

Keep-Alive：如果客户端有keep-alive，服务端也会有响应（如timeout=38）

Server：服务器的一些相关信息

  • 浏览器解析渲染页面

整体可分为5步

  1. 处理 HTML 标记并构建 DOM 树。
  2. 处理 CSS 标记并构建 CSSOM 树。
  3. 将 DOM 与 CSSOM 合并成一个渲染树。
  4. 根据渲染树来布局，计算每个节点的几何信息。
  5. 将各个节点绘制到屏幕上。

image.png 需要注意的是几个阻塞界面渲染的点：

  1. css阻塞界面。css不会阻塞dom的解析，但是会阻塞renderTree的解析，并且会阻塞js的执行，因此css应该放在头部加载。
  2. js阻塞页面渲染。js会阻塞整个的渲染，因为js可能对dom或者css进行改变。因此通常js放在body底部最后加载。使用async（加载完立即执行）或者defer（加载完后面再执行）会使js的加载变为异步的，但是js的解析还是会阻塞界面。
  • 关闭tcp连接。四次挥手

第一次挥手： Client端发起挥手请求，向Server端发送标志位是FIN报文段，设置序列号seq，此时，Client端进入FIN_WAIT_1状态，这表示Client端没有数据要发送给Server端了。

第二次分手：Server端收到了Client端发送的FIN报文段，向Client端返回一个标志位是ACK的报文段，ack设为seq加1，Client端进入FIN_WAIT_2状态，Server端告诉Client端，我确认并同意你的关闭请求。

第三次分手： Server端向Client端发送标志位是FIN的报文段，请求关闭连接，同时Client端进入LAST_ACK状态。

第四次分手 ： Client端收到Server端发送的FIN报文段，向Server端发送标志位是ACK的报文段，然后Client端进入TIME_WAIT状态。Server端收到Client端的ACK报文段以后，就关闭连接。此时，Client端等待2MSL的时间后依然没有收到回复，则证明Server端已正常关闭，那好，Client端也可以关闭连接了。

image.png

avatar
文章
阅读
粉丝