从输入URL到页面展示发生了什么
- DNS域名解析:将域名解析为ip地址
- TCP连接:三次握手
- 发送HTTP请求
- 服务器处理请求并返回HTTP报文
- 浏览器解析渲染页面
- TCP连接断开:四次挥手
服务器处理请求阶段的具体过程:
首先浏览器发送过来的请求先经过控制器,控制器进行逻辑处理和请求分发,接着会调用模型,这一阶段模型会获取 redis db 以及 MySQL 的数据,获取数据后将渲染好的页面,响应信息会以响应报文的形式返回给客户端,最后浏览器通过渲染引擎将网页呈现在用户面前
浏览器解析渲染页面的具体过程:
- 根据HTML解析出DOM树
根据HTML的内容,将标签按照结构解析成DOM树,在生成DOM树时采用深度遍历,在构建DOM树的过程中如果遇到js脚本,会暂停DOM树的构建,直到js脚本执行完 - 根据CSS生成CSS规则树
在构建CSS规则树时js执行会暂停,在CSS规则树构建完成之前浏览器不会进行渲染。 - 根据DOM树和CSS规则树,生成渲染树
当DOM树和CSS规则树构建好之后,浏览器才会开始构建渲染树。精简CSS可以加快CSS规则树的生成速度,从而加快页面的响应速度。 - 根据渲染树计算每一个节点的信息
计算出节点的位置和尺寸,进行布局,在布局完成后,如果有某部分发生的变化影响了布局,就要倒回去重新渲染(重排/回流)。 - 根据计算好的信息绘制页面
前端性能优化
减少请求数量
文件合并、图片处理(雪碧图、使用字体图标代替图片)、减少重定向(如果一定要使用就使用永久重定向301)、使用缓存(强缓存或者协商缓存)、不使用css@import、避免使用空的src和href
减小资源大小
压缩(html、css、js、图片)、使用webp格式的图片、开启GZIP
优化网络连接
使用CDN、使用DNS预解析(DNS Prefetch)、并行连接、持久连接、管道化连接
优化资源加载
资源加载的位置(css在head中,js在body底部,先外链后本页)、资源加载的时机(异步script标签,模块按需加载,使用资源预加载preload和资源预读取prefetch,使用资源懒加载)