前端性能优化之--页面渲染优化全面解析
为什么做优化
经典问题:白屏时间过长,用户体验差
产生的原因:网络问题、关键渲染路径(CRP)问题
怎么做优化
如何做好优化呢,网上随便一搜,就有很多优化总结,无非就是网络优化、静态资源(html、js、css、image)优化。下面我们撇开网络方面的优化,只分析静态资源方面的优化。而静态资源的优化关键在于你要去深入理解关键渲染路径(CRP)的运行原理和规则。
一、了解浏览器关键渲染路径(html加载过程)
面试必问:
1、描述一下从url输入到页面展示的全过程?
2、描述一下html加载全过程?
如何准确回答类似上面的问题呢,那么我们就需要全面了解浏览器关键渲染路径了,了解了工作原理,我们才能更好的更深入的理解静态资源的优化方案
渲染的关键路径分为以下五步
- 构建DOM树
构建过程:Bytes->Characters->Tokens->Nodes->Dom
- 构建CSSOM树
构建过程:Bytes->Characters->Tokens->Nodes->CSSOM
合并DOM树和CSSOM树构建渲染树
1、过滤掉不可见节点(脚本标记、元标记) 2、过滤掉样式隐藏的节点(display:none)
- 根据渲染树来布局,计算节点的几何信息(layout)
- 将各个节点绘制在屏幕上(paint)
首先从上面的五步中看出,只有当DOM树和CSSOM树都构建完成之后才可以进行渲染树的构建,所以这两步是对整体渲染起阻塞作用的,当然了DOM树是必须的,它提供给页面内容,而CSSOM的必要性并不是太明显,所以在CSSOM构建的过程中可以做一些优化。在做优化前先要了解这几个知识点。
1、默认情况下,CSS是阻塞渲染的资源
2、我们可以通过媒体查询和媒体类型把一部分CSS标记为不阻塞渲染
(媒体查询的不足就是会严重影响关键渲染路径的性能)
<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">
3、浏览器**会下载所有CSS资源**、无论它阻塞还是不阻塞
根据上面三个知识点,会让你很清晰的知道,CSS优化可以做的事情就是,根据不同CSS使用场景和优先级的不同进行不阻塞标记。
如果是必要的CSS就请尽早的加载(1、引用位置靠前,2、减小文件体积)到客户端,这样就减少了对首次渲染的阻塞
二、javascript对渲染的影响和降低影响的策略
首先我们来讨论下javascript。它可以修改网页的方方面面,内容、样式、以及响应用户的交互。不过,javascript也会阻止DOM的构建和延缓网页渲染。下面我们来了解一下javascript和DOM、CSSOM的依赖关系。
- javascript能修改内容和样式
无论(内联javascript还是外部javascript文件)都会阻止DOM的构建
DOM构建过程中如果遇到(非异步加载async)的javascript标签,浏览器将会终止DOM的构建,立即执行javascript。 这就是为什么非异步执行的javascript要放在尾部或者将可执行代码要放在DOMContentLoaded回调中? 因为如果该javascript代码操作了未构建完的DOM节点就会因为无法获取该节点而无法执行响应的操作。
CSSOM的构建影响javascript的执行
如果在浏览器尚未完成CSSOM的下载和构建时,去运行javascript脚本,那么浏览器会延迟脚本的执行和DOM的构建,直至完成CSSOM的下载和构建。可以这样理解,当出现非异步加载的javascript时,CSSOM构建完成时间是早于javascript的执行,两者早于DOMContentloaded(即DOM构建彻底完成)。
未优化--javascript正常加载
优化后--javascript异步加载
根据上面的分析,我们可以清楚的认识到,非必要优先加载的js,选择异步加载是最优选择。
三、image对首屏渲染的影响
图像不会阻止首屏的渲染,但是为了增加用户体验我们应该考虑加载适当大小的图片,加速图片的呈现。
如何评估关键渲染路径
前面的内容让我们了解了关键路径渲染的基本原理和可能优化的机会,下面我们就需要使用一些工具,帮助我们去评估现有页面的CRP性能。
- 测试工具:Lighthouse 可以快速测试你的网页,并提供性能报告
- 监控工具:Nivigation Timing Api 设置你的代码,实时监控用户使用过程中的性能。
总结
javascript阻止DOM构建(DOMCommentLoaded触发被延迟),css的下载和完成阻止javascript的执行。在没有javascript或者只含有异步javascript的页面中,DOM的构建和CSSOM的构建互不影响。
前端性能优化之--页面渲染优化全面解析相关推荐
- 高效前端之再探页面渲染优化
首先仍然不得不提的是 "在客户端拿到 HTML 后的处理": 从上到下解析 HTML 文档生成DOM树: 加载解析样式构建CSSOM树: 加载并执行JavaScript代码: 根据 ...
- App性能优化(布局优化,线程优化,app瘦身优化,页面切换优化,App启动优化,内存优化)
Android APP性能优化(最新总结) 在目前Android开发中,UI布局可以说是每个App使用频率很高的,随着UI越来越多,布局的重复性.复杂度也随之增长,这样使得UI布局的优化,显得至关重要 ...
- 【Android 性能优化】布局渲染优化 ( CPU 渲染优化 | 减少布局的嵌套 | 测量布局绘制时间 | OnFrameMetricsAvailableListener | 布局渲染优化总结 )
文章目录 一. 减少布局嵌套 二. 布局渲染时间测量 1. FrameMetrics 使用流程 2. FrameMetrics 参数解析 3. FrameMetrics 代码示例 三. 布局渲染优化总 ...
- 【Android 性能优化】布局渲染优化 ( GPU 过度绘制优化总结 | CPU 渲染过程 | Layout Inspector 工具 | View Tree 分析 | 布局组件层级分析 )
文章目录 一. GPU 过度绘制优化总结 二. CPU 渲染过程 三. CPU 渲染性能调试工具 Layout Inspector 四. Layout Inspector 组件树 DecorView ...
- 【Android 性能优化】布局渲染优化 ( 过渡绘制 | 背景设置产生的过度绘制 | Android 系统的渲染优化 | 自定义布局渲染优化 )
文章目录 一. 背景设置产生的过度绘制 二. Android 系统的渲染优化 1. 透明组件数据传递 2. GPU 存储机制 3. Android 7.0 之后的优化机制 三. 自定义布局渲染优化 一 ...
- 高性能滚动 scroll 及页面渲染优化
最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...
- Android性能优化系列之渲染优化
众所周知的Android系统每隔16ms重新绘制一次activity,也就是说你的app必须在16ms内完成屏幕刷新的所有逻辑操作,这样才能达到60帧/s.而用户一般所看到的卡顿是由于Android的 ...
- 【Android 性能优化】布局渲染优化 ( 过渡绘制 | 自定义控件过渡绘制 | 布局文件层次深 | GPU 过渡绘制调试工具 | 背景过度绘制 )
文章目录 一. 过度绘制 二. 过度绘制两种情况 ( 自定义控件 | 布局文件 ) 三. 过度绘制调试 1. 打开过渡绘制调试工具 2. 过渡绘制调试中不同颜色的含义 3. 过渡渲染示例 四. 背景过 ...
- 在前端开发中,页面渲染指什么
我们先来了解页面文档的渲染机制 浏览器通过HTTP协议请求服务器,获取HMTL文档并开始从上到下解析,构建DOM. 在构建DOM过程中,如果遇到外联的样式声明和脚本声明(包含js的代码),则暂停文档解 ...
最新文章
- python3 调用字符串对应的函数
- 去年3545款恶意App遭下架
- 暴雪还不赶快?劳拉与光之守护者PC平台登陆
- html+lt;input+file样式,不同内核的浏览器中文件选择控件的外观也不相同
- java outputstream api,Java8 stream API以及常用方法
- Proxmark3 Easy Gui 4.0 5.0 5.1加强版免费获取啦
- 1011. A+B和C (15)-PAT乙级真题
- Linux命令解释之chown
- 3d object是什么文件_[单目3D目标检测论文笔记] 3D Bounding Box Estimation
- MySQL之 视图,触发器,事物,存储过程,函数(Day48)
- html响应式布局media,JS中使用media实现响应式布局_飛雲_前端开发者
- stm32有源蜂鸣器程序,高效简洁优雅。
- 学习Java需要掌握哪些知识,初学者必备
- 事物运动的状态和方式是谁提出的_为什么信息是事物运动的状态和方式??
- 疫情危机中看待业务韧性
- 在制品与前置时间(又叫交付时间)
- brconfig bridge0 add emac0 add vp0 up
- ping命令英文全称
- java 1.8下载_jre1.8官方下载-JAVA运行环境(jre8 64位)1.8.0.25 官网最新版【离线版】下载_东坡手机下载...
- 给我5分钟,手把手带你学会定时任务!
热门文章
- AI之父图灵登上50英镑钞票,荣耀比肩牛顿达尔文;吴恩达:将激励更多人
- NLPIR语义挖掘建互联网内容处理全技术链条
- qs.parse()、qs.stringify()使用方法
- 使用深度学习方法实现面部表情包识别
- 《研发企业管理——思想、方法、流程和工具》——1.11 论成本
- 硬件语言编写规范与技巧
- vc++修改软件程序菜单实例
- 定时PING下IP地址,检测该服务器是否还活着。 smokeping
- 外链起到引导、推广排名的作用
- 5G NGC — ETSUN(I-SMF/I-UPF)拓扑增强