加载资源的形式

• 输入url(跳转页面) 加载html
• 加载html的静态资源

1. 浏览器根据DNS服务器得到域名的ip地址
2. 向这个ip的机器发送http/https请求
3. 服务器收到处理返回http请求
4. 浏览器得到返回的内容

浏览器渲染页面的过程

1. 根据html结构生成Dom树
2. 根据css生成cssom
3. 将Dom和cssom整合形成Render树
4. 根据render树开始渲染和展示
5. 遇到<script>时会执行并阻塞渲染

windows.onload

页面全部资源加载完才会执行，包括图片、视频

DOMContentLoaded

dom渲染完加载执行，不管其他资源

性能优化

原则：

• 多使用内存、缓存或者其他方法
• 减少cpu计算，较少的网络请求

前端性能优化着手点

• 加载页面和静态资源

1. 静态资源的压缩合并
2. 静态资源的缓存
3. 使用cdn让资源加载更快
4. 使用ssr服务器端渲染，数据直接输出到html中

• 页面渲染

1. css放在前面，js放后面
2. 懒加载（图片懒加载，下拉加载更多）
3. 减少dom查询，对dom查询做缓存
4. 减少dom操作，多个操纵尽量合并在一起执行
5. 事件节流
6. 尽早执行操作如DOMContentLoaded