浏览器环境

一、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

推荐阅读更多精彩内容