0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

Web前端性能优化思路

van 来源:未知 作者:van 2022-10-18 14:21 次阅读

本文旨在整理常见Web前端性能优化的思路,可供前端开发参考。因为力求精简,限于篇幅,所以并未详述具体实施方案。

基于现代Web前端框架的应用,其原理是通过浏览器向服务器发送网络请求,获取必要的index.html和打包好的JS、CSS等资源,在浏览器内执行JS,动态获取数据并渲染页面,从而将结果呈现给用户。

在这个过程中,有两个步骤可能较为耗时,一个是网络资源的加载,另一个是浏览器内代码执行和DOM渲染。

而耗时的增加会导致页面响应慢,卡顿,影响用户体验。

针对上述两种耗时的情况,常见的优化方向有:

  1. 缩短请求耗时;
  2. 减少重排重绘;
  3. 改善JS性能。

1 缩短请求耗时

网络资源是Web应用运行的基础,改善网络资源加载速度会显著改善前端性能。

1.1 优化打包资源

总体原则:减少或延迟模块引用,以减少网络负荷。

常用工具:

常用方法:

  • 减小体积:减少非必要的import;压缩JS代码;配置服务器gzip等;使用WebP图片;
  • 按需加载:可根据“路由”、“是否可见”按需加载JS代码,减少初次加载JS体积。比如可以使用import()进行代码分割,按需加载;
  • 分开打包:利用浏览器缓存机制,依据模块更新频率分层打包。

其他方法:

  • 雪碧图:每个HTTP/1.1请求都是独立的TCP连接,最大6个并发,所以合并图片资源可以优化加载速度。HTTP/2已经不需要这么做了。

1.2 CDN加速

总体原则:通过分布式的边缘网络节点,缩短资源到终端用户的访问延迟。
常用工具:

常用方法:

  • 加速图片、视频等大体积文件

1.3 浏览器缓存

总体原则:避免重复传输相同的数据,节省网络带宽,加速资源获取。

常用方法:
可以通过设置HTTP Header来控制缓存策略,一般有如下几种。

  • 强缓存

    • Expires:HTTP/1.0
    • Cache-Control:HTTP/1.1
  • 协商缓存

    • ETag+If-None-Match
    • Last-Modified+If-Modified-Since

ETag举例,如果浏览器给的If-None-Match值与服务端给的ETag值相等,服务器就直接返回304,从而避免重复传输数据。

ETag示例:

如果几个配置同时存在,则优先级为:Cache-Control>Expires>ETag>Last-Modified

1.4 更高版本的HTTP

总体原则:使用高版本HTTP提升性能。

常用工具:

  • HTTP/2

HTTP/2较HTTP/1.1最大的改进在于:

  • 多路复用:单一TCP连接,多HTTP请求,有Demo
  • 头部压缩:减少HTTP头体积;
  • 请求优先级:优先获取重要的数据;
  • 服务端推送:主动推送CSS等静态资源。

其他方法:

  • HTTP/3

HTTP/3基于UDP,有很多方面的性能改进,如多路复用无队头阻塞,响应更快。感兴趣的同学可参考Wiki

1.5 Web Socket

总体原则:解决HTTP协议无法实时通信的问题。

Web Socket是一条有状态的TCP长连接,用于实现实时通信、实时响应。

1.6 服务器端渲染(SSR)

总体原则:第一次访问时,服务器端直接返回渲染好的页面。

一般流程:

  • 浏览器向 URL 发送请求;
  • 服务器端返回“空白”index.html
  • 浏览器不能呈现页面,需要继续下载依赖;
  • 加载所有脚本后,组件才能被渲染。

SSR流程:

  • 浏览器向 URL 发送请求;
  • 服务器端执行JS完成首屏渲染并返回;
  • 浏览器直接呈现页面,然后继续下载其他依赖;
  • 加载所有脚本后,组件将再次在客户端呈现。它将对现有View进行合并。

常用工具:

  • Node.js,用于服务器端执行代码,输出HTML给浏览器,支持所有主流前端框架
  • Next.js,用于服务器端渲染React的框架
  • gatsby,用React生成静态网站的工具

除了可以提升页面用户体验,还能应用于SEO。

2 减少重排重绘

除了网络资源以外,另一个影响前端性能的因素就是前端页面的渲染绘制效率。

虽然不同的前端框架有一些差异,但整体的优化思路是一致的,这里将以React举例。

2.1 减少渲染量

总体原则:不渲染未展示的部分。

常用工具:

  • react-window
  • react-loadable
  • JS原生,如IntersectionObserver
  • 框架提供,如React.lazyreact-intersection-observer

常用方法:

  • 虚拟列表:只渲染可见区;
  • 惰性加载:无限滚动;
  • 按需加载:页面只在切换过去时才加载。

以虚拟列表举例,以下是使用react-window库,仅仅渲染了可见区的数据:

2.2 减少渲染次数

总体思路:避免重复的渲染。

常用工具:

  • lodash
  • JS或框架自带

常用方法:

  • 防抖与节流;
  • 对于React函数组件来说,合理使用副作用,拆分无关联的副作用;
  • 对于React类组件来说,可以使用shouldComponentUpdate或使用PureComponent来优化渲染;
  • 利用缓存,如React.memo;
  • 使用requestAnimationFrame替代setInterval执行动画。

3 改善JS性能

因为浏览器是单线程异步模型,长时间的运算会阻塞渲染过程,所以改善复杂运算有助于改善前端的整体性能。

3.1 缓存复杂计算

总体思路:避免重复计算。

常用方法:

  • 对于React函数组件来说,可以使用useMemo缓存复杂计算值。

举例如下,memoizedValue需要经过复杂计算才能得到,此时就可以使用useMemo缓存,仅仅在输入参数发生变化时才重新计算,避免计算阻塞页面渲染,从而避免页面卡顿。


1const MyFunctionalComponent = () => {
2 const memoizedValue = useMemo(() => {
3   computeExpensiveValue(a, b);
4 }, [a, b]);
5
6 return ;
7}

useMemo自身也有性能消耗,需要视情况使用,某些场景可以利用React的渲染机制避免性能问题,可以参考《Before You memo()》

3.2 Web Worker

总体原则:多线程思想。

常用方法:

  • Dedicated Workers,处理与UI无关的密集型数学计算:大数据集合排序、数据压缩、音视频处理;
  • Service Worker,服务端推送,或者PWA中配合CacheStorage在前端控制缓存资源;
  • Shared Worker,Tab间通信。

JS语言在设计之初就是单线程异步模型,好处是可以高效处理I/O操作,但坏处是无法利用多核CPU

Web Worker会启动系统级别的线程,可进行多线程编程,发挥多核的性能。

3.3 Web Assembly

总体原则:将复杂的计算逻辑编译为Web Assembly,避免JS类型推断过程中的性能开销,可用于性能的极限优化。

适用范围有限:

曾在网上看到,有人使用自顶向下非优化的斐波那契数列算法来举例,说Web Assembly比原生JS快一倍,实测之后似乎也没有。

在同一台机器测试,其中求第48个值的耗时如下:

  • C(Ubuntu+GCC):18s
  • JS(V8):32s
  • Web Assembly(V8+EMCC):39s

一种可能的猜想是,斐波那契计算中没有大量的类型推断,而且V8内部有一些优化机制,使得此处JS执行速度快于Web Assembly。

简而言之,并非所有场景都适用于Web Assembly。

另一种运用场景是,把不同语言编写的代码(C/C++/Java等)编译为Web Assembly,能以接近原生的速度在Web中运行,并且与JS共存。

总结

导致前端性能问题的因素是多方面的。

如果是前端资源加载慢,导致页面慢,则应该考虑如何缩短请求耗时。而如果是前端页面逻辑笨重,UI数据量太大,则可以试着从减少重排重绘的角度去优化。对于耗时长的复杂计算,缓存计算结果往往是见效较快的优化方式。

最后需要注意的是,在实际应用开发过程中,因为受限于开发成本,所以需要平衡优化所花的代价与其对应产生的成效。可以有针对性地对性能瓶颈进行分析和处理,同时也需要避免引入不必要的优化措施,以确保最终优化效果。

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 性能
    +关注

    关注

    0

    文章

    265

    浏览量

    18817
收藏 人收藏

    评论

    相关推荐

    模拟前端芯片的差异分析

    模拟前端芯片,作为电子设备中的关键组件,承担着将模拟信号转换为数字信号的重要任务。然而,由于应用场景、设计思路、工艺技术等因素的不同,市面上的模拟前端芯片存在着诸多差异。本文将从功能、性能
    的头像 发表于 03-16 15:22 381次阅读

    web前端开发和前端开发的区别

    、CSS和JavaScript等技术来构建用户界面,实现用户与应用程序的交互。Web前端开发包括网页设计、网页编码、前端框架使用以及优化页面性能
    的头像 发表于 01-18 09:54 965次阅读

    MySQL性能优化方法

    MySQL 性能优化是一项关键的任务,可以提高数据库的运行速度和效率。以下是一些优化方法,包括具体代码和详细优化方案。
    的头像 发表于 11-22 09:59 270次阅读

    javaweb是前端还是后端

    JavaWeb既可以是前端,也可以是后端。 JavaWeb前端主要是指使用Java语言开发的用于构建Web前端应用程序的技术框架和工具。它主要负责用户界面的展示以及与用户之间的交互。J
    的头像 发表于 11-16 10:51 903次阅读

    Web应用防火墙的性能优化技术

    Web应用防火墙(WAF)是企业网络安全的重要屏障,其性能直接影响到网络服务的质量和安全。本文详细探讨了WAF性能优化的几种技术,旨在为网络安全专业人员提供实用的参考。一、规则
    的头像 发表于 10-14 08:33 330次阅读
    <b class='flag-5'>Web</b>应用防火墙的<b class='flag-5'>性能</b><b class='flag-5'>优化</b>技术

    Web应用防火墙的性能优化技术

    Web应用防火墙(WAF)是企业网络安全的重要屏障,其性能直接影响到网络服务的质量和安全。本文详细探讨了WAF性能优化的几种技术,旨在为网络安全专业人员提供实用的参考。   规则
    的头像 发表于 10-13 13:58 187次阅读

    Harmony自定义页面请求与前端页面调试

    。 在下面的示例中,Web组件通过拦截页面请求“https://www.intercept.com/test.html”,在应用侧代码构建响应资源,实现自定义页面响应场景。 ● 前端页面
    发表于 09-20 17:55

    HarmonyOS应用侧与前端页面数据通道建立

    ()\'); }) } } } 二、 前端页面调用应用侧函数 开发者使用Web组件将应用侧代码注册到前端页面中,注册完成之后,前端页面中使用注册的对象名称就可以调用应用侧的函数,实
    发表于 09-15 15:31

    HarmonyOS 应用开发 Web 组件基本属性应用和事件

    一、Web组件概述 Web组件用于在应用程序中显示Web页面内容,为开发者提供页面加载、页面交互、页面调试等能力。 ● 页面加载:Web组件提供基础的
    发表于 09-15 15:28

    新知同享 | Web 开发性能提升,优化体验

    现场一览 Web 开发不断发展,每年都带来性能提升和功能迭代,开启丰富多样的新体验,让开发者能够获享高级计算功能。谷歌提供工具和解决方案,帮助开发人员构建符合心意的网页,既能满足特定需求,又能为用户提供
    的头像 发表于 09-09 19:10 500次阅读

    React请求机制优化思路介绍

    说起数据加载的机制,有一个绕不开的话题就是前端性能,很多电商门户的首页其实都会做一些垂直的定制优化,比如让请求在页面最早加载,或者在前一个页面就进行预加载等等。
    的头像 发表于 08-22 10:04 369次阅读
    React请求机制<b class='flag-5'>优化</b><b class='flag-5'>思路</b>介绍

    一文带你详解芯片--SL8541e-系统性能优化

    背景 伙伴反馈,设备操作卡顿,OH基础系统版本应用操作慢,应用人机交互体验差。本文为你总结芯片解决方案–SL8541e-系统性能优化。主要内容包括: *1. 确定优化思路 帧率
    发表于 08-22 09:12

    Web站点性能优化及安全性(1)#web开发技术

    Web开发技术
    未来加油dz
    发布于 :2023年07月12日 15:10:04

    腾讯开源的前端框架介绍

      今天推荐两个腾讯开源的前端框架,分别是 wujie(无界)和 Omi。 wujie(无界) 无界微前端是一款基于 Web Components + iframe 微前端框架,具备成
    的头像 发表于 06-17 14:44 1391次阅读
    腾讯开源的<b class='flag-5'>前端</b>框架介绍

    前端与后端编程有什么区别

    什么是web开发?Web开发是创建网站或Web应用程序的过程。我们可以将其分为两个主要层:前端开发和后端开发。 每个网站都有后端和前端
    的头像 发表于 05-05 18:19 955次阅读