加载资源的形式
- 输入url(跳转页面) 加载html
- 加载html的静态资源
- 浏览器根据DNS服务器得到域名的ip地址
- 向这个ip的机器发送http/https请求
- 服务器收到处理返回http请求
- 浏览器得到返回的内容
浏览器渲染页面的过程
- 根据html结构生成Dom树
- 根据css生成cssom
- 将Dom和cssom整合形成Render树
- 根据render树开始渲染和展示
- 遇到<script>时会执行并阻塞渲染
windows.onload
页面全部资源加载完才会执行，包括图片、视频
DOMContentLoaded
dom渲染完加载执行，不管其他资源
性能优化
原则：
- 多使用内存、缓存或者其他方法
- 减少cpu计算，较少的网络请求
前端性能优化着手点
- 加载页面和静态资源
- 静态资源的压缩合并
- 静态资源的缓存
- 使用cdn让资源加载更快
- 使用ssr服务器端渲染，数据直接输出到html中
- 页面渲染
- css放在前面，js放后面
- 懒加载（图片懒加载，下拉加载更多）
- 减少dom查询，对dom查询做缓存
- 减少dom操作，多个操纵尽量合并在一起执行
- 事件节流
- 尽早执行操作如DOMContentLoaded
