网络 ​

页面加载和渲染过程 ​

• 加载过程

  1. DNS解析: 域名 -> IP地址
  2. 发起 TCP 连接
  3. 浏览器根据 IP地址向服务器发起 http请求
  4. 服务器处理 http请求 并返回给浏览器

• 渲染过程

  1. 解析HTML生成DOM树
  2. 解析CSS生成CSSOM规则树
  3. 解析JS 操作 DOM 树和 CSSOM 规则树
  4. 将DOM树与CSSOM规则树合并在一起生成渲染树
  5. 遍历渲染树开始布局,计算每个节点的位置大小信息
  6. 浏览器将所有图层的数据发送给GPU,GPU将图层合成并显示在屏幕上

http状态码 ​

• 1xx: 指示信息 – 表示请求已接收
• 2xx: 成功 – 表示请求已被成功接收
• 3xx: 重定向 – 要完成请求必须进行更进一步的操作
• 4xx: 客户端错误 – 请求有语法错误或请求无法实现
• 5xx: 服务器端错误 – 服务器未能实现合法的请求

DNS ​

DNS解析 ​

输入 www.baidu.com 网址后,会依照此顺序获得 IP

1. 本地域名服务器 (会去DNS缓存找一下,没有的话会接着往下找)
2. 根域名服务器
3. com 顶级域名服务器
4. baidu.com 域名服务区

DNS缓存 ​

DNS存在多级缓存,从离浏览器距离排序分别为:

1. 浏览器缓存
2. 系统缓存
3. 路由器缓存
4. IPS服务器缓存
5. 根域名服务器缓存
6. 顶级域名服务器缓存
7. 主域名服务器缓存

DNS负载均衡 ​

在访问 baidu.com 时,每次响应的并非是同一个服务器(IP地址),一般大公司有几百台服务器来支撑访问,DNS在这里做了相对应的优化:
返回一个适合机器的IP给用户,比如根据每台机器的负载量,机器距离用户距离等等,这种过程叫做负载均衡

http缓存 ​

浏览器有一个缓存数据库,用来保存一些静态文件

缓存规则 ​

• 强制缓存
  当缓存数据库中有客户端需要的数据,客户端直接将数据从其中拿出来使用 (如果数据未失效),当缓存服务器没有需要的数据时,客户端才会向服务端请求

• 协商缓存
  客户端会先从缓存数据库拿到一个缓存的标识,然后向服务端验证标识是否失效,如果没有失效服务端会返回304,这样客户端可以直接去缓存数据库拿出数据,如果失效,服务端会返回新的数据

缓存方案 ​

强制缓存 ​

服务器的响应头会有 Cache-Control 来表明是否强制缓存,它的参数为:

• private: 客户端可以缓存
• public: 客户端和代理服务器都可以缓存
• max-age=t: 缓存内容将在t秒后失效
• no-cache: 需要使用协商缓存来验证缓存数据
• no-store: 所有内容都不会缓存

协商缓存 ​

• Last-Modified 服务器在响应请求时,会告诉浏览器资源的最后修改时间,附带在此参数上
  当浏览器再次请求时会带上此时间,服务器会对比此时间,当一致时会返回304,然后浏览器取缓存,当不一致时证明此文件发生了变化,服务器开始响应执行相关操作,然后返回200

• Etag 此字段告诉浏览器当前资源在服务器生成的唯一标识
  当浏览器再次请求时会带上此标识,服务器通过对比此标识是否一致来决定是否返回304

由于这个标识是服务器通过算法得出的,会占用服务器资源,所以这种方法比较少用

缓存优点 ​

• 减少多余的数据传递,节省宽带流量
• 减少服务器的负担
• 加快客户端加载网页速度

不同刷新的缓存现象 ​

• 浏览器写入URL - 发现有缓存,不用请求直接拿
• F5刷新 - 协商缓存,会去服务器看资源是否过期
• Ctrl + F5(也就是清空缓存并硬刷新) - 删除缓存后去服务器请求完整文件

Get/Post 区别 ​

• GET在浏览器回退时是无害的,而POST会再次提交请求
• GET请求会被浏览器主动cache,而POST不会
• GET请求只能进行url编码,而POST支持多种编码方式
• GET参数通过URL传递,POST放在Request body中
• GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留
• GET请求在URL中传送的参数是有长度限制的,而POST没有
• GET比POST更不安全,因为参数直接暴露在URL上,所以不能用来传递敏感信息。

回流重绘 ​

会引起元素位置变化的就会回流,窗口大小改变、字体大小改变、以及元素位置改变，都会引起周围的元素改变他们以前的位置

不会引起位置变化的,只是在以前的位置进行改变背景颜色等,只会重绘

回流必将引起重绘,重绘不一定会引起回流

两者对性能影响 ​

回流比重绘的代价要更高
有时即使仅仅回流一个单一的元素,它的父元素以及任何跟随它的元素也会产生回流

现代浏览器会对频繁的回流或重绘操作进行优化:
浏览器会维护一个队列,把所有引起回流和重绘的操作放入队列中,如果队列中的任务数量或者时间间隔达到一个阈值的,浏览器就会将队列清空,进行一次批处理,这样可以把多次回流和重绘变成一次

如何避免重绘和回流 ​

css:

• 避免使用table布局
• 避免设置多层内联样式
• 将动画效果应用到position属性为absolute或fixed的元素上

js:

• 避免频繁操作样式,或者最好一次性重写style
• 避免频繁操作DOM,创建一个documentFragment,在上面做一些操作,最后才把它添加到文档中

跨域 ​

同源策略: 协议,端口号,域名相同

• 动态创建script 因为script标签不受同源策略影响
• link 标签
• img 标签
• JSONP 在axios请求参数内加个 jsonp
• CORS 配置 axios.defaults.withCredentials = true 允许跨域携带cookie信息
• websocket
• nginx反向代理

HTTP 和 HTTPS ​

https = http + ssl协议

https 优点 ​

• seo: 谷歌调整过搜索引擎算法,比起同等http网站,https加密的网站的排名更高
• 安全性

https 缺点 ​

• https协议会使页面的加载时间延长 50%,增加 10% - 20% 耗电
• 加密范围有限,黑客攻击,服务器劫持几乎没有作用
• ssl证书需要钱
• https链接服务器端资源占用高很多
• https在握手阶段比较费时,对网站响应速度有影响

页面存储 ​

cookie ​

• 大小限制为4kb
• 可设置失效时间,默认关闭浏览器后清除
• 数据自动携带于请求头中

sessionStorage ​

• 大小5MB左右
• 关闭页面或者浏览器后清除

localStorage ​

• 大小5MB左右
• 除非手动清除,否则永远存在