美文网首页
浏览器渲染过程中的几个事件

浏览器渲染过程中的几个事件

作者: Doter | 来源:发表于2020-03-03 10:53 被阅读0次

首先我们了解一下页面加载过程中的几个事件

DOMContentloaded
当HTML被完全加载以及解析时,DOMContentLoaded 事件会被触发,而不必等待样式表,图片或者子框架完成加载。

需要注意,该事件会等待加载的js执行完。


image.png

参考demo2,当加载的js需要执行耗时的操作,那么该事件就会等待js执行完后触发。

load

当html及其依赖资源已完成加载时,将触发load事件。
及html中引入的资源,比如img,行内样式的字体图片。

注意不包含html引入的css里面的图片和字体等等。

First paint
注意是第一个像素,相当于开始绘制。
是页面导航与浏览器将该网页的第一个像素渲染到屏幕上所用的中间时,渲染是任何与输入网页导航前的屏幕上的内容不同的内容。
First Contentful paint
当浏览器第一次内容绘制完成

不重要的

First Meaningful paint
Largest Contentful paint

相关文章

  • 浏览器渲染过程中的几个事件

    首先我们了解一下页面加载过程中的几个事件 DOMContentloaded当HTML被完全加载以及解析时,DOMC...

  • JS浏览器渲染原理(JS引擎)

    1、浏览器渲染过程 浏览器的渲染过程共分为几个过程:JavaScript ——> Style ——> Layout...

  • script async和defer, 什么是阻塞渲染

    浏览器渲染逻辑 浏览器下载html网页,边下载边解析渲染 解析过程中发现script标签 网页停止解析,把网页渲染...

  • 浏览器加载跟渲染

    渲染过程中,如果遇到script标签的时候,浏览器就会停止渲染,执行js代码,因为浏览器渲染和 JS 执行共用一个...

  • 关键渲染路径

    标签: 浏览器渲染 关键渲染路径 提到页面渲染,有几个相关度非常高的概念,最重要的是关键渲染路径,其他几个概念都可...

  • 事件循环

    浏览器渲染进程 浏览器的渲染线程大概有以下几种:(1)GUI线程;(2)JS引擎线程;(3)事件触发线程;(4)定...

  • CSS知识总结

    浏览器渲染原理 浏览器渲染大致有以下几个过程: 根据HTML构建HTML树(DOM) 根据CSS构建CSS树(CS...

  • 浏览器内核多进程机制

    1.浏览器内核常驻线程 浏览器 GUI 渲染线程 JavaScript 引擎线程 浏览器定时触发器线程 浏览器事件...

  • 浅谈前端浏览器渲染和服务端渲染

    先给几个定义: 渲染:指的是生成html文档的过程,并非浏览器渲染html。 模板引擎:模板解析(...

  • React-服务器端渲染

    为什么服务器端渲染? 服务器端渲染有几个优点: 如果http被预先渲染,浏览器的性能就会增加,因为浏览器把所有一起...

网友评论

      本文标题:浏览器渲染过程中的几个事件

      本文链接:https://www.haomeiwen.com/subject/gqtqlhtx.html