栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

浏览器底层渲染机制

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

浏览器底层渲染机制

目录

进程和线程

浏览器具备的线程:

当我们从服务器获取HTML之后,浏览器需要按照代码规则,绘制出对应的页面

加快页面第一次渲染,减少白屏等待时间

遇到

遇到(外链式):

遇到@import(导入式):

遇到:

遇到


前言:

两个概念:

进程和线程

进程:一个程序,浏览器打开一个页面就开辟一个进程
线程:程序中具体"干活"的人,浏览器具备很多线程,这样就可以同时做很多事情
一个进程中包含一到多个线程,

  • 每一个线程同时只能做一件事,这件事情处理完成,才能处理下一件事情 =>这个操作叫"同步编程"
    同步编程的特点:单线程,同时只能处理一件事情,上件事情处理完,才能处理下一件事情!(只有一个线程,这件事情没有干完,下件事不能干)
  • "异步编程":多线程,同时可以处理多件事情

进程就好比是一个奶茶店,线程就是服务员~(便于理解哦)

浏览器具备的线程:
  • GUI渲染线程:自上而下渲染页面的「含:HTML、CSS、IMG...」
  • JS引擎线程:渲染和解析JS代码
  • HTTP网络请求线程:从服务器端获取内容「最多同时可以开辟5~7个」(http并发数)
  • 定时器监听线程:监听定时器是否到达时间
  • 事件监听线程:监听事件是否触发

这种前端性能优化方案,有个专业名词叫做"CRP",CRP叫关键渲染路径,它是一种优化思想:了解浏览器的每一步处理机制,针对每一步去做优化

当我们从服务器获取HTML之后,浏览器需要按照代码规则,绘制出对应的页面

@1 创建"DOM TREE"
GUI渲染线程会自上而下,一行行的渲染解析页面中的代码;当渲染到底部的时候,浏览器已经规划出:当前页面的结构和层级嵌套关系(节点和节点之间的关系) -> 这就是DOM树
@2 创建"CSSOM TREE"

在DOM TREE生成后,浏览器把(从服务器获取的)样式代码进行渲染,生成CSSOM树!
在GUI渲染过程中,我们会遇到、