前端主要两部分组成：

1、静态部分：html、css

2、动态部分：js

js的执行顺序：写在上面的script先执行，默认的script执行的时候UI解析停止，若此时js操作的元素还没有加载则会报错。

 

下图为external的js。

前端页面生命周期_css

 

2、HTML生命周期事件：

load 浏览器已经加载完了所有资源。（js可以操作所有HTML所有元素了）

DOMContentLoaded 浏览器一旦解析完HTML，DOM树已经构造完毕，img类似的标签除外。（js可以操作所有HTML所有元素了）

beforeunload/unload 用户正在离开页面。

3、

document.readyState表征页面的加载状态，可以在readystatechange中追踪页面的变化状态。

loading — 页面正在加载中。

interactive – 页面解析完毕，时间上和 DOMContentLoaded同时发生，不过顺序在它之前。

complete – 页面上的资源都已加载完毕，时间上和window.onload同时发生，不过顺序在他之前。