问题:从输入url到生成页面的详细过程
页面渲染
1.浏览器根据DNS服务器得到域名的IP地址
2.向这个IP的机器发送HTTP请求
3.服务器处理并返回请求
4.浏览器得到返回内容
5.浏览器根据HTMl结构生成DOM Tree
6.根据css生成CSSOM
7.将DOM 和 CSSOM整合成RenderTree(渲染树)
8.根据RenderTree 开始渲染
9.遇到script标签会立即执行,并阻塞渲染
问题:为什么css文件要放在head中?JS文件要放在body下边?
因为css可以先定义dom的样式规则,然后渲染。如果放在dom后边,dom会先按默认的样式渲染一遍,然后在按照css在渲染一遍。
JS文件会先执行,阻塞渲染。JS执行完再继续渲染下边的dom。而且js代码也有可能操作下边的dom,报错。
性能优化
加载页面和静态资源入手:
1.静态资源合并压缩(例如js文件)
2.静态资源缓存
3.使用CDN让资源加载更快(CDN会就近获取资源)
4.使用SSR后端渲染
页面渲染入手:
1.CSS放前边,JS放后边
2.懒加载(图片懒加载,下拉更多)
3.减少dom查询和操作。缓存dom
4.事件节流