输入url到得到html的详细过程,加载一个资源的过程?
- 浏览器根据dns服务器得到域名的ip地址
- 像这个ip的机器发送HTTP请求
- 服务器收到、并返回HTTP请求
- 浏览器得到数据
浏览器渲染页面的过程?
- 根据html结构生成Dom Tree
- 根据css生成cssom
- 讲dom和cssom整合成renderTree(渲染树)
- 根据renderTree开始渲染和展示
- 遇到script时,会执行并阻塞渲染
为什么把css放到head里面?
window.omload和 DOMContentLoaded的区别?
window.addEventListener('load',function(){
//页面的全部资源加载完成才会执行,包括图片,视频等
})
window.addEventListener('DOMContentLoaded',function(){
//DOM 渲染完即可执行,此时图片视频还可能没有加载完
})
性能优化
多实用内存,缓存或者其他方法
减少cpu计算,减少网络
- 静态资源的压缩合并
- 静态资源的缓存
- 使用cdn让资源加载更快
- shiyong ssr后端渲染,数据直接输出到html
- css放前面,js放后面
- 图片懒加载
- 减少dom查询(缓存),操作(多个操作合并)
- 事件节流