浏览器发起请求过程
浏览器URL -> DNS域名解析 -> IP所在服务器发起请求
浏览器处理响应过程
html:二进制转为html 构建DOM树: Html解析: Token -> Node -> DOM Token词法解析: 根是document对象 <div></div> Node:HTML div Element DOM: DOM和标签是一一对应的关系 解析过程中: link css并行下载 script 先执行js,完成后继续构建DOM树 底部引入js 头部引入js, 加async,defer async: 异步下载js文件,不影响DOM解析,下载完成后尽快执行js defer:文档渲染完后,DOMContentLoaded时间调用之前,按照顺序执行js windown.onload 构建css树:CSS解析器 每个css文件解析为CSSStyleSheet样式表对象,每个对象都包含CSSRule, CSSRule包含选择器和声明对象 Token解析->Node->CSSOM 构建Render树:渲染树 = DOM树 + CSS树 布局layout和绘制paint: 计算对象之间的大小,确定每个节点在屏幕上的坐标 映射浏览器屏幕绘制,使用UI后端层绘制每个节点 reflow 回流:元素属性发生变化且影响布局时(高、宽、内外边距等) 相当于刷新页面 repaint 重绘:元素属性发生变化且不影响布局时(颜色、透明度、字体样式等) 相当于不刷新页面,动态更新内容 重绘不一定引起回流,回流必将引起重绘