美文网首页
浏览器环境

浏览器环境

作者: 蘑菇酱960903 | 来源:发表于2018-05-08 16:58 被阅读0次

    一、script标签的加载
    浏览器从上到下下载html网页,当碰到srcipt标签会把控制权交给javascript引擎,执
    行完毕之后,再将控制权交给渲染引擎,继续往下渲染html网页

    script插入位置

    1. script文件放在网页尾部加载,好处:①如果脚本文件下载失败,网页也能渲染页面,不会出现空白情况;②当脚本文件中包含着有操作dom,那么必须等待dom生成才能调用。
    DomContentLoaded : (ie9+)跟$(document).ready({}) 相似
    onload : js事件,会在所有内容(dom树,文件内容等)加载完成之后才执行
    $(document).ready({}) : jquery事件,一旦html中dom树加载完成之后,就会调用,不用等待图片文件,字体文件等,
    

    Ⅰ 带有defer 脚本文件,浏览器继续往下解析html网页,并行下载脚本文件,完成解析html网页之后,再去执行下载的脚本
    Ⅱ 带有async 脚本文件,浏览器继续往下解析html网页,并行下载脚本文件,当脚本文件下载完成之后浏览器会停止解析html网页,执行脚本文件,结束之后再解析html网页

    1. 动态加载script
      缺点:无法保证哪个脚本src先完成加载后执行

    二、浏览器组成 (渲染引擎 + javascript引擎)

    1. 渲染引擎:
      Ⅰ解析代码:解析html代码成dom,css代码成css object model
      Ⅱ对象合成:将dom tree 和 css tree 合并成一颗render tree
      Ⅲ布局:根据盒子模型计算出render tree 的布局
      Ⅳ绘制:将render tree 绘制到屏幕上
      http://www.wdshare.org/article/5770ed9753c50d1a18f64a97

    相关文章

      网友评论

          本文标题:浏览器环境

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