干货 | 带你玩转前端性能优化!【留言送书】

fb2b3d7a97ef46ec679bd6da5fa8021d.png

大家好,我是若川之前送过三次Vue的书,现在又和博文视点合作再次争取了几本书,具体送书规则看文末。

很多人可能有耐心花费一两个小时在一家火锅店门口排队,但几乎没有人愿意等30s去加载一个短视频。

事实上,对于大多数的 App 或网站来说,别说是30s,即使是3s也足以让大量用户放弃等待转而去做其他的事情。

a12114a310043b9f173a278983126468.png

Google 发现,如果页面加载时间超过3s,53%的移动网站访问活动将难以为继。

性能对于开发人员来说是一个经久不衰的话题,也是用户体验的重要因素。

有人可能会问:

  • 如今计算机和手机的性能都在飞速发展,性能优化还重要吗?

  • 5G时代已经来临,无处不在的高速网络是否已经让我们不需要再那么在意性能问题?

这就要从 Web 领域一大性能原理——安迪-比尔定律说起。

1

安迪-比尔定律

安迪-比尔定律

安迪-比尔定律源于“Andy gives, Bill takes away.”

Andy 指的是 Intel 原 CEO 安迪·格鲁夫,Bill 则是 Microsoft 原 CEO 比尔·盖茨。

这句话的意思是,Intel 一旦向市场推广了一种新型芯片,Microsoft 就会及时升级自己的软件产品,以匹配新型芯片的高性能。

硬件提高的性能,很快就被软件消耗掉了。

9924f12327dfec6a32eaa1c119f1464c.png

对于 Web 领域来说,网络和终端设备的性能确实在飞速发展。然而,几十年来 Web 技术也变得越来越复杂,在网络上传输的不再是一个简单的页面。

让我们回到万维网(World Wide Web)诞生的 20 世纪 90 年代,第一个网页浏览器WorldWideWeb 仅支持 HTML 格式的图片、文字和超链接。

经过几十年的发展,在网络上传输的内容越来越丰富,使用浏览器打开的是高清流媒体、实时网络直播,甚至是直接在浏览器中运行的专业协同应用。

可以预见的是,越来越多原来只能在桌面平台上运行的大型软件也出现在了 Web 平台上,以借助 Web 平台易于传播、跨平台等特性,充分发挥协作互通的优势。

从 2011 年到 2020 年,桌面端和移动端的页面传输字节数(加载完成一个页面需要传输的数据量)逐年上涨,分别约增加了 329%和 1178%。

随着网络基础建设的不断更新换代,更多原来受限于基础设施无法广泛满足的需求大量涌现。例如,近几年短视频的兴起,很大程度上就是因为大多数用户的网络能够在可以接受的时间内加载完视频。

这就是安迪-比尔定律,可以想象,随着未来网络状况的进一步改善,又会有新的媒体和应用形式消耗提升的网络传输能力。

尽管提供硬件和软件的可能不再是 Intel 和 Microsoft,但只要人们对于新功能和体验的追求一直存在,性能优化就是经久不衰的话题。

2

性能优化的魅力

很多人都听过斯坦门茨画一条线 1 万美元的故事,故事是这样的:

美国福特公司曾有一台电机出现故障,导致整个车间都不能运转。福特公司请来很多专家检查,就是找不到问题在哪里。于是请来斯坦门茨,斯坦门茨在电机旁聚精会神地听了 3 天,又要了梯子,爬上爬下忙了很久。最后他在电机的一个部位用粉笔画了一条线,写下了“这里的线圈多绕了 16 圈”。福特公司按图索骥解决了故障。

在平均月薪为 5 美元的当时,斯坦门茨索要了 1 万美元的酬劳:画一条线,1 美元;知道在哪儿画线,9999 美元。

如果说工程师最大的快乐来自创造,那么第二大的快乐来自对精密系统的理解。从中不仅可以领略前人解决问题的设计方案所蕴含的智慧,还能享受抽丝剥茧最终精准找到问题的成就感。

性能优化就是一个典型场景,要做的是理解复杂系统并从中找到性能问题的关键所在。有时甚至能根据问题的表现和对系统的理解,在没有直接发现具体问题时就推测出现问题的真正原因,整个过程充满了预言的魔力。

3

性能优化 = 分析方法 + 技术原理

不同场景的性能优化经验不同,面向计算机的和面向手机的、纯 Web 技术的和 Weex/React Native 等技术的,以及国内的和海外的,上一个场景的经验很难对下一个场景直接发挥作用。

了解性能优化的读者大多听说过“雅虎三十五条优化军规”,里面总结了性能优化需要遵循的一些规则,如合并请求等。但在大多数情况下,直接套用这些规则并不会为页面带来非常明显的性能收益。

不过,其背后的分析思路总是相似的,能够用来找到一套行之有效的方法帮助我们一步步接近性能目标。相比于记住正确但未必有效的具体规则,掌握这些通用的方法能让我们在复杂的生产环境中找到正确的道路。

如果说分析方法是解决性能问题的指南针,那么对技术原理和系统的理解就是照明灯,只有方向但看不到脚下的路是无法前行的。

优化一个系统的性能也一样,分析出这个系统在某个阶段的性能存在问题,却不理解系统背后的运行原理,就好像知道方向却看不见路,只能摸黑前进。

因此,方法与技术原理结合才是性能优化的制胜法宝。

《前端性能揭秘》就以此为原则给了一套通用的解决方案,力求授人以渔而非授人以鱼。

d28f189c746e393a3a28a2606e5f1826.png

新书上市,京东限时下单立减50

内容简介

本书把“度量”、“分析”和“实验”部分放在开头部分,把方法放在具体的技术细节之前,用案例和思考相结合的方式建立面对性能问题时的解决思路,有了方法的指导,我们在遇到具体问题的时候才能进行具体分析。

本书分为两个部分:

  • 如何系统地进行性能优化;

  • 以性能为切面了解前端生态:网络协议、浏览器、构建工具、跨端、CDN 等等。

虽然名为前端性能揭秘,但涉及领域远远不止前端。全书系统性从性能的度量、分析、优化、防腐,抽丝剥茧般地娓娓道来,既有大量理论基础,也有扎实实战佐证,值得一读。

4de9ea105c85fc797abf61f0066bca75.jpeg

作者简介

c1f89c3e4994e7271496ac66330a6081.png

佘锦鑫(花名当轩)

毕业于江南大学理学院,阿里巴巴前前端技术专家,曾负责Alibaba.com海外版性能优化,讲师、开源爱好者。

现就职于网易云音乐,对Web性能、跨端、可视化搭建等领域有较深入的理解。

精彩书评

当轩的这本书介绍了从“度量、分析、实验”的方法论到前端生态有关性能的方方面面,是在深度实践中沉淀出的方法论和知识。当轩曾是我在阿里巴巴的同事,资深开源开发人员,曾在第十五届D2前端技术论坛担任讲师。希望这本书能够给广大读者带来醍醐灌顶式的帮助,诚意力荐。

——Node.js布道者,《狼书》作者 | 桑世龙(花名狼叔)

我认为所有的前端萌新都应该买此书,因为这本书细致地介绍了前端性能优化的方方面面。而那些前端老鸟们,我不信,书中每个知识点,你能做到和作者同等的了解程度。

——字节跳动巨量千川工程负责人 | 耿霄

性能是一个值得开发人员长期投入和研究的课题,涉及从底层网络到上层框架的几乎所有领域。随着研究的逐步深入,开发人员会不断地打开新世界的大门。

锦鑫跟我说他将这些年在性能优化领域的实践和经验写成了书,我非常激动。之前我一直对一起战斗过的日子没有留下体系化的沉淀而感到遗憾,没想到这就来了!在阅读预览版本后我发现,锦鑫还是一如既往,非常专业。等本书上市之后,我会立即将其加入团队优先阅读的列表。

——Alibaba.com买家基础技术团队负责人 | 太泥

性能优化是开发人员一直需要面对的课题,其价值和收益也在不断被验证和提升,涉及用户留存、业务转化、产品体验和传播等方方面面。

锦鑫是我共事多年的同事,这些年一直专注于性能优化方向,并取得了不错的成绩。

本书将理论与实际相结合,从性能度量、工具分析、优化解决等维度为性能优化带来了新方法、新思路,相信对大部分前端开发人员而言非常有借鉴意义。

——网易云音乐音乐内容前端负责人 | 吴越栋

自Web出现以来,开发人员一直面对各种不同的挑战,而性能则是最艰巨的挑战之一。不止浏览器需要优化性能,以保证用户访问网站的流畅度;前端开发人员也需要优化性能,从而让用户在使用服务时可以获得最佳的体验。对性能进行优化要求开发人员不仅要对浏览器处理页面的生命流程有高度认识,还要对数据收集分析有比较严谨的要求,只有具备了这两项能力才能完美地突破性能瓶颈,为用户提供极致的浏览体验。本书作者对数据收集分析、各项性能指标的定义及优化方式有深刻的认识,并将其集结成书,开发人员可以充分利用以突破网站性能瓶颈,为服务带来最大效益。

——Chrome产品解决方案工程师 | Palances Liao

工程的价值不仅体现良好的架构设计,在保证架构合理的同时对性能进行不断深入的优化,还体现了工程师追求极致的精神。性能工作很多时候都是业务相关,需要Case by Case地解决问题。市面上一直没有相应的书籍来总结,截至目前也只有“雅虎三十五条优化军规”这样的指导。

本书作者对其工作经验进行了通用化的整理,希望能给对性能有所追求的读者带来一些思考和总结。另外,本书也是作者工作以来对性能攻坚的经验总结。

——资深前端工程师 | 天翔Skyline

以性能为切面

深度理解前端生态

谷歌、字节、网易群星力荐

121edbcb6fd4b0eb0da8244118eadf5f.png

京东限时下单立减50

快快扫码抢购吧!

发布:刘恩惠

审核:陈歆懿

a5f31d1a6fb040ca778a36af82e16d90.jpeg

文末福利

小伙伴们,可以在本文留言区留言为什么想要这本书~

抽奖规则:在我的公众号结合留言内容随机抽2位获得新书包邮送。

截止时间:10月17日(周一)晚8点,可能延后,以置顶留言为准。

其他几本,在我的微信群和朋友圈等抽奖方式送出。

中奖小伙伴,我会联系兑奖,一般来说,如果当天联系不上视为作废。也可以提前扫码加我微信 ruochuan12 以防失联。或者发送源码两字参与源码共读。

98ddc2570c73c2a447980c423175afb8.jpeg

079869975ef10b5ac540ce79caac16f9.gif

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274520.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何进入游戏行业_进入设计行业

如何进入游戏行业We’re living in some weird-ass times. One of the unfortunate results of a global pandemic is loss of jobs and financial security. While people continue to deal with this, the prospect of entering a new field — especially one that’s sligh…

据说99%的人不知道 vue-devtools 还能直接打开对应组件文件?

大家好,我是若川。据说 99% 的人不知道 vue-devtools 还能直接打开对应组件文件?本文原理揭秘曾经写过以上这篇文章, 也是源码共读中的第一期(点击文末阅读原文直达)。这个功能如下图所示。欢迎大家来投票,你的投票很重要。如果不…

ux设计中的各种地图_UX设计中的格式塔原理

ux设计中的各种地图Gestalt Theory is the theory of visual perception and how our brain pieces together reality. The theory sheds light on how cognition factors into the way viewers read a piece of design. In the German language “Gestalt” means form or sha…

JetBrains下一代IDE:Fleet 公共预览版发布

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 点此扫码加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系…

善用工具_如何善用色彩心理学

善用工具There’s a problem with my movement. Most of us in the profession of trying to change the world have little skills or training in the actual craft of influencing human beings to do stuff — especially stuff that is new to them such as composting, p…

看源码的第一步,我猜很多人搞错了~

大家好,我是若川。今天在江西人的前端群里,有个小伙伴问,vueuse 的 vitepress (也就是官方文档仓库)怎么搭建的,怎么都没有 index.json(引用的一个文件)。本文简单记录下流程&#x…

1.1编写目的_1.目的

1.1编写目的A friend of mine recently founded Secta Leagues. A company that organises sports leagues for working professionals, where companies play sports against one another in the same industry. The vision is to provide an app that allows interested comp…

Web 应用架构的下一个转变

Web 技术大概 25 年前开始萌芽,HTTP、HTML、CSS 和 JS 都是在九十年代中期首次被标准化的。直到如今,Web 演变成一个无处不在的应用平台。随着 Web 的发展,Web 应用程序的开发架构也在不断发展。现在有许多用于构建 Web 应用程序的核心架构&a…

ux和ui_设计社交餐厅策展应用程序— UX / UI案例研究

ux和uiSabor, which translates from “taste” or “flavor” in Spanish, is a concept for an iOS app designed to provide users with honest, reliable and relatable restaurant recommendations from friends and family. It is a social restaurant curation applicat…

你不知道的 script 标签的 defer 与 async 属性

我持续组织了近一年的源码共读活动,感兴趣的可以 点此扫码加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外:目前建…

我是怎么调试 Element UI 源码的

我持续组织了近一年的源码共读活动,感兴趣的可以 点此扫码加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外:目前建…

模板缓冲_模板缓冲以及如何使用它可视化体积相交

模板缓冲介绍 (Introduction) The trendy thing in real-time rendering these days is ray-tracing. However, traditional rasterization hasn’t disappeared, and it won’t in the near future. I recommend this blog post on the subject: A hybrid rendering pipeline …

重磅!哈啰 Quark Design 正式开源,下一代跨技术栈前端组件库

大家好,我是若川。我持续组织了近一年的源码共读活动,感兴趣的可以 点此扫码加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试…

b端 ux 设计思维_借助系统思维从视觉设计过渡到UX

b端 ux 设计思维“How can I switch to UX?” This is a common question from visual designers because there’s a lot of overlap on the surface. But it can also be a difficult transition since UX encompasses much more below the surface.“如何切换到UX&#xff…

三面面试官:运行 npm run xxx 的时候发生了什么?

大家好,我是若川。近期发现好些小伙伴工作有2-3年了,基本不会写脚手架,或者说没学过脚手架。对脚手架大致是如何执行的基本不太知道。其实这类学习资料真的挺多的。而且我们基本天天 npm run dev,应该学习内部实现。不知道的小伙伴…

figma下载_Figma的自动版式实用

figma下载Figma’s Auto Layout has been around for a while, but not everyone’s aware of the benefits it brings. It doesn’t replace constraints, they’re still very much needed. The trick is to use the right feature where necessary. I want to show you how …

Qt通过ODBC读取excel文件

之前替学校考试科用C Builder做过一个小的数据库工具,处理excel表格用的,现在想转换到Qt平台下来,在网上搜了搜有一些利用OBDC读取xls文件的教程: http://hi.baidu.com/kxw102/item/770c496d5736470ca0cf0f1d http://blog.sina.co…

真 · 三面面试官:运行 npm run xxx 的时候发生了什么?

昨晚没权限我只放了链接,今天联系开了白名单。昨天推文主要是为了投票,表明 Node.js 的重要性,有人评论是水文。今天重新转载下。欢迎继续点此去投票。投票显示有高达近80% 表示不太会开发脚手架,看来大多数人确实没有应用场景。可…

ovo svm_反思我在OVO担任远程产品设计实习生的时间

ovo svmIn a quiet bedroom accompanied only by the low humming of my laptop fan, I sat before a Google Hangouts meeting, and got to know my colleagues for the first time, unaware of the joy of a ride that was waiting for me at OVO Design.在一个安静的卧室里&…

最受读者喜爱的前端书 Top 15【留言送书】

最受读者喜爱的前端书Top 15JavaScript高级程序设计(第4版)| 中文版累计销量32万册,JavaScript“红宝书”全新升级 | 涵盖ECMAScript 2019,全面深入,入门和进阶俱佳 | 结合视频讲解配套编程环境,助你轻松掌…