闭包 #

在看了重学前端课程后，在我的理解中，所有的函数其实都是闭包。什么是闭包，闭包是指 有权访问另一个函数作用域中的变量的函数，闭包由环境与表达式组成，每个函数都至少会 包含全局作用域。所以所有的函数都是闭包。

但是我们肯定不能单纯的这么去理解闭包，在实际应用中，大家对闭包的概念应该是，在一 个函数中返回一个函数，这样就形成了闭包。先理解闭包的作用是什么，闭包其实在我的理 解中是为了隐藏变量，保留变量的作用。在 return 的函数中保留了变量的，以便之后再次 调用时使用，所以闭包实际上不能说会产生内存泄漏，因为这个不能被销毁的变量是我们主 动去创造的，是需要使用的，内存泄漏是指无用的变量不能被回收。

那么这个变量是如何被存到函数中的呢，在函数执行完后，在执行上下文中会销毁定义的变 量，但是这个变量在 return 的函数中被使用了，并且在外部被调用了，因此浏览器会保留 这个 return 的子函数，并且把这个子函数的变量存到 closure 中，在浏览器的控制台中 可见。

闭包的应用场景，比如说在一个循环中使用了定时器，定时器由于 eventloop 的原因会被 加入到定时队列，等待执行，如果不使用闭包，那么在 settimeout 中输出的变量都会是同 一个，使用闭包就可以将 for 循环中的每次的变量都存到 settimeout 中，就是将变量隐 藏到函数中。这就是闭包的场景之一。又比如说我们要计算一个东西，我们可以构造一个闭 包，把预设值使用闭包计算好，之后调用这个方法就可以免去一些步骤。。。

http 与 https #

http 是以明文发士传输的超文本协议，端口是 80，被人拦截请求后容易泄露

https 中的 s 指的就是 ssl 协议，需要申请 ca 证书，ssl 协议 在传输层与应用层之间 ，能够对数据进行加密，验证身份，更加安全。端口是 443

http1.0 http1.1 http2.0 #

• http1.0: 每次请求都要建立一个 tcp 连接，每次都要进行三次握手，无法复用连接，会 产生队头阻塞，服务器压力巨大
• http1.1：默认使用长连接，允许在请求时增加请求头：connection:keep-alive，这样 在一段时间内能够复用之前的 TCP 连接，连接时长可以通过请求头的 keep-alive设置 。长连接必须等待前一个请求的首个字节响应到达后，才能继续发送请求，避免产生队头 阻塞。对于用一个协议，域名，端口，浏览器只允许同时打开 6 个 TCP 连接。新增响应 头 cache-control,用于实现客户端缓存，支持断点续传
• http2.0：http1 都是明文的文本传输，而 http2.0 则是使用二进制传输，基于一条 TCP 连接，多路复用，进行传输，每个传输都会带有一个 id 区分，这样就算传输的消息被打 乱也能在另一端被正确重装，解决了队头阻塞问题。增加头部压缩。因为共用一个 TCP 连接，当发生丢包时，整个 TCP 都要等待重传。

如何做 SEO #

• 使用 title、desctiption、keywords 描述项目页面的内容
• 合理的使用语义化标签，让搜索引擎更容易理解网页
• 图片使用 alt，标签尽量使用一些辅助识别的功能，比如 aria
• 优化首屏加载速度
• 使用 next 等框架，避免 spa 项目

浏览器输入 url #

• 1、浏览器的地址栏输入 URL 并按下回车。

  • 即打开了一个新的标签页，那么浏览器就会开启一个新的渲染线程，在这个渲染线程中 会有一个渲染主线程，这个渲染主线程会做接下来的一系列任务，比如解析 HTML，解 析 css，绘制渲染树等等。

• 2、浏览器查找当前 URL 是否存在缓存，并比较缓存是否过期。

  • 强缓存：不会发送请求
    • Expires: http1.0 的产物，指定什么时候会过期 Expires: Wed, 22 Oct 2018 08:41:00 GMT，受限于本地时间，如果本地时间更改 ，则缓存时间也会失效
    • canche-contorl：针对 EXpires 的时间限制，于是 http1.1 的产物诞生，也是 http 实现长连接的根本，当设置了这个，请求能够在设定的时间内共用一个 TCP 连 接
      • Cache-control: max-age=30,30 秒后过期
  • 协商缓存，会发送请求，然后比较本地资源
    • Last-Modified：以修改时间为标准的 Last-Modified，http1.0 的产物客户端会 把 If-Modified-Since发送给服务端，服务端对比这个值跟当前的 Last-Modified,查看最后修改时间有没有变化，没有变化则返回 304，告知客户端 使用本地缓存，由于是以修改时间为标准，如果一个资源周期性的修改，改了又改回 来，那么也会被认为是修改了。
    • E-tag：基于 Last-Modified 的最后修改时间限制，一个针对于资源唯一性的产物 e-tag 诞生，http1.1 的产物，由文件内容 hash 生成，只有当资源改变才会被识别 成改变

  Expires 跟 Last-Modified 都是 1.0 的产物，都是以时间为维度，于是 1.1 在这个基 础做了优化，出现了更灵活的 canche-contorl 以及以资源为维度的 e-tag

• 3、DNS 解析 URL 对应的 IP，根据 IP 建立 TCP 连接（三次握手），HTTP 发起请求， 服务器处理请求，浏览器接收 HTTP 响应

  • 三次握手过程、请求的方式等等。。。

• 4、根据返回的数据，渲染页面，构建 DOM 树。

  • 为什么要构建 dom 树呢，是因为解析成对象才能方便操作。
  • 解析 HTML,将 请求返回的 html 字符串解析成 dom 树以及 cssom 树，css 解析 不会 阻塞 html 解析，css 解析是单独一个预解析线程中的。但是 js 解析会阻塞
  • 计算样式，将 dom 树跟 cssom 组合成一个带有样式的 dom 树
  • 生成布局树，dom 树跟布局树不会一一对应，比如 display:none 的节点不会生成在布 局树，比如伪类元素在布局树中，但 dom 树没有
  • 分层-绘制-分块-光栅化-最终呈现
  • 为什么 tramsform 效率高，因为 transform 既不胡影响布局也不会影响绘制指令，它 影响的只是渲染流程的最后一个 draw 阶段。而 draw 阶段又是单独在合成线程中，并 不会影响渲染主线程

• 8、关闭 TCP 连接（四次挥手）。