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

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

作者: 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

    相关文章

      网友评论

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

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