Web前端性能优化

这本书讲的前端性能优化，从概述/优化的具体实现/性能监测3个方面来叙述的。 一个网站，性能评价可以用一个字来形容: ”快”，这意味着更少的请求与更快的渲染。 从更少的请求出发，那就意味着从服务器上拿回来的前端3大件，资源体积要更小，请求复用，缓存请求，代码压缩，cdn 从更快的渲染出发，图像/视频的加载，JS优化，重绘重排，数据存储，缓存。 剩下的就是性能的检测，使用浏览器自带的工具或api进行检查，量化结果。 另一种方案是全链路埋点统计，书中没提。 大纲清晰，就是分节的话，如果按照更快的请求和更快的渲染来讲，我觉得阅读时更容易在脑中形成框架，现在相对比较零散。

很通用的入门书、泛泛而谈，很多技术老了

比较完整的体系，可以在工作去完善知识体系。

挺适合初学者了解web性能优化的方式。

本书写的很详细，详细阐述了从哪些方面优化前端项目，很有指导性。以下是我阅读之后的总结，有需要的小伙伴可以参考下~~ 为什么要进行性能优化？ 1、用户的留存率：根据Google营销平台提供的调研发现，如果网站页面的加载时间超过3s，就会有53%的移动网站的访问遭到用户抛弃。 2、网站的转化率：从运营角度来看，网站转化率是一个非常重要的考量指标，网站转化率指的是用户进行了某项目标行为的访问次数与总访问才次数的比率。 用户如何感知网站性能？ 1、响应：必须在100ms内收到反馈，如果超过100ms的时间，用户就会感知到延迟； 2、动画：由于视神经存在反应速度造成，其值是1/24s，即当我们所见的物体移除后，该物体在我们眼中并不会立即小时，会延续存在1/24s的时间； 3、空闲：利用空闲时间处理延迟，可减少预加载的数据大小，以保证网站/应用快速完成加载；处理任务按50ms为单位分组，保证用户在发生操作后100ms内给出响应； 4、加载：用户感知要求我们尽量在1s内完成页面加载，如果没有完成，用户的注意力就会分散到其他事情上，并对当前处理的任务产生中断感（在1s内完成加载并渲染出页面的要求，并非要完成所有页面资源的加载），从用户感知体验的角度来说，只要关键渲染路径完成，用户就会认为全部加载已完成。 常见的网站性能检测工具？ 1、chrome任务管理器：查看所有进程的关于GPU、网络和内存空间的使用情况； 2、chrome的Network面板：查看网站所有资源的请求情况，包括加载时间、尺寸大小、优先级设置及HTTP缓存触发情况等信息； 3、chrome的Coverage面板：通过它监控并统计出网站应用运行过程中代码执行的覆盖率（统计结果包括米格文件字节大小、执行过程中已覆盖的代码字节数以及可视化覆盖率条形图）； 4、chrome的Memory面板：可以快速生成当前的堆内存快照，或者查看内存随时间的变化情况； 5、chrome的Performance面板：启动监控功能后，与网站页面的任何交互所引发的资源请求、页面渲染、函数执行及GPU耗时等信息，都会按照时间线的维度记录下来； 6、chrome的Performance monitor面板：可以实时监控网站应用运行过程中的CPU占用率、JavaScript内存使用大小、内存中挂的DOM节点数、JS事件监听次数及页面发生重绘与重排的处理时间； 7、PageSpeed Insights：检测网站页面加载性能的自动化工具，能够针对移动设备和桌面设备分别进行检测并生成相应的优化报告； 8、webpagetest网站分析工具：对检测分析的环境配置进行高度自定义华，内容包括测试节点的物理位置、设备型号、浏览器版本、网络条件和检测次数等，除此之外还提供目标网站应用于竞品之间的性能比较，以及查看网络路由情况等多种维度下的测试工具。 9、chrome的Lighthouse（灯塔）：通过监控和检测网站应用的各方面性能表现，为开发者提供优化用户体验和网站性能的知道建议。 10、chrome的Audits面板：将lighthouse集成到了Audits面板中（目前还处于Beta版本阶段），广告性能评估项，主要为了帮助提升广告的加载速度和总体质量。 网站具体性能优化方向和优化点？ 1、服务器优化：增加缓存（协商缓存和强缓存）； 2、图像优化：根本思想是压缩； 图像压缩：根据业务选择有损压缩和无损压缩； 图像格式：图像格式选择依次为：矢量图（SVG）=> WebP => JPEG => PNG8 => PNG8，如果存在动画的话选择GIF； CSS Sprite（雪碧图）：通过多张小图标拼接成一张大图，有效地减少HTTP请求数量； display：none：浏览器部分会加载图像，如果不清楚会不会加载未显示的图像，推荐使用picture或img srcset进行响应式显示； 3、Web字体：常用的字体格式有EOT、TTF、WOFF和WOFF2；项目一般会通过@font-face声明字体系列，可以通过对字体资源进行预加载（<link rel="preload">） 4、资源加载 图像延时加载：Intersection Observer方式、CSS类名方式（通过background-image实现）、原生的延迟加载支持（<img>、<iframe>标签的loading属性原生支持延迟加载，loading包含lazy、eager、auto值） 视频加载：chrome会对视频资源进行预加载（在html完成加载和解析时触发DOMContentLoaded事件开始请求视频资源）；尺寸过大的GIF动画使用视频代替（video使用属性autoplay、muted、loop、playsinline）；基于Intersection Observer用Js实现对延迟加载的控制； 5、首屏加载：在延迟加载的媒体资源到达首屏边界之前设置一个缓冲区，以便媒体资源在进入视窗之前就开始加载（Intersection Observer，通过rootMargin属性来建立缓冲）；资源占位（LQIP或SQIP或Base64图片等，资源错误时显示错误的提示信息）；渐进式显示JQPEG图像（采用Image.decode()方法进行一步图像解码）； 6、资源优先级：对资源重要性进行判断划分优先级；预加载（<link ref="preload">）;预链接（<link ref="preconnect" href="xxx">）;预提取（<link rel="prefetch" href="xxx">）； 7、构建优化： 压缩与合并：HTML压缩（node的html-minifier插件）、CSS压缩（clean-css插件）、JavaScript（压缩uglify-js插件、gulp的gulp-concat合并插件或者webpack的entry和output配置、uglifyjs-webpack-plugin）； 多进程打包：happypack多线程插件； 可视化分析：webpack-bundle-analyzer分析插件； 8、CSS样式优化：CSS引擎查找样式表规则匹配顺序从右向左，使用BEN规范（中画线-单下划线_双下划线__）; 9、搜索引擎优化：meta的title、description、keywords；img的alt；使用语义化标签； 10、缓存：HTTP缓存（设置cache-control属性值no-store禁止缓存、协商缓存no-cache、服务器代理缓存public和private设置ETag或last-modified）、Service Worker缓存、Push缓存、CDN缓存； 11、数据存储：保存登录状态的Cookie（同步存取）、浏览器本地存储LocalStorage和SessionStorage（同步存取）、客户端数据持久化存储方案WebSql和Indexed DB（异步存取）、直接存储在本机的文件系统上（异步存取）。

知识系统而全面，可以帮助开发者完善自身的知识体系

适合新手入门系统性学习web性能优化知识点