Web前端技术基础

浏览器基本应用

浏览器组成结构

输入url发送了什么？

• url解析：判断url是否符合规范
• 浏览器判断缓存：判断请求的资源是否有缓存，如果有就不需要向服务器发送新请求
• DNS解析，获取目标服务器ip
• 建立TCP连接（三次握手）
• 发送http请求
• 服务器处理，返回数据
• 浏览器解析渲染页面
• TCP连接关闭（四次挥手）

浏览器的渲染过程

• 解析文档，生成DOM树
• 解析CSS，根据CSS规则生成CSSOM树
• 在CSSOM和DOM树生产完后，合并DOM，CSSOM树构建渲染树
• 渲染树完成后，开始计算元素大小位置（回流发送在这个阶段）
• 根据计算好的位置信息将内容渲染到屏幕上（重绘发送在这个阶段）

浏览器数据持久化存储技术

强缓存与协商缓存的区别

  强缓存

使用强缓存策略时，如果缓存资源有效，浏览器会从本地读取缓存资源并返回200，不必再向服务器发起请求。强缓存策略可以通过两种方式来设置，分别是 http 头信息中的 Expires 属性和 Cache-Control 属性。

Expires指定资源的过期时间。在过期时间以内，改资源可以被缓存使用，不需要向浏览器发送请求。这个时间依赖于服务器时间，会存在服务器时间和客户端时间不一致。

Cache-Control属性：

• private： 仅浏览器可以缓存
• public：浏览器和代理服务器都可以缓存
• max-age=xxx 过期时间，单位为秒
• no-cache 不进行强缓存，但会有协商缓存
• no-store 不强缓存，也不协商缓存

当两种方式一起使用时，Cache-Control 的优先级要高于 Expires。

协商缓存

如果设置强缓存，无需发起请求，直接使用缓存内容。如果没有命中强缓存，设置了协商缓存，也不需要发起请求，使用缓存。

命中协商缓存条件：

• Cache-Control: no-cache
• max-age时间过期

在使用协商缓存时，会先向服务器发送一个请求，如果资源没有发生修改，则请求返回304状态，让浏览器使用本地缓存。如果资源发生修改，则返回修改后的内容

在request headers中的Etag属性和Last-Modified属性，来进行设置。其中，ETage优先于Last-Modified。

Etag文件改动 服务器在返回资源的时候，在头信息中添加Etag属性，这个属性是资源的唯一标识符。当资源改变，这个值也会改变。下次请求资源时，会在请求头中添加If-None-Match属性，为上一次请求的资源的Etag值。服务端会通过这个属性和资源最后一次修改时间进行对比，以此来判断资源是否修改。这种方式比Last-Modified更加准确。

Last-Modified 上次修改时间 服务器通过在响应头上添加Last-Modified属性，来指出资源最后一次修改时间。当浏览器发起请求时，会在请求头上添加一个IF-Modified-Since属性，值为上一次资源请求的Last-Modified的值。服务区会通过这个属性和最后修改时间来进行比较，以此来判断资源是否修改。如果没有资源修改，返回304状态，使用本地缓存。如果资源修改，就返回最新资源，200状态。

这种方式有个缺点，Last-Modified标记的时间只能精确到1秒，如果文件在1秒内修改，但是 Last-Modified 却没有改变，这样会造成缓存命中的不准确。

区别

• 强缓存优先级高于协商缓存
• 协商缓存不论命中与否都会发送一次请求
• 强缓存返回200，协商缓存命中返回304
• Ctrl+F5 会强制刷新会跳过所有缓存，而F5刷新跳过强缓存，但是会检查协商缓存。

Cookie、LocalStorage、SessionStorage区别

WebSQL

WebSQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。

如果你之前接触过诸如像 MySQL 这样的关系型数据库，学习过 SQL 语言，那么 WebSQL 对于你来讲没有任何的难度。

最新版的 Safari, Chrome 和 Opera 浏览器都支持 WebSQL。

• 三个核心方法
  1. openDatabase：使用数据库或新建数据库来创建数据库对象
  2. transaction：允许我们根据情况控制事务提交或回滚
  3. executeSql：这个方法用于执行真实的 SQL 查询

indexDB

   IndexDB 是一个运行在浏览器上的非关系型数据库。既然是数据库了，那就不是 5M、10M 这样小打小闹级别了。理论上来说，IndexDB 理论上是没有存储上限的一般来说不会小于 250M）。它不仅可以存储字符串，还可以存储二进制数据。

Application Cache

WebSQL Application Cache 是 HTML5 中定义的一种离线存储技术标准。这种技术可以让开发者明确地指定页面中哪些静态资源可以在第一次访问网页的同时缓存到本地，并且在下次访问该网页时向服务器询问本地缓存的资源是否需要更新。

cacheStorage

为了能够精细地、可编程地控制缓存，被设计出来。有了它，就可以用 JS 对缓存进行增删改查，你也可以在 Chrome 的 DevTools 里面直观地查看。对于传统的 Header 缓存，你是没法知道有哪些缓存，更加没法对缓存进行操作的。你只能被动地修改 URL 让浏览器抛弃旧的缓存，使用新的资源。

前端高效开发技术

前端高效开发工具

VScode

Node调试工具

node-inspector

前端远程调试 工具

就是我们日常按F12那个