本文旨在收拾常见Web前端功能优化的思路，可供前端开发参阅。由于力求精简，限于篇幅，所以并未胪陈具体实施方案。根据现代Web前端结构的使用，其原理是通过浏览器向服务器发送网络恳求，获取必要的index.html和打包好的JS、CSS等资源，在浏览器内履行JS，动态获取数据并烘托页面，从而将结果出现给用户。在这个过程中，有两个过程或许较为耗时，一个是网络资源的加载，另一个是浏览器内代码履行和DOM烘托。而耗时的添加会导致页面呼应慢，卡顿，影响用户体会。针对上述两种耗时的情况，常见的优化方向有：缩短恳求耗时；削减重排重绘；改进JS功能。1 缩短恳求耗时网络资源是Web使用运转的根底，改进网络资源加载速度会显著改进前端功能。1.1 优化打包资源全体准则： 削减或推迟模块引证，以削减网络负荷。常用东西：webpackwebpack-bundle-analyzer可视化剖析东西常用办法：减小体积：削减非必要的import；压缩JS代码；装备服务器gzip等；运用WebP图片；按需加载：可根据“路由”、“是否可见”按需加载JS代码，削减初度加载JS体积。比如能够运用import()进行代码分割，按需加载；分开打包：运用浏览器缓存机制，根据模块更新频率分层打包。其他办法：雪碧图：每个HTTP/1.1恳求都是独立的TCP衔接，最大6个并发，所以兼并图片资源能够优化加载速度。HTTP/2已经不需求这么做了。1.2 CDN加快全体准则： 通过分布式的边缘网络节点，缩短资源到终端用户的访问推迟。常用东西：CloudflareAWS CloudFrontAliyun CDN常用办法：加快图片、视频等大体积文件1.3 浏览器缓存全体准则：防止重复传输相同的数据，节约网络带宽，加快资源获取。常用办法：能够通过设置HTTP Header来操控缓存战略，一般有如下几种。强缓存Expires：HTTP/1.0Cache-Control：HTTP/1.1协商缓存ETag + If-None-MatchLast-Modified + If-Modified-Since拿ETag举例，假如浏览器给的If-None-Match值与服务端给的ETag值相等，服务器就直接回来304，从而防止重复传输数据。ETag示例：假如几个装备一起存在，则优先级为：Cache-Control > Expires > ETag > Last-Modified。1.4 更高版别的HTTP全体准则：运用高版别HTTP提高功能。常用东西：HTTP/2HTTP/2较HTTP/1.1最大的改进在于：多路复用：单一TCP衔接，多HTTP恳求，有Demo；头部压缩：削减HTTP头体积；恳求优先级：优先获取重要的数据；服务端推送：自动推送CSS等静态资源。其他办法：HTTP/3HTTP/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-windowreact-loadableJS原生，如IntersectionObserver结构供给，如React.lazy、react-intersection-observer常用办法：虚拟列表：只烘托可见区；慵懒加载：无限翻滚；按需加载：页面只在切换过去时才加载。以虚拟列表举例，以下是运用react-window库，只是烘托了可见区的数据：2.2 削减烘托次数全体思路：防止重复的烘托。常用东西：lodashJS或结构自带常用办法：防抖与节流；关于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）：18sJS（V8）：32sWeb Assembly（V8+EMCC）：39s一种或许的猜想是，斐波那契核算中没有很多的类型推断，而且V8内部有一些优化机制，使得此处JS履行速度快于Web Assembly。简而言之，并非一切场景都适用于Web Assembly。另一种运用场景是，把不同语言编写的代码（C/C++/Java等）编译为Web Assembly，能以接近原生的速度在Web中运转，而且与JS共存。总结导致前端功能问题的要素是多方面的。假如是前端资源加载慢，导致页面慢，则应该考虑如何缩短恳求耗时。而假如是前端页面逻辑粗笨，UI数据量太大，则能够试着从削减重排重绘的角度去优化。关于耗时长的杂乱核算，缓存核算结果往往是收效较快的优化方法。最后需求注意的是，在实际使用开发过程中，由于受限于开发本钱，所以需求平衡优化所花的价值与其对应产生的成效。能够有针对性地对功能瓶颈进行剖析和处理，一起也需求防止引入不必要的优化措施，以保证最终优化效果。

版权免责声明: 本站内容部分来源于网络，请自行鉴定真假。如有侵权，违法，恶意广告，虚假欺骗行为等以上问题联系我们删除。
本文地址：https://www.5955.cn/a/465.html