qq_41185702的博客

本文将主要关注浏览器获取到资源后，进行渲染部分的相关优化内容。7.1 页面渲染性能页面渲染阶段对性能体验的应i昂与资源加载阶段同样重要，而对于设计高交互频次的应用来说可能更加重要。本节将整个渲染过程划分为五个串行阶段进行概述。优化渲染的实质，就是尽量压缩每个阶段的执行时间或跳过某些阶段的执行。7.1.1 流畅的使用体验要达到怎样的性能指标，才能满足用户流畅的使用体验呢？目前大部分折别的屏幕分辨率都在60fps左右，也就是每秒屏幕会刷新60次，所以要满足用户的体验期望，就需要浏览器在渲染页面动画或

通过对页面生命周期过程的了解，我们知道为了展示出想要的页面，需要许多相关的资源文件，诸如HTML文件、CSS文件、JavaScript文件及图片等其他资源文件。只有所需的资源都被浏览器请求到后，通过渲染阶段才会达到期待的页面效果，那么如何更快速地请求到资源就成为一个值得关注的优化点。比如能否压缩请求资源的大小？能否将请求的资源进行合并以减少发起HTTP请求的数量？本文将首先分别介绍HTML文件、CSS文件、JavaScript文件压缩的原理和方法，然后从工程实践角度出发，讨论时下十分热门的前端构建工具we

用户通过浏览器访问页面的过程，除了输入URL地址到所访问页面完成首屏渲染，更多的时候页面在相应与用户的交互。高性能网站的要求不仅是执行顺畅无BUG，还希望对用户的页面操作能够更快速响应，而且在执行完任务的同时占用更少的资源。5.1 数据存取无论哪种计算机语言，说到底它们的作用都是对数据的存取与处理，JavaScript也不例外。若能在处理数据之前，更快速的读取到数据，那么必然会对程序执行性能产生积极的作用。本节建工数据的存取及作用域链的角度，探讨一些在JavaScript中能提升性能的方式。5.1.

根据HTTP Archive网站的统计数据，截止到2021年12月互联网页面的请求数据量中，图像资源已经占据了60%~65%，这仅是平均数据，对于电商或图片社交场景，这个比例将更大。想要获得更好的性能体验，只靠资源压缩与恰当的文件格式类型，是很难满足期望的。我们还需要针对资源加载过程进行优化，该环节所要做的内容可概括为分清资源加载的优先级顺序，仅加载当前所必需的资源，并利用系统空闲提前加载可能会用到的资源。即本文将探讨的内容：资源的优先级、延迟加载和预加载。4.1 图像延迟加载4.1.1什么是延迟加载

一条高效传递信息的原则：字不如表，表不如图。图像资源优化的根本思想：压缩。无论选取何种图像的文件格式，还是针对同一种格式压缩至更小的尺寸，其本质都是用更小的资源开销来完成图像的传输和展示。3.1 图像基础3.1.1 图像是否必须如果一个页面打开后有很多图像，那么用户其实很难快速梳理出有效信息，即便获取到了也会让用户感觉很累。当确定了图像的展示效果必须存在时，在前端实现上也并非一定就要用图像文件，还存在一些场景可以使用更高效的方式来实现所需的效果。网站中一个图像在不同的页面或不同的交互状态下，需

2.1 一道题经典问题：从浏览器地址栏输入URL后，到页面渲染出来，整个过程发生了什么？前端阶段作答：浏览器接收到URL，到网络请求线程的开启。一个完整的HTTP请求发出。服务器接收到请求并转到具体的处理后台。前后台之间的HTTP交互和涉及的缓存机制。浏览器接收到数据包后的关键渲染路径。JS引擎的解析过程。2.2 网络请求线程开启URL结构：Protocol://Host:port/Path?Query#Fragment标识 名称 备注Protocol 协议头 说明浏览器如何处理要打

1.1 性能的起因人无我有，人有我优，人优我廉，人廉我专1.2 性能的影响1.2.1 用户的留存根据Google营销平台提供的调研发现，如果网站页面加载时间超过3，就会有53%的移动网站的访问遭到用户抛弃。同时她们还针对加载时间分别在5s内和20s内的网站进行比较，发现加载时间在5s内的网站，用户的停留时间相比会长70%，用户在一定时间内从该网站离开的跳出率会低35%，而网站上展示广告的可见率也会高25%。1.2.1 网站的转化率根据Mobify的调研，发现商品的结账页面加载时间每减少100ms