浏览器渲染过程以及优化方案

已于 2023-02-06 08:41:05 修改
阅读量171 收藏
点赞数
文章标签： 前端 Powered by 金山文档
于 2023-02-02 14:36:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60899441/article/details/128844737
版权

1.浏览器渲染静态网页过程

  • 当我们在浏览器输入框中输入自己或者第三方网址域名的时候，浏览器通过DNS去查找该网址对应的IP地址，通过访问该ip地址，服务器会返回一个index.html文件.

  • 浏览器从本地硬盘或者服务器返回的html文件做以下处理：

  1. 字符编码：先将HTMl的原始字节数据转换为文件指定编码的字符

  1. 令牌化：浏览器根据HTML规范将字符串转换成各种令牌如：<html>，<body> 这样的标签以及标签中的字符串和属性都会被转化为令牌

  1. 生成节点对象：每个令牌都会被转化为定义其属性和规则的对象，即节点对象

  1. 构建Dom树：最后将节点对象构成树形结构 即Dom树 HTML标签复杂的父子关系，刚好诠释这样的关系

  1. CSS解析：当浏览器遇到link标签的时候，浏览器开始解析CSS，像构建Dom树一样构建CSSOM树

  1. 渲染树：在构建好DOM树和CSSOM树之后，浏览器就会拥有两个相互独立的对象集合，必须将两个树结合在一起，构建渲染树

  1. Layout布局：浏览器得到每个节点的内容和样式 下一步就是计算位置与大小 然后从树的根节点开始遍历，采用盒子模型模式来确定盒子的大小和位置

  1. Paint绘制页面

2.渲染优化方案

  • 优化JS :JavaScript文件加载会阻塞DOM树的构建，可以给<script>标签加上异步属性async,这样浏览器HTML解析就不会被js阻塞

  • 优化CSS :浏览器每次遇到<link>标签的时候，就要发出请求获得CSS文件，然后才继续构建Dom树和CCSSOM树 合并所有CSS成一个文件 减少请求次数 优化渲染速度

待续....

剪得断理得清
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
优化浏览器渲染 避免CSS expressions
11-30
用其他方案替换它们将会改善IE浏览器的渲染性能。 注意：本节最佳实践只适用于Internet Explorer 5到7，它们支持CSS表达式。Internet Explorer 8放弃使用CSS表达式，而其他浏览器是不支持的。 详细信息 作为一种动态...
详解Next.js页面渲染的优化方案
11-30
在过去一年的工作中我所使用的js框架是Next.js,尽管这个框架在前后端同构方面有着绝佳的体验，但是当页面js文件过大以及preload过多的时候还是会出现页面跳转卡顿和渲染阻塞等比较糟糕的用户体验问题。由于我之前既...
浏览器的渲染优化
不想学习的打工人的博客
12-30 1073
浏览器怎么把页面渲染出来，渲染过程分很多环节，就是关键渲染路径（Critical Rendering Path）
浏览器加载数据的优化策略（浏览器如何渲染海量数据）
weixin_53291256的博客
07-26 301
浏览器加载数据的优化策略以及web学习
前端性能优化之浏览器渲染优化
最新发布
jieyucx的博客
08-24 916
回流（reflow）是指浏览器重新渲染部分或全部的页面布局，当页面的结构、样式或者布局属性发生变化时，浏览器会触发回流。回流发生在浏览器渲染的过程中的布局阶段。在渲染过程中有两个主要步骤：布局（layout）和绘制（painting）。布局阶段是指浏览器根据元素的盒模型计算出每个元素在页面中的位置和大小，建立元素之间的关系，并生成布局树（render tree）。当浏览器在布局阶段发现页面结构或者样式发生变化时，就会触发回流。
前端浏览器渲染原理及优化
前端学习博客
02-07 2364
文章目录一.浏览器组成1. 对浏览器内核的理解2. 浏览器的主要组成部分二、浏览器渲染原理1.浏览器的渲染过程步骤一：步骤二：步骤三：步骤四：步骤五：2.相关概念①重排(更新元素的几何属性)②重绘(更细元素的绘制属性)③直接合成阶段三.浏览器渲染优化**(1)针对JavaScript：****(2)针对CSS：****(3)针对DOM树、CSSOM树：****(4)减少回流与重绘：** 一.浏览器组成 浏览器的主要功能是将用户选择的 web 资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资
页面渲染性能的优化
qq_26887683的博客
02-16 1296
页面渲染性能的优化衡量指标 window.performance是w3c提供的用来测量网页和Web应用程序的性能api。其中performance timing提供了延时相关的性能信息，可以高精度测量网站性能 。 白屏时间=页面开始展示的时间点(PerformanceTiming.domLoading)-开始请求时间点(PerformanceTiming.navigationStart) 首屏时间=首屏内容渲染结束时间点(视业务具体情况而定)-开始请求时间点(PerformanceTiming.navig
Vue超长列表渲染性能优化
05-09
本资源是对浏览器中的Event Loop深入理解，requestAnimationFrame性能优化，DocumentFragment性能优化，Vue.js中的固定高度虚拟列表优化，面向未来的无限列表优化方案的实践，是对vue原理的一次深入理解。
easyui在ie下的优化方案
09-15
easyui的项目方案，在火狐、chrome以及最新版ie下可以正常渲染 ...但无奈项目需要兼顾ie6~8，故对此进行了研究，整理了优化方案 优化后虽不能达到火狐、chrome渲染的效率(此乃ie的硬伤)，但速度已能提高好多倍
前端性能优化之--页面渲染优化全面解析
weixin_34152820的博客
05-24 981
为什么做优化 经典问题：白屏时间过长，用户体验差产生的原因：网络问题、关键渲染路径（CRP）问题 怎么做优化 如何做好优化呢，网上随便一搜，就有很多优化总结，无非就是网络优化、静态资源（html、js、css、image）优化。下面我们撇开网络方面的优化，只分析静态资源方面的优化。而静态资源的优化关键在于你要去深入理解关键渲染路径（CRP...
前端性能优化之渲染优化
qq_33198051的博客
03-21 4118
1.知识体系 1.1从URL输入到页面加载 打开浏览器从输入网址到网页呈现在大家面前，背后到底发生了什么？经历怎么样的一个过程？现在带大家来看看流程。 首先我们需要通过 DNS（域名解析系统）将 URL 解析为对应的 IP 地址，然后与这个 IP 地址确定的那台服务器建立起 TCP 网络连接，随后我们向服务端抛出我们的 HTTP 请求，服务端处理完我们的请求之后，把目标数据放在 HTTP 响应里返回给客户端，拿到响应数据的浏览器就可以开始走一个渲染的流程。渲染完毕，页面便呈现给了用户 总体来
前端浏览器渲染优化
weixin_33763244的博客
02-01 297
By Jordan Irabor | January 17 2019 原文 介绍 我们生活在一个强调快速提供网络服务的时代。由于web应用的负载传输不断增加，开发者必须采取最佳实践来确保数据包被即刻分发，以此提供给用户拉稀般的网络体验 如今被web开发广泛采用的最佳实践是图片压缩、代码压缩、代码打包（webpack打包）等等。这些实践已经被证明了能有效提高用户体验，如果开发者能够深入理解浏览器渲染...
前端浏览器渲染和性能优化详细过程
Qin的专栏
05-05 1239
1.从输入URL到加载html的详细过程 加载资源的过程 1.根据输入的域名先查找本地hosts文件是否有对应的域名IP关系,如果有,则向其IP地址发送请求,如果没有,再去DNS服务器查找IP. DNS根据域名查找IP地址的过程： 浏览器客户端向本地DNS服务器发送一个含有域名www.xxx.com的DNS查询报文。本地DNS服务器把查询报文转发到根DNS服务器，根DNS服务器注意到其co...
[转载]优化浏览器渲染
weixin_30907523的博客
09-08 83
ISD Webteam的大布同学（twitter：@tc_bryanzhang）牺牲了自己大量的xx时间翻译了Page Speed系列中的Optimize browser rendering，因其blog还在重新打造当中，所以偶这里先转载了，以下是翻译全文： 优化浏览器渲染 资源被下载到客户端后，浏览器仍需加载，解释，并渲染HTML、CSS和Javascript代码。只需利用现有浏览器的特性简单地...
前端浏览器渲染及前端性能优化
qq_48834760的博客
02-04 397
前端浏览器渲染： 今天，花了一些时间去看了看关于浏览器渲染的东西，特写下这篇博客来记录 三个阶段： 从输入网址到页面显示可以分为3个阶段，分别为 http请求阶段，http响应阶段，浏览器渲染阶段 几个概念： 进程：多程序同时进行，一个程序 就是一个进程 线程：每一个程序同时做多个事情，每一件事情可以当做一个线程 栈内存：用来提供执行代码的环境， 请求和响应过程： 1，首先呢，我们先输入网址，浏览器就会向服务器端发送一个请求。这就到了request请求阶段，request请求阶段要进行:DNS解析，
浏览器渲染原理及性能优化
qq_39840761的博客
08-08 869
一.浏览器渲染原理及性能优化 CssTree的绘制是异步的，并发的，非阻塞的，而js是阻塞的，在dom树的构建过程中，如果碰到js文件，会先停止dom树的构建，转而执行js文件，因为js文件可能会涉及到dom元素的增删改查，会改变dom树与css树的结构，这也是为什么JS是单线程的原因，如果是多线程，一个线程要增加节点，而另一个线程要删除节点，会导致程序不知道如何执行，注意：这里的异步指的是下载异...
浏览器渲染过程及性能优化
大湿胸的博客
07-07 493
渲染网页，浏览器需要处理一系列的中间过程，优化性能就是了解这个过程中发生了生什么-即CRP（critical rendering path,关键渲染路径） 浏览器渲染流程： 先生成dom树 请求css，构建css对象模型，即cssOM dom树和cssOM树组合起来构建一个渲染树，最终输出一个包含所有可见节点及样式的渲染树 构建渲染树的过程： 1.从dom树根节点开始遍历每个可见节点 不可见节点（meta，s.
从浏览器渲染原理谈性能优化（2017版）
热门推荐
riddle1981的博客
12-01 1万+
前言 　　以前学习浏览器的渲染机制时，对浏览器的渲染概念就是html解析成DOM，css形成样式规则。两者共同构建渲染树。浏览器根据渲染树的样式进行布局和渲染。后来再次回过头去看这些概念时发现很多知识点都是非常深的。 　　比如浏览器如何解析CSS形成样式树，那么浏览器究竟如何解析？了解这些并非没有意义，比如当了解css解析是自右向左后，就知道在写css样式时应该避免嵌套。了解解析顺序就知道如何
首页加载，优化项目的加载速度方案。
04-20
关于首页加载优化方案，我可以给您一些建议。首先是确保页面资源的合理压缩和合并，减少HTTP请求。可以利用浏览器缓存，使用CDN技术，使得用户访问速度更快。其次是在页面渲染过程中尽可能避免JavaScript和CSS阻塞，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值