浏览器运作过程
用户在浏览器地址上输入url到显示页面的步骤
URL解析==》DNS查询==》TCP连接==》服务器处理请求==》接受响应==》渲染页面
- URL
- DNS域名解析(找到真实的IP)
- 请求服务器
- 服务器发给后台
- 后台返回数据(html,JS,CSS)给浏览器
- 浏览器拿到数据解析数据,建立相应的内部数据结构(如HTML的DOM)
- 载入解析到的资源文件,渲染页面
详细版
- 浏览器 ---- 用户输入URL
- 浏览器 ---- 查看缓存
- 浏览器 --- 无缓存 ----》 向服务器请求 ===》返回请求结果,缓存标识,存入缓存
- 浏览器 ===》 有缓存 ===》是否过期(exipres和Cache-control) ===》没有过期 ==》读取缓存 ==》返回缓存
- 浏览器 ===》 有缓存 ===》是否过期(exipres和Cache-control) ===》过期了 ==》携带着标识(if-Modified-Since和if-None-Match)向服务器请求==》是否有资源更新 ===》 (没有更新,则返回304使用缓存)有更新则重新返回资源和缓存标识,存入缓存 ===》页面加载成功。
第一步:URL解析
分为合法 和待搜索的关键词
根据你输入的内容进行自动完成字符编码等操作,使用HSTS强制客户端使用HTTPS访问页面
第二步:DNS查询
检查域名是否存在本地的Hots文件里,没有则向自己的DNS服务器发送查询请求
浏览器缓存==》操作系统缓存==》路由器缓存==》IP DNS缓存==》根域名服务器
第三步:TCP连接
TCP/IP分为四层,在发送数据时,每层都要对数据进行封装:
发送和接受步骤,发送端每通过一层增加首部,接受端每通过一层删除首部
- 打开网页,使用的是GET方法
发送端通过第一层(应用层):HTTP数据:发送HTTP请求发送端通过第二层(传输层):TCP首部:TCP三次握手,分割数据成报文段。传输报文发送端通过第三层(网络层):IP首部发送端通过第四层(链路层):以太网首部: 以太网协议,mac地址,ARP攻击。广播发出- 来到接受端
接受端链路层:删除以太网首部接受端网络层: 删除IP首部接受端传输层: 删除TCP首部接受端应用层: 得到HTTP数据
第四步:服务器处理请求
主进程监听===》创建子进程处理===》解析验证封装==》是否重定向(如果有则返回301重定向地址,重新发起请求)没有的话到下一步==》URL重写模块 ==》真实资源(是,则返回资源)不是则到下一步 ==》REST, URL ===》解析器===》代码层面===》返回响应
第五步:浏览器接受响应
查看Response header ,根据不同状态码做不同的事
根据响应资源里的MIME类型去解析响应内容
第六步:渲染页面
代码解析
script解析
1、阻塞后续
2、会先加载后面的css
HTML解析
1、解码
2、预解析
3、符号化
4、构建树
5、生成DOM树
style解析
1、匹配规则
2、css规则树
通过DOM树和css规则树,计算,级联生成渲染树