浏览器解析
用户代理的作用(navigator.userAgent)
1.判断浏览器类型,采用兼容方案
2.判断是否为移动端
3.标识H5容器,方便调用H5容器特定接口
4.userAgent伪装成本很低,不能过于依赖
浏览器内核
作用:负责将表示页面的字符变成可视化的图像的模块
远程主机响应
HTTP协议
请求报文:
- 起始行:方法(GET)+ 空格 +请求url +空格 +http版本 +换行符
- 首部:首部名称:首部内容 换行符
- 首部结束:换行符
- 实体
响应报文:
- 起始行:http版本 +空格 +状态码 +空格 +原因短语 +换行符
- 首部:首部名称:首部内容 换行符
- 首部结束:换行符
- 实体
渲染需要做的工作
重要组件:
- html解释器:解释HTML文本的解释器 HTML文本->DOM树
- css解释器:为DOM对象计算出样式信息
- js引擎:解析js代码,使得js代码有调用DOM接口的能力
- 布局:结合css,计算出每个DOM对象的大小位置信息
- 绘图:将经过布局计算的DOM节点绘制成图像
渲染引擎
思考:
浏览器如何处理外联资源呢?
1.查看是什么类型的外联资源
如果是网络资源,则需要通过资源加载器去进行加载,如果缓存在,则读缓存,否则去远程去取。取完后,在调用相遇的解释器去解释内容。
css放在头部,js放在body尾部,为什么要这样优化?
css不会阻塞页面渲染,但页面渲染到js后会放弃渲染,而执行js,所以js会阻塞页面渲染(因为js可能会修改DOM,所有页面停止渲染)
浏览器在渲染之前或之后还要做什么?
渲染之前需要加载资源,渲染之后在DOM或css变化后,重新进行布局计算和渲染操作