- DNS解析
- 发起TCP连接
- 发送HTTP请求
- 服务器处理请求并返回HTTP报文
- 浏览器解析渲染页面
- 连接结束。
DNS解析(网址和IP地址的转换)
输入网址后，首先在本地的域名服务器中查找，没找到去根域名服务器查找，没有再去com顶级域名服务器查找，，如此的类推下去，直到找到IP地址，然后把它记录在本地，供下次使用。
DNS优化
-
DNS缓存
浏览器缓存，系统缓存，路由器缓存，IPS服务器缓存，根域名服务器缓存，顶级域名服务器缓存，主域名服务器缓存 - DNS负载均衡
发起TCP连接
三次握手，四次挥手
客户端(c)
服务器(s)
- 三次握手
c:1+1等于几
s:2，2+2等于几
c:4
🤝完毕 - 四次挥手
c:我要挂断了
s:那你挂了吧，你挂了之后给我发个信息
c:我已经挂断了
s:好的
发送HTTP请求
请求方式
- get
- post
区别:
GET在浏览器回退时是无害的，而POST会再次提交请求。
GET产生的URL地址可以被Bookmark，而POST不可以。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求在URL中传送的参数是有长度限制的，而POST么有。
对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
GET参数通过URL传递，POST放在Request body中。
GET会产生一个TCP数据包，而POST会产生两个TCP数据包
HTTP缓存
规则
- 强制缓存
- 协商缓存
强制缓存的优先级高于协商缓存
优点
减少了冗余的数据传递，节省宽带流量
减少了服务器的负担，大大提高了网站性能
加快了客户端加载网页的速度 这也正是HTTP缓存属于客户端缓存的原因。
不同的刷新方式
- 地址栏输入URL
浏览器发现缓存中有这个文件了，不用继续请求了，直接去缓存拿。（最快） - F5
F5就是告诉浏览器，别偷懒，好歹去服务器看看这个文件是否有过期了 - ctrl+F5
告诉浏览器，你先把你缓存中的这个文件给我删了，然后再去服务器请求个完整的资源文件下来。于是客户端就完成了强行更新的操作
状态码
- 2XX 请求成功
- 3XX 重定向
- 4XX 资源丢失
- 5XX 服务器内部错误
浏览器解析渲染页面
- 解析HTML形成DOM树
- 解析CSS形成CSSOM 树
- 合并DOM树和CSSOM树形成渲染树
- 浏览器开始渲染并绘制页面这个过程涉及两个比较重要的概念回流和重绘，DOM结点都是以盒模型形式存在，需要浏览器去计算位置和宽度等，这个过程就是回流。等到页面的宽高，大小，颜色等属性确定下来后，浏览器开始绘制内容，这个过程叫做重绘。浏览器刚打开页面一定要经过这两个过程的，但是这个过程非常非常非常消耗性能，所以我们应该尽量减少页面的回流和重绘
回流
当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
会导致回流的操作：
- 页面首次渲染
- 浏览器窗口大小发生改变
- 元素尺寸或位置发生改变
- 元素内容变化（文字数量或图片大小等等）
- 元素字体大小变化
- 添加或者删除可见的DOM元素
- 激活CSS伪类（例如：:hover）
- 查询某些属性或调用某些方法
一些常用且会导致回流的属性和方法：
- clientWidth、clientHeight、clientTop、clientLeft
- offsetWidth、offsetHeight、offsetTop、offsetLeft
- scrollWidth、scrollHeight、scrollTop、scrollLeft
- scrollIntoView()、scrollIntoViewIfNeeded()
- getComputedStyle()
- getBoundingClientRect()
- scrollTo()
重绘
当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
网友评论