前端性能优化实践方案
文章平均质量分 94
前端的顶峰是架构和性能优化,工作了几年之后性能优化是尤为重要的,以此提高我们的核心竞争力
欧阳呀
早一批“吃螃蟹”的人。多年前端开发及项目管理经验,擅长vue,原生js,react。v: ouyang_Allen,承接毕设
展开
-
webpack 打包原理及流程解析,超详细!
友情提示:a.前面会稍微有些枯燥,文字居多(建议还是过一遍),后面就劲爆了!!!b.本文干货满满,非常详细,整理资料到发布文章耗时5个小时+,请大家耐心看本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换成输出结果。原创 2023-07-21 15:35:06 · 9194 阅读 · 12 评论 -
js 代理模式妙用 —— 优化大图加载时用户体验
什么是代理模式代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问。举个例子:明星与经纪人的关系,明星是请求的本体,经纪人就是代理proxy如何实现代理模式代理对象内部含有对本体对象的引用,因而可以与调用本体的相关方法;同时,代理对象提供与本体对象相同的接口,方便在任何时刻代理本体对象。代理模式经典的应用场景 —— 大图加载缓冲大家都应该经历过这种情况:网页内加载图片的时候(无论是手机端还是PC端),当网络情况不佳或是图片过大时,就会出现图片一截一截的慢慢出现,如图.原创 2020-08-11 19:28:48 · 911 阅读 · 0 评论 -
前端性能优化怎么做?阿里淘宝性能优化实施方案奉上
宗旨与理念一切没有 profiling 的性能都是做无用功。性能优化不能只着眼于局部的代码,凡是真正有价值的性能优化,必定是从端到端的业务场景建立体系来考虑的。性能体系建立方案现状评估和建立指标 技术方案 执行 结果评估和监控1.现状评估和建立指标 a)现状评估作为一个架构师,指标要考虑两个因素。一方面,对用户来说,什么样的性能指标能更好地评估它的体验?另一方面,对公司来说,什么样的指标会影响业务价值? b)性能指标内存、电量消耗 动画与...原创 2020-07-17 16:18:27 · 700 阅读 · 1 评论 -
深入浏览器内部谈性能优化
1.浏览器发展历史a. 1995 年,美国网景公司因“网景浏览器”的发布而快速崛起b. 同年,微软发布windows95,捆绑IEc. 2002年,微软占据了浏览器市场80%的份额2.浏览器三大进化路线(Web应用能做的事以及未来发展趋势)a) 应用程序Web化,如:视频、音频、游戏b) Web应用移动化,如:谷歌新推出的PWA方案c) Web操作系统化,如,SOA,WebAssembly3.学习浏览器的重要性a) 准确评估 Web 开发项目的可行性...原创 2020-07-09 13:58:18 · 22471 阅读 · 0 评论 -
深度探秘web前端性能优化
性能优化总论1.性能优化的必要性性能优化一直是我们在讨论的一个话题,也是很重要的知识点,当项目功能越来越多,模块规模一步步扩大,就会发生一系列的性能问题,比如说vue首屏加载会变得非常慢,编译会延迟,打包也要等半天。必须明确性能优化的重要性,任何一个项目的生命历程都会走向性能优化这个阶段2.性能优化的误区我们经常会犯错误的一个地方是,混淆了性能优化与执行效率的概念。比如:1...原创 2019-11-02 14:20:41 · 533 阅读 · 2 评论