免费建站建设网站搭建网站,区块链开发平台,网站设计参考文献有哪些,cpa网站建设Web性能优化
查看更多学习笔记#xff1a;GitHub#xff1a;LoveEmiliaForever MDN中文官网 性能优良的网站能够提高访问者留存和用户满意度#xff0c;减少客户端和服务器之间传输的数据量可降低各方的成本 不同的业务目标和用户需求需要不同的性能度量#xff0c;要提高…Web性能优化
查看更多学习笔记GitHubLoveEmiliaForever MDN中文官网 性能优良的网站能够提高访问者留存和用户满意度减少客户端和服务器之间传输的数据量可降低各方的成本 不同的业务目标和用户需求需要不同的性能度量要提高网站性能你需要了解用户体验、加载和渲染性能以及如何将性能度量与业务指标结合起来
什么是Web性能
减少总体负载时间 一般策略是使文件尽可能小尽可能减少 HTTP 请求的次数并采用巧妙的加载技术例如 preload使文件更快可用 尽快使网站可用 以合理的顺序加载你的网站资源以便用户能够更快地开始使用有时我们也会在实际需要时才加载资源这被称为懒加载从开始加载到达到可用状态为止所需的时间被称为交互等待时间 流畅性和交互性 在制作流畅的应用程序时有很多优秀实践可以参考使用 CSS 动画而不是 JavaScript尽量减少由于 DOM 变化而引起重绘 UI 的次数 感知性能 用户感受到的性能与任何客观统计数据一样重要甚至可能更重要通过显示“加载中”的旋转指示器或一系列有用的提示和技巧或笑话以及其他你认为合适的内容来保持用户在等待期间的参与度 性能测量 Web 性能包括测量应用程序的实际速度和感知速度然后监视性能
许多特性都会影响性能延迟、应用程序大小、DOM 节点数量、资源请求数量、JavaScript 性能、CPU 负载等等 重要的是尽量缩短加载和响应时间并通过增加额外的功能来隐藏延迟 而在此之前应该要了解一些基础知识
关键路径 它是服务器下载文件后浏览器用来构建 web 文档的过程可以查看我的笔记浏览器关键路径-学习笔记或MDN文档关键渲染路径 浏览器工作原理 知晓浏览器是如何工作的有利于我们对Web性能优化有个整体视野我的笔记浏览器工作原理-学习笔记MDN文档渲染页面浏览器的工作原理 源顺序 HTML 索引文件的源顺序会显著影响性能也就是HTML中的link、script等它们通常是按序下载 文档对象模型 也就是DOM它是一种树状结构具体知识在JS学习中有 延迟 延迟是你的网站信息从服务器传输到用户计算机所需的时间包括建立连接消耗的时间、传输消耗时间我的笔记CDN与网络延迟-学习笔记MDN英文文档Understanding latency
感知性能
感知性能是用户对网站速度的感受它是主观感受但是非常重要 虽然是主观感受但是也可以用客观的评价指标来大致说明它
感知性能指标
虽然指标不能绝对度量用户性能感知但是可以作为一种相关提示
首次绘制时间第一次绘制运算开始的时间首次有内容绘制时间第一次重要渲染如文本、前景或背景图像、画布或 SVG 等开始的时间首次有意义绘制时间第一次有用的内容渲染到屏幕上的时间最大内容绘制时间视口中可见的最大内容元素的渲染时间速度指数测量可见屏幕上像素绘制的平均时间可交互时间UI 可用于用户交互的时间
感知性能提升tips
最小化初始加载
首先下载用户将立即与之交互的内容然后在“后台”下载其余内容 将交互功能与内容分开并加载初始加载时可见的文本、样式和图像延迟或懒加载在初始页面加载时未使用或不可见的图像或脚本 图像和视频应以最佳格式、经过压缩和正确尺寸提供减少其大小
防止内容跳转和重排
图片或其他资源导致内容下移或跳转到不同位置例如第三方广告的加载会让页面感觉仍在加载中这对感知性能是不利的 如果某些资源的加载速度比其他资源慢在其他内容已经显示在屏幕上之后才加载这些元素那么就需要提前规划在布局中为它们留出空间以便内容不会跳动或改变大小
避免字体文件延迟
从感知性能的角度来看“字体导入不佳”可能会导致文本在样式化或回退到其他字体时出现闪烁 使回退字体具有相同的大小和粗细以便在字体加载时页面变化不那么明显
确保可交互性
确保可见的可交互元素始终可交互且可响应如果输入元素可见用户应能够无延迟与它们交互 当响应时间超过50 毫秒时用户会感受到延迟 内容重绘速度慢于16.67 毫秒或者重绘间隔不均匀时会感觉页面卡顿不流畅
让任务启动器更有交互性
在按下按键keydown时发出内容请求而不是等待按键弹起keyup可以使内容加载的感知时间减少 200 毫秒 向 keyup 事件添加有趣但不引人注目的 200 毫秒动画可以再减少 200 毫秒的加载感知
测量性能
测量性能提供了一个重要的指标以帮助你评估应用程序、网站或 web 服务的成功程度 它们应以一致的方式收集和测量并以普通人可以使用和理解的格式进行分析
对于这些指标有着许多工具能够帮助进行测量它们分为两大类
表明或测量性能的工具直接展示了你的网站加载的快慢也指出了你的 Web 应用程序中可以优化的区域可以用来构建自定义性能工具的性能 API
通用性能报告工具
像 webpagetest.org(推荐)、PageSpeed Insights 这样的工具可以衡量网站的性能 输入一个 URL并在几秒钟内获得一份详细的性能报告 性能报告包含有关用户在页面上显示任何内容之前需要等待多长时间、显示页面需要下载多少字节等信息
网络监视工具
按F12打开浏览器开发者工具能够看到网络选项使用它即可监视网络情况 性能监视工具
同样的在浏览器开发者工具中还可以监视网站性能 性能API
有着各种各样的API可以用来创建自己的性能测量工具 MDN文档-性能API
关于图片的优化
图片占据了非常多的资源空间优化它对于提高web性能的效果立竿见影 对于一般网站而言其带宽的 51% 来自图像其次是视频占 25% 我们需要考虑流量问题许多人使用的是有限流量套餐甚至是按使用量付费每兆字节都要付费 还需要考虑内存问题因为许多移动设备的 RAM 有限优化太差会很卡
图片加载优化
虽然图片下载耗时长但是对感知性能的影响却没有很大我们先用占位符代替图片 虽然如此但能更快下载好图片就应该更快下载好
页面整体懒加载
对于大多数网站来说最大的改进之一是 延迟加载(懒加载) 可视区域以下的图像 而不是在初始页面加载时无论访客是否滚动查看都下载所有这些内容 例如GitHub:lazysizes库就可以帮助实现这个功能
图片格式优化
根据不同图像的特点可以选择最适合的图片格式可以查看MDN图像格式指南
SVG格式的图片适合于图标徽标等 它是矢量的放大缩小不会失真但是适用范围比较小 可以用在线的一些工具调整SVG图片如SVGOMG
PNG格式是比较常见的它支持透明度因此比较大常见有以下三种情况
RGB通道Alpha通道32bit/px图片质量好但是图片大小比较大Grey通道Alpha通道16bit/px颜色很少支持平滑的透明度Grey通道Aplha比特9bit/px颜色很少只有有和无透明度
对于PNG也有很多的在线工具使用如ImageOptim、Squoosh
JPEG格式是不具有透明度的图片格式但也很广泛使用 其中有一个叫做渐进式JPEG的技术用户先看到的是一个低分辨率的图像版本随着图像下载而逐渐清晰而不是图像以全分辨率从上到下加载或者只有在完全下载后才显示
推荐使用在线工具处理JPEG图片如在Squoosh里面就有MozJPEG压缩选项 可以看到图片由1.62MB直接压缩到了154KB效果显著
其它还有一些图片的格式它们在压缩方面更加厉害但是不是所有浏览器都支持
WebP既适用于图像又适用于动图的绝佳选择非常不错的格式但是不支持渐进式显示除了Safari的14以前的浏览器外其它浏览器都支持它AVIF高性能和免费的图像格式性能高于WebP但只有 Chrome、Opera 和 Firefox 支持JPEG2000仅受 Safari 支持也不支持渐进式显示
虽然有这么多图片格式但是你又不是只能选择一种是不是 使用响应式图片技术你的web可以根据情况选择最适合的图片格式进行下载 甚至还有一些帮助你构建响应式图片的在线工具Cloudinary
图片最佳尺寸
对于较小的屏幕应该提供更低分辨率的图像而对于较大的屏幕则相反 此外为那些具有高 DPI 屏幕的设备应该提供更高分辨率的图像
这些都是响应式图片涉及的内容可以查看MDN响应式图片
对于图片在高DPI屏幕上有两个有用的客观事实
在高 DPI 屏幕上人眼对压缩伪影的敏感度要低得多这意味着对于这些屏幕上的图像你可以使用非常高的压缩程度来压缩图片只有很少的人能够察觉到超过 2 倍 DPI 的分辨率增加这意味着你不需要提供超过 2 倍分辨率的图像
控制图片下载顺序
将最重要的图像优先展示给访问者会提供更好的感知性能 通过采用优先级提示Priority Hints你可以进一步控制优先级只需在图像标签中添加 fetchPriority 属性即可
图片渲染优化
由于图像是异步加载的并且在第一次绘制后继续加载如果在加载之前未定义其尺寸它们可能会导致页面内容重新布局 因此你需要设置 width 和 height 属性以便浏览器可以在布局中为它们预留空间 这也是优化感知性能的重要环节
浏览器在实际加载图像之前有一种调整图像大小的机制
img、video 或 input typebutton元素设置了 width 和 height 属性时它的宽高比会在加载前计算出来并使用提供的尺寸提供给浏览器根据宽高比计算出图片的高度并将正确的尺寸赋给 img 元素宽高比仅在图片加载时用于保留空间一旦图片加载完成将使用加载的图片的实际宽高比而不是属性中的宽高比
这样做的好处是可以优化渲染的流程减少卡顿、尺寸不精确等
关于视频的优化
对于一般网站来说25% 的带宽来自视频所以对视频的优化也很重要
压缩视频
视频也有着许多格式在web上常见的有WebM、MPEG-4/H.264、Ogg/Theora 有着很多本地使用的视频编辑工具都有格式转换功能也可以查看线上工具如FFmpeg
优化视频的source顺序
根据需要选择最适合的顺序是低带宽优先还是高质量优先 不同的环境和要求下有着不同的选择
为静音的视频移除音轨
没理由要为了静音的视频传输音轨过去例如首页动画这类的就不需要音轨 删除音频可以节省 20% 的带宽 而删除音轨的操作需要在本地的视频编辑软件中进行
视频预加载
预加载属性preload有三个可用选项auto|metadata|none默认设置是 metadata
none在播放开始之前视频不会被下载metadata在页面加载时下载视频的一小部分auto自动下载整个视频
根据视频资源的重要程度可以结合使用预加载参数来构建合理的加载策略
流媒体与动态质量
流媒体的视频视频数据将会像流一样传输也就是视频一边传输网站一边播放 由于这个特性可以动态调整视频的质量做到这一秒是1080p下一秒就变成480p 不过这一技术应该要仔细研究才能使用应该自己找找有没有更好的讲解资源
JS优化
JS脚本会显著影响下载时间、渲染性能、CPU 和电池使用
JS下载优化
评估是否应该使用框架某些项目十分简单根本不必要使用框架进行开发简约设计某些页面有很多的绚丽特效如拼多多但是它们真的有必要吗删除无用代码解释性语言的特性决定了所有的代码都会被解析优化代码就很必要使用浏览器内置功能某些功能浏览器已经内置了不需要再用JS实现一遍
使用JS模块设计程序整体结构把大文件拆分为多个小文件以及把代码分为关键文件和非关键文件对于优化加载以及按需导入都很重要 最后可以进行代码压缩减少文件大小再使用Gzip进一步压缩文件 使用Webpack这类的构建工具会很方便的完成这些事情
处理解析和执行
默认情况下JavaScript 的解析和执行会阻塞渲染 浏览器在遇到 JavaScript 之后会阻塞解析任何出现在其后的 HTML 代码直到脚本处理完成 因此要充分考虑代码的运行时机和运行方式
优先加载关键资源
如果某个脚本非常重要而且担心加载速度影响性能那么可以在head中加载它不推荐
headscript srcmain.js/script
/head上面的方法会阻塞渲染更好的方法是使用relpreload来为JS文件创建一个预加载器
head!-- 预加载 JavaScript 文件 --link relpreload hrefimportant-js.js asscript /!-- 预加载 JavaScript 模块 --link relmodulepreload hrefimportant-module.js /
/head预加载是异步的因此不能保障文件是否加载完成可能你使用它时它还没加载好
延后非关键脚本的执行
应该尽量推迟解析和执行非关键 JavaScript 的时间直到它真正需要时再加载以减少阻塞
例如可以给script设置async或defer
headscript async srcmain.js/script
/head或者可以在HTML和JS中动态加载脚本
通过DOM操作添加script来动态决定请求脚本的时机通过import().then(() {})来动态引入JS模块
原子化任务操作
浏览器运行脚本时会按序运行其中的操作任务 任务大部分都在主线程上运行有一些在Worker上运行主线程一次只能运行一个任务
一个耗时超过50ms的任务会让用户感觉到延迟导致看起来卡卡的 所以把大任务分解成小任务会让使用体验更好就像是CPU的时间片一样
具体操作为使用await和Promise来进行异步操作以让出线程
合理使用JS动画
动画效果如果很多很复杂那么会明显降低性能会卡卡的如拼多多
非必要不使用动画减少动画的数量和复杂度提供动画的开关按钮让用户自主选择能否开启动画效果尽可能使用CSS动画CSS动画的性能要明显优于JS动画使用JS动画时尽可能以操作DOM的方式实现而不要用操作CSS的方式实现如果要进行非常高定制化的动画推荐使用canvas
优化事件性能
跟踪及处理事件是很耗资源的特别是当你持续运行一个事件时如跟踪鼠标位置 最好动态删除不再需要的事件监听器以减少资源浪费 尽可能使用事件委托当你有一些代码需要在用户与大量子元素中的任何一个进行交互时可以在它们的父元素上设置事件监听器
高效JS代码最佳实践
减少DOM操作访问和更新 DOM 的计算成本很高批量进行 DOM 更改对于 DOM 更改你应该将它们按批次统一处理而不是分散执行简化HTML代码DOM 树越简单使用 JavaScript 进行访问和操作的速度就越快减少循环代码循环是很消耗资源的因此尽可能减少代码中的循环使用break或continue使用多线程处理高开销任务 异步进行高开销操作使用Worker来进行高开销运算使用WebGPU进行图像和3D模型操作但这太底层比较难掌握
HTML优化
HTML理论上应该要保证快速、易于访问这两个是基本要求 HTML主要是文本因此比较快所以真正影响网页性能有三大点
图像和视频可以使用上面介绍的对图像和视频的优化方式进行优化嵌入内容尽可能不要用嵌入内容iframe会影响性能资源加载顺序合理的安排资源加载顺序以及合理利用preload
使用响应式设计
利用媒体查询技术以及响应式设计可以为不同的设备提供最合适的网页 这样就不会造成资源浪费一般在图像和视频上使用较多
图片懒加载技术指图片仅在实际对用户可见时加载 浏览器现今可以使用loading属性指示img标签以进行图片懒加载 以及在设置video时指示preload属性的值以合适的方式加载视频
嵌入内容的处理
对于嵌入内容只有一个建议不必要就不要使用iframe 此外iframe同样可以使用loading属性指示进行懒加载
处理资源加载顺序
对于JS资源的处理可以参照上面介绍的JS优化来进行
对于链接到其它资源时资源的获取可以使用预加载 一般即使用relpreload将link转换为预加载器
CSS优化
优化渲染
由于浏览器的运行原理只有在下载完所有CSS并生成CSSOM后浏览器才能够绘制画面 因此优化CSSOM的构建可以提高页面性能
删除非必要样式删除不会影响绘制结果的CSS样式可以加快CSSOM构建原子化CSS文件将CSS模块化并延迟加载非必要CSS可以减少渲染阻塞压缩CSS文件可以使用CSS压缩工具再使用gzip压缩简化选择器越具体的选择器开销越大减少选择器复杂度会优化性能不要将样式应用于不需要的元素这种类型的操作会对性能产生负面影响特别是在较大的站点上使用CSS精灵图CSS 精灵图 是一种技术它将你希望在站点上使用的多个小图像例如图标放入单个图像文件中然后使用不同的 background-position 值在不同的位置显示图像的一部分这可以大大减少获取图像所需的 HTTP 请求数量预加载重要资源使用预加载器
动画优化
减少使用动画提供控制动画播放与否的选项使用CSS动画而非JS动画
慎重选择要进行动画处理的属性某些属性在进行动画处理时会触发回流、重绘 避免使用下面的属性做动画
修改元素的尺寸如width、height、border 和 padding重新定位元素如margin、top、bottom、left 和 right更改元素的布局如align-content、align-items 和 flex添加改变元素几何形状的视觉效果如box-shadow
浏览器是很智能的仅会重绘被更改的区域因此动画越大开销越多 在使用动画时transforms、opacity、filter都不会引起回流或重绘
在GPU上处理动画
将动画处理工作转移到主线程之外并放到设备的 GPU 上进行也称为合成 这可以通过选择特定类型的动画来实现浏览器会自动将这些动画发送到 GPU 来处理
3D 变换动画例如 transform: translateZ() 和 rotate3d()具有某些其他属性动画的元素例如 position: fixed应用了 will-change 的元素特定的在其自己层中渲染的元素包括 video、canvas 和 iframe
使用will-change
浏览器可能会在元素实际发生变化之前进行优化设置 这类优化可以通过提前完成可能需要的大量工作提高页面的响应速度 CSS 的will-change属性向浏览器提示元素预期的变化方式
.element {will-change: opacity, transform;
}优化渲染阻塞
CSS可以使用媒体查询将样式限定在特定条件下 而浏览器会阻塞渲染直到解析完所有的CSS样式但不会阻塞不会使用的样式 通过根据媒体查询将 CSS 拆分为多个文件可以防止在下载未使用的 CSS 时阻塞渲染
改善字体性能
字体加载
字体仅在使用 font-family 属性应用于元素时才会加载而不是在首次使用 font-face 规则引用时加载
/* 字体在此处没有加载 */
font-face {font-family: Open Sans;src: url(OpenSans-Regular-webfont.woff2) format(woff2);
}h1,
h2,
h3 {/* 字体实际上在此处加载 */font-family: Open Sans;
}所以使用 relpreload 来提前加载重要的字体可以让字体更快可用
linkrelpreloadhrefOpenSans-Regular-webfont.woff2asfonttypefont/woff2crossorigin /只加载需要的字形
如果你知道你将使用特定的字形集例如仅用于标题或特定标点符号字符的字形你可以限制浏览器需要下载的字形数量 这可以通过创建仅包含所需子集的字体文件来实现这个过程叫做子集化 然后可以使用 font-face 的 unicode-range 描述符来指定何时使用你的子集字体
font-face {font-family: Open Sans;src: url(OpenSans-Regular-webfont.woff2) format(woff2);unicode-range: U0025-00FF;
}字体回退
应用于 font-face 规则的 font-display 描述符定义了浏览器加载和显示字体文件的方式使得文字在字体正在加载或加载失败时都能以备用字体显示 代价是出现未样式化文本的闪烁
font-face {font-family: someFont;src: url(/path/to/fonts/someFont.woff) format(woff);font-weight: 400;font-style: normal;font-display: fallback;
}使用 CSS 局限进行样式重新计算的优化
通过使用 CSS 局限模块中定义的属性你可以指示浏览器将页面的不同部分隔离开来并独立地优化它们的渲染 这允许在渲染各个部分时提高性能。例如你可以指定浏览器在特定容器于视口中可见之前不要渲染它们
contain 属性允许作者精确指定要应用于页面上各个容器的局限类型 这使得浏览器可以针对 DOM 的一部分重新计算布局、样式、绘制、大小或它们的任意组合
article {contain: content;
}content-visibility 属性是一个有用的快捷方式允许作者在一组容器上应用一组强大的局限并指定浏览器在需要之前不要布局和渲染这些容器 contain-intrinsic-size 也可用它允许你为容器提供一个占位大小同时它们受到局限的影响
article {content-visibility: auto;contain-intrinsic-size: 1000px;
}### 使用 CSS 局限进行样式重新计算的优化通过使用 CSS 局限模块中定义的属性你可以指示浏览器将页面的不同部分隔离开来并独立地优化它们的渲染
这允许在渲染各个部分时提高性能。例如你可以指定浏览器在特定容器于视口中可见之前不要渲染它们 contain 属性允许作者精确指定要应用于页面上各个容器的局限类型
这使得浏览器可以针对 DOM 的一部分重新计算布局、样式、绘制、大小或它们的任意组合 css
article {contain: content;
}content-visibility 属性是一个有用的快捷方式允许作者在一组容器上应用一组强大的局限并指定浏览器在需要之前不要布局和渲染这些容器 contain-intrinsic-size 也可用它允许你为容器提供一个占位大小同时它们受到局限的影响
article {content-visibility: auto;contain-intrinsic-size: 1000px;
}
