请求过程
DNS 解析 : 域名 -> IP地址 浏览器根据IP地址向服务器发起http请求 服务器处理http请求,并返回给浏览器
渲染过程
根据HTML代码生成DOM Tree 根据CSS代码生成CSSOM 将DOM Tree和CSSOM 整合行程Render Tree 根据render Tree渲染页面 遇到则暂停渲染,优先加载并执行JS代码,完成再继续 直至把Render Tree 渲染完成
onload: 页面的全部资源加载完才会执行,包括图片、视频等 DOMContentLoaded DOM渲染完即可,此时图片、视频还可能没有加载完
性能优化
多使用内存、缓存或其它方法 减少CPU 计算量,减少网络加载耗时 空间换时间 chrome 多个标签页,都是一个进程。并不会相互影响
让加载更快
减少资源体积、压缩代码 减少访问次数:合并代码(代码合并、图片合并)、服务器端渲染、缓存 使用更快的网络 CDN
让渲染更快
CSS放在head,js放在body最下面 尽量开始执行JS,用DOMContentLoaded触发 懒加载(图片懒加载,上滑加载更多)
对DOM查询进行缓存 频繁DOM操作,合并到一起插入DOM结构 节流 防抖