
前端性能优化
文章平均质量分 94
jieyucx
这个作者很懒,什么都没留下…
展开
-
nginx配置gzip压缩,优化传输效率,加快页面访问速度
Nginx的gzip功能是用于压缩HTTP响应内容的功能。当启用gzip时,在发送给客户端之前,Nginx会将响应内容压缩以减小其大小。这样可以减少数据传输的带宽消耗和响应时间,提高网站的性能和速度。启用gzip功能可以在Nginx配置文件中进行设置。通过在配置中添加gzip相关参数,可以指定要压缩的响应内容类型、压缩级别以及开启或关闭gzip功能等。具体来说,gzip减小文件大小:通过对响应内容进行压缩,可以显著减小文件的大小,减少数据传输所需的带宽。原创 2023-09-21 10:07:29 · 16646 阅读 · 1 评论 -
浏览器的消息队列和事件循环机制(宏任务和微任务)
浏览器中的消息队列和事件循环机制是一种用于处理异步任务的方式。浏览器需要能够同时处理多个任务,如网络请求、用户交互等。为了避免任务的阻塞,浏览器使用消息队列来管理任务的执行顺序,并通过事件循环机制来处理任务的执行。fill:#333;color:#333;color:#333;fill:none;浏览器渲染引擎JS引擎消息队列事件循环执行上下文工作原理如下图所示:fill:#333;color:#333;color:#333;fill:none;原创 2023-09-01 16:00:03 · 979 阅读 · 0 评论 -
前端性能优化之js优化
V8是一种开源的JavaScript引擎,由Google开发,用于执行JavaScript代码。它的编译原理是基于即时编译()技术。V8解析parsing)、优化)和代码生成解析阶段在解析阶段,V8将JavaScript代码解析成一种称为抽象语法树(AST)的数据结构。AST是一种以树形结构表示代码的方式,每个节点代表了代码的一个组成部分,例如变量、函数、表达式等。解析阶段还会构建词法作用域()的相关信息,用于后续的优化阶段。优化阶段优化阶段是V8引擎的核心部分。V8使用了一种称为即时编译(原创 2023-08-25 14:44:36 · 655 阅读 · 0 评论 -
前端性能优化之浏览器渲染优化
回流(reflow)是指浏览器重新渲染部分或全部的页面布局,当页面的结构、样式或者布局属性发生变化时,浏览器会触发回流。回流发生在浏览器渲染的过程中的布局阶段。在渲染过程中有两个主要步骤:布局(layout)和绘制(painting)。布局阶段是指浏览器根据元素的盒模型计算出每个元素在页面中的位置和大小,建立元素之间的关系,并生成布局树(render tree)。当浏览器在布局阶段发现页面结构或者样式发生变化时,就会触发回流。原创 2023-08-24 16:53:45 · 1178 阅读 · 0 评论 -
浏览器的渲染原理
浏览器,全称网页浏览器,是一种软件应用程序它翻译HTTP或HTTPS的指令来生成用户可以看到的页面,用户通过它在Internet上导航或浏览信息。信息可能是网页、图片、视频或其他类型的网页内容。浏览器让我们可以连接到Web服务器,下载网页和其他数据到计算机或移动设备,并将这些信息呈现给用户。浏览器并非只能截取和浏览Internet的信息,它还可以从私有网络(例如企业内部的Intranet)或者本地计算机(通过各种协议,包括文件系统)获取信息。常见的浏览器有谷歌Chrome、火狐Firefox、苹果。原创 2023-08-11 17:19:21 · 298 阅读 · 0 评论 -
前端性能优化之性能优化的指标和工具(chrome devtools、lighthouse、webpagetest)
测量模型是谷歌为帮助开发者更好地了解和改善性能问题而开发的一种用户体验评估框架。响应、动画、空闲和加载,对每个阶段都提出了性能目标。响应(Response):处理用户交互的目标是在100毫秒内完成。动画(Animation):每帧的渲染目标是16毫秒,对应的帧率是60帧/秒。空闲(Idle):利用空闲时间执行后台工作,且在50毫秒内能够回应用户的交互。加载(Load):尽量在1000毫秒内完成内容的加载。通过这个框架,开发者可以有针对性地优化并提升用户体验。原创 2023-08-10 16:49:26 · 1684 阅读 · 3 评论