面试题---从输入url到页面展示发生了什么？在此过程中能做什么优化？

最新推荐文章于 2021-04-30 00:56:06 发布

Reilyyy

最新推荐文章于 2021-04-30 00:56:06 发布

阅读量378

点赞数

分类专栏：前端面试题

本文链接：https://blog.csdn.net/Reilyyy/article/details/105406260

版权

1 篇文章 0 订阅

订阅专栏

服务器处理请求阶段的具体过程：

首先浏览器发送过来的请求先经过控制器，控制器进行逻辑处理和请求分发，接着会调用模型，这一阶段模型会获取 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，使用资源懒加载）

关注