前端技术日新月异,如何细水长流做好性能优化

现在前端技术发展的速度有点刹不住车的感觉,各种框架就跟雨后春笋一样冒出来,对于技术人员来讲去不断的学习这些新框架新工具是一方面,另一方面我们精力有限不可能学习市面上的每一项技术做到全能。

其实新技术不断冒出的背后逻辑还是因为能够去解决现有技术的一些缺陷,例如现有的更新迭代速度不能跟上发版的节奏,那么就可以借助一些效率管理工具去进行改进。

但其实不管我们工作中面临到什么问题,其实还有一种更加靠谱办法,通过我们对现有技术的持续优化去解决,也就是我们经常都在说的性能优化,这种方式对于现有的技术栈影响是最小的。

前端的性能优化包括很多的方方面面,从大的几个方面来讲主要可以分为:网络层面、渲染层面、性能检测几个大的方面。

再往下,又能从大层面进行细分,拆分出各个小的节点,所以我们在性能优化上可以做的事情非常多。

这篇文章就主要从前端性能的优化进行系统的梳理,看看我们还能在哪些地方进行优化。

一、网络层面

网络层面可以分为「请求过程的优化」和「网络请求的优化」。

请求过程的优化我们还能继续向下细分为 DNS 解析、TCP 连接、HTTP请求的优化,其中 DNS 解析和 TCP 连接两个步骤,我们前端可以做的努力非常有限。相比之下,HTTP 连接这一层面的优化才是我们网络优化的核心,HTTP 能分别在构建工具调优、gzip压缩优化、图片优化等流程中去做优化。

网络请求的优化主要可以在本地存储上面下功夫,例如最为典型的是我们可以通过浏览器的缓存机制和离线储存技术进行性能的优化。

另外想多说一句,在网络层面,我们需要学习和了解一些必需的理论基础作为前置知识。因为这部分并不需要大家写特别多的代码,但需要大家对每一个知识点理解透彻,进而应用到自己日常优化的决策中去。

二、渲染层面

其实渲染的优化在两年在前端已经比较火热了,如果我们还不了解这一块,我认为有三个步骤是需要大家进行了解的:服务端渲染的运行机制是什么、服务端渲染解决了什么性能问题 、服务端渲染的应用怎么做。

在渲染层我们可以做的事情比较多,包括客户端渲染、服务端渲染、浏览器渲染、DOM优化、加载页渲染提速等。

这里说说我们最常去做的浏览器渲染,但在研究浏览器微观的运行机制之前,我们首先要对浏览器内核有一个宏观的把握,其后我们可以提出CSS性能方案和JS性能方案去对浏览器的性能做一些提升工作。

其次还有DOM优化,在这个上面我们可以先在原理上面进行深入的理解,再从事件循环、异步更新、回流重绘等环节寻找好的办法。

三、性能监测

在性能检测上面我们可以用到一些工具进行辅助,例如可视化工具 performance、lighthouse 等都可以对我们的监测上面有很大的帮助,另外W3C性能API也是我们可以进行思考的方向。

这么系统的一整理其实大家发现在前端技术上我们可以深入学习的内容还非常多,如果我们真的能够做到深入的持续学习,相信对于我们的技术提升帮助还是非常大的。在进阶的学习上并不是学的越多越好,而是在一定的角度做到更加专业我认为更加有价值。

相关推荐
然我11 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子16 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹20 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器26 分钟前
指定阿里镜像原理
前端
枷锁—sha31 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha32 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss