《Web Performance IN ACTION》web性能优化

最新推荐文章于 2024-07-20 18:16:53 发布
最新推荐文章于 2024-07-20 18:16:53 发布
阅读量140 收藏
点赞数
分类专栏： web性能优化 文章标签： 前端 性能优化 服务器 javascript edge浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42943914/article/details/126372695
版权

Web Performance IN ACTION 这本书主要目的是为了帮助我们去创建一个更快的网页。通过本书，我们可以掌握一些提高现有网站的技术。

文章目录

第一章、 Understanding web performance - 了解网络性能

阅读完本章之后，我们能得到这几个问题的答案

  • 为什么web性能会如此重要？
  • web 客户端是如何和web 服务器端进行交互的？
  • 性能很差的网站会给用户体验造成多大的伤害？
  • 如何使用基本的web性能优化技术？

  你可能已经听说过和网站相关的性能，但是它是什么，为什么我们需要去关注它？网站性能主要和网页加载速度有关。网站性能是很重要的，因为缩短网站加载时间可以改善网站在所有互联网连接上的用户体验。改善了用户体验只有，用户更愿意在我们的网站中停留查看网站提供的内容。这有助于按住我们实现让更多用户访问网站的目标，或者能提高用户在网站上进行交互的概率。糟糕的网站性能十分考验用户的耐心，这可能会导致用户在还没看到我们网站内容的时候就放弃了我们的网站。

  如果网站是您的主要收入来源，那么对网站性能进行评估是一件十分有意义的事情。如果你有一个依赖广告收入的电子商务网站或个人门户网站，那么网站性能会是影响你收入的一个重要因素。

  通过学习本章，你将会了解到 web 性能优化的重要性，还能掌握一些基础的web 性能优化技术以及应用这些技术来优化single-page网站

  你可能是一个对web性能优化略知一二，但是了解得不是很深入的开发者；或许你已经掌握一些web性能优化技术，并能对web的性能进行一些优化了，但是通过学习本书，你会发现你还能对现有网站做更进一步的优化。

  无论你是一个在web 性能优化领域的小白还是web性能优化的高手，都不用担心，本书的目标就是为了帮助您更好的了解web性能、以及web性能优化的手段，以及如何将这些性能优化手段应用到自己的网站中。

  在讨论web性能的细节之前，了解目前我们面临的一些性能问题也是很重要的。

web 性能和用户体验
  高性能的网站可以提高用户体验。通过提高网站加载速度，可以提高用户在网页中的交互体验。此外，当网站加载速度比较快时，用户更愿意在网页中停留和关注网页中的内容。没有一个用户愿意使用一个加载过慢的网站。
  加载慢的网站对用户的参与度也有这可度量的影响。尤其是在一些电子商务网站中，近一半的用户对网页加载时长的期望值是2s。近40%的用户在网页加载超过3s时就会关闭网站。网页每延迟加载1s就会导致7%的用户减少交互。这不仅意味着会损失用户量，还会损失网站的收益。
  此外，网页性能不仅会对你的用户产生影响，还会影响在Google中的搜索排名。早在2010年，Google就表示，web 加载速度会是网站在搜索排名中的一个因素。尽管网站的内容仍然是网站搜索排名中的重要因素，但是页面的加载速度同样发挥了作用。
  让我们来看看Legendary Tones的搜索排名，Legendary Tones是一个相对受欢迎的吉他和吉他配件的博客网站，每月有近20000名用户访问量。这个网站大部分的自然搜索流量主要和网站优质的内容相关。使用Google Analytics,可以获得网站所有页面的平均加载速度的数据，并且可以获得网页平均加载速度和平均排名之间的关联。图1.1 显示了2015年一个月的调查图标调查结果。
图 1.1
  搜索排名保持稳定，网页加载时间每多1s，搜索排名就会下降。如果你的网站是一个以展示内容为导向的网站，例如博客，自然搜索是网站最大的流量来源，这时关注网站性能的提升是很有意义的减少网页加载时间是成功的标准之一。
  现在你已经了解了web性能的重要性，我们可以开始讨论web客户端和服务器端是如何进行通信的，以及在通信过程中是什么因素导致网站加载速度变慢的了。

客户端和服务器端通信

第二章、 Using assessment tools - 使用性能评估工具

第三章、 Optimizing Css - css 性能调优

第四章、 Understanding critical CSS - 了解(critical css)首屏渲染的最小CSS 集合

第五章、 Making images responsive - 使图像具有响应性

第六章、 Going further with images - 更近一步的了解图像

第七章、 Faster fonts - 加快fonts加载速度

第八章、 Keeping Javascript lean and fast - 保持js精简和快速

第九章、 Boosting performance with service workers - 提高服务端运行性能

第十章、Fine-tuning asset delivery - 网页组成部分技术的调优

第十一章、Looking to the future with HTTP/2 - 展望HPPT/2的未来

第十二章、Automating optimization with gulp - 使用gulp进行自动优化

Code Crafter
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web performance in action学习前言
前端岚枫
01-06 590
今天开始研究学习《web performance in action》这本书，以后在这个专栏里记录自己学习的内容，希望通过原版的，能把这些技术学的更深入，好好应用的工作中，并分享给想学的朋友们。
关于Web Performance in Action: Building Fast Web Pages的翻译---持续更新中
qq_41296374的博客
05-08 289
最近找工作，刚打开简历第二天、5个面试，真就面的快吐了，赶紧把简历关闭、后来发现公司关注的较多的是性能优化、网络这块、所以就开始着手关于这块的学习计划提上日程、不知道怎么回事、迷上了炉石传说、可能写程序的写多了都会迷上这个游戏吧、会慢慢思考背后的数据结构和算法，不废话，贴上要翻译的书、这个作者有10年的前端工作经验、而且关于性能优化这块我会再参考其他优质的资料完善这块内容，一起加油叭！ 2020/05/08 西安 天气热不热冷不冷 ...
Web.Performance.in.Action.Building.Faster.Web.Pages.epub
01-26
The content of the web is maturing and increasing in complexity, but internet infrastructure quality varies widely across the globe. People are browsing the web through a greater variety of devices and networks than ever before. Your website's visitors may be browsing via resource constrained connections, or limited by restricted data plans. Due to these hard realities, it's more important than ever that your website loads quickly, lest you alienate your visitors before they ever get a chance to see what your site has to offer. Web Performance in Action is your companion guide to making websites faster. Throughout the course of this book, you'll learn techniques that speed the delivery of your site's assets to the user, increase rendering speed, decrease the overall footprint of your site, as well as learn how to build a workflow that automates common optimization techniques. You'll also get a look at new technologies such as HTTP/2 that will take your website's speed from merely adequate to seriously fast. Table of Contents Chapter 1. Understanding web performance Chapter 2. Using assessment tools Chapter 3. Optimizing CSS Chapter 4. Understanding critical CSS Chapter 5. Making images responsive Chapter 6. Going further with images Chapter 7. Faster fonts Chapter 8. Keeping JavaScript lean and fast Chapter 9. Boosting performance with service workers Chapter 10. Fine-tuning asset delivery Chapter 11. Looking to the future with HTTP/2 Chapter 12. Automating optimization with gulp Appendix A. Tools reference Appendix B. Native equivalents of common jQuery functionality
Web Performance in Action
01-21
Web Performance in Action: Building Faster Web Pages by Jeremy Wagner English | 2017 | ISBN: 1617293776 | 376 pages | PDF The content of the web is maturing and increasing in complexity, but internet infrastructure quality varies widely across the globe. People are browsing the web through a greater variety of devices and networks than ever before. Your website's visitors may be browsing via resource constrained connections, or limited by restricted data plans. Due to these hard realities, it's more important than ever that your website loads quickly, lest you alienate your visitors before they ever get a chance to see what your site has to offer. Web Performance in Action is your companion guide to making websites faster. Throughout the course of this book, you'll learn techniques that speed the delivery of your site's assets to the user, increase rendering speed, decrease the overall footprint of your site, as well as learn how to build a workflow that automates common optimization techniques. You'll also get a look at new technologies such as HTTP/2 that will take your website's speed from merely adequate to seriously fast.
Web Performance in Action Building Faster Web Pages 正式版无水印pdf 0分
01-22
Web Performance in Action Building Faster Web Pages 英文无水印pdf pdf使用FoxitReader和PDF-XChangeViewer测试可以打开
如何对Apache Web服务器进行性能优化
zstack_org的博客
03-31 3136
提供：ZStack云计算 系列教程本教程为Django规模扩展系列三篇中的第二篇。内容介绍Apache是一套极为强大的Web服务器。为了简化初始设置，其提供多种预安装模块。如果大家希望快速实现项目上线并投入生产，其无疑是最为出色的备选方案。不过，随着站点规模的扩大，大家往往会面临更多性能问题。DigitalOcean的最低配置Droplet，其内存容量为512 MB。如果大家实际选择的配置更低，或者
Web Performance in Action Building Faster Web Pages mobi
10-06
Web Performance in Action Building Faster Web Pages 英文mobi 本资源转载自网络，如有侵权，请联系上传者或csdn删除 本资源转载自网络，如有侵权，请联系上传者或csdn删除
web performance
09-08
javascript/css/html 性能调优总结
前端面试题日常练-day97 【Less】
最新发布
qq_44640575的博客
07-20 318
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1069
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 535
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
LG 选择 Flutter 来增强其智能电视操作系统 webOS
恋猫de小郭的博客
07-17 1532
总的来说，LG 是 Flutter 在 TV 领域的一次新的尝试，并且它是在脱离了 Android 平台的场景下实现的支持，虽然 webOS 并不是什么流行的系统，但是这也体现出了 Flutter 的特点：可以用较低的成本实现较好性能的跨平台。后续，在 LG 的主导下，WebOS 经过进一步修改，转变为智能电视操作系统，于是 WebOS TV 就诞生了，此后 LG 的 TV 基本路线定为 webOS ，在应用层面，WebOS TV 以基于 Web 的技术为基础。然后 LG 为什么选择 webOS？
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 304
【代码】博客前端项目学习day03——框架页。
前端性能优化--懒加载
weixin_43799793的博客
07-19 114
3、同时还可结合 lazy loading 属性，利用浏览器的原生属性，进一步优化图片加载，不过其延迟加载机制完全是由浏览器自身决定的，在不同浏览器上效果不同(BTW，部分浏览器可能并不支持)。2、然后对元素进行监听，当图片进入可视区域时，提取元素的 data-src 即真实的图片地址赋值给 src 属性，就会去发送请求加载图片，实现了懒加载。设置为 1 张 1px*1px 的透明图片用作占位符，以防止出现出错图标。TinyPNG 网站: https://tinypng.com/
vue3前端开发-如何让自己的网站适合SEO排名规则
yrldjsbk的博客
07-17 197
我们大家都知道，原始出生的vue3项目，原始代码层面，是没有meta标签的，也就是说，不适合SEO排名规则。SEO排名规则，蜘蛛爬虫抓取网站页面的内容，就会把这种meta标签内容进行采集，匹配。但是，这个技术要求大家还是应该知道的。黑马教育，课程，前端课程案例项目：小兔鲜儿超市，vue3前端项目案例。想学习vue3前端开发，拿来练习，实战的朋友们，值得一看哦。这个代码，就是我自己手工录入的。录入后，再次在浏览器界面刷新请求服务器。返回的代码模块就可以看见了。自己刚刚手工录入的meta信息出现了。
谷粒商城实战笔记-35-前端基础-ES6-模块化
epitomizelu的专栏
07-20 372
模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要使用一个包，必须先导包。JS 中没有包的概念，JS中类似的概念是模块。export和import。export命令用于规定模块的对外接口。import命令用于导入其他模块提供的功能。
Web Pages 表单
07-20 216
Web pages 表单是现代网页设计中不可或缺的组成部分，它们允许用户与网站进行交互，提交信息，如注册、登录、反馈、预订等。表单的设计和功能对用户体验和网站的业务目标有着直接的影响。本文将深入探讨Web pages表单的各个方面，包括设计原则、常用元素、验证机制和最佳实践。
前端小项目-强调鼠标悬停时效果的名片
关注收藏，可以私信解决问题！
07-19 852
在学习完HTML和CSS之后，我们就可以开始做一些小项目了。本篇文章所讲的小项目为——动态效果名片。通过这个项目，你将学会如何使用HTML和CSS来创建一个具有动态效果的名片。
实战提升网站性能：《Web Performance in Action》指南
《Web Performance in Action》是一本由Jeremy L. Wagner撰写的专业书籍，专为那些希望提升网站性能、优化网页加载速度和用户体验的Web开发者和设计师提供实践指导。本书深入探讨了在当前高速互联网环境中，如何构建...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值