作为一个前端,经常会有老板或测试给我们提出某个地方加载太慢了,需要优化一下。我们自己的网站也一样,加载时间过长,自己都不耐烦,对于网页优化是很常见的,今天我们先介绍下网页加载原理。
想要了解浏览器的工作原理,我们必须清楚浏览器的组成有哪些?以及各个部分功能。
浏览器组成部分如图所示:
各部分的功能及意义:
我们在浏览器用户界面的地址栏中,输入我们需要访问网站地址url后回车。
浏览器工作流程:
浏览器中http请求阶段如图:
http请求和响应处理,是前端与后端数据交互的时候经常使用的部分。
渲染引擎通过网络获得请求文档内容(以8k分块的方式完成),然后开始:解析html为DOM树 > 渲染树结构 > 布局渲染 > 绘制渲染树。
具体解析过程为:
开始解析 html 内容,将标签转化为 DOM 节点,然后解析它外部的css文件以及 style 中的样式信息。css 样式信息和 html 标签来构建渲染树。渲染树是由一些包含颜色大小等盒子组成的,按照从上到下,从左到右的方式显示,渲染树构建好之后,执行布局过程,将每个节点确定在屏幕上的确切坐标,最后使用 UI 后端层绘制每个节点。
举例说明下浏览去解析 html、css、js 的过程:
需要注意:
先了解网页的请求,加载,解析过程,然后再考虑到底该如何优化网页性能呢?
本文系转载,前往查看
如有侵权,请联系?cloudcommunity@tencent.com 删除。
本文系转载,前往查看
如有侵权,请联系?cloudcommunity@tencent.com 删除。