理解DOM树的加载过程(js的问题)

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: 理解DOM树的加载过程(js的问题)

浏览器发起请求过程

浏览器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 重绘:元素属性发生变化且不影响布局时(颜色、透明度、字体样式等)
        相当于不刷新页面,动态更新内容
    重绘不一定引起回流,回流必将引起重绘
相关文章
|
2月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
1月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
25天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
39 5
|
28天前
|
缓存 前端开发 JavaScript
JavaScript加载优化
JavaScript加载优化
|
28天前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
优化CSS和JavaScript加载
|
1月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
1月前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
2月前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。
|
2月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
2月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
79 4