2020-12-10 12:03:48

网站优化(五):前端页面性能优化分享


网站优化(五):前端页面性能优化分享

上一篇写完了SpringBoot后端的优化和技术选型,这篇就写一下前端页面的性能优化。

优化执行标准

既然要优化,我们肯定需要一个指导文件或者标准,我是以Google的标准进行优化的,Google有个指导网站:https://web.dev,并且提供了测评工具:https://developers.google.com/speed/pagespeed/insights,先看下我的优化效果:

Google网页性能测试

六大评价维度

Google大致从六个方向对网站页面进行测评:First Contentful Paint(FCP)、Speed Index、Largest Contentful Paint(LCP)、Time to Interactive(TTI)、Total Blocking Time(TBT)、Cumulative Layout Shift(CLS),中文的话大致意思是:首次渲染时间(FCP)、网络交互时间(TTI)、网络阻塞时间(TBT)、速度指数、最大内容渲染(LCP)、累计位移量(CLS)。

首次渲染时间(FCP)

首次渲染时间(FCP)是指访问您的页面后浏览器呈现第一段DOM内容所花费的时间。页面上的图像,非白色<canvas>元素和SVG被视为DOM内容。这项是个比较综合的评定,优化这项其实就是要提高访问速度,你可以使用CDN技术加速网页响应时间;同时如果使用了webfont,可以设置为webfont在加载期间可见,第一时间让用户看到内容。

网络交互时间(TTI)

网页中需要动态请求其他文档数据,就会产生交互,这项测评的是页面完全交互完成所花费的时间。优化这项就是页面上能少请求就少请求资源,移除不必要的css、js、图片等资源,以缩短交互的时间,同时可以启用gzip压缩,图片也可以使用压缩后的图片,代码可以压缩成无空格的代码。

网络阻塞时间(TBT)

网络阻塞时间(TBT)测评的是阻止页面响应用户输入(例如鼠标单击,屏幕敲击或键盘按压)的总时间。其实就是页面需要停下来去执行JavaScript,这个时候浏览器是被阻塞的,暂时不能响应用户的操作请求,任何js执行超过50毫秒都会判定为慢。这项的优化手段是移除不必要的JavaScript,使用开发者工具找出性能低下的JavaScript进行优化修改,文章下面我会说怎么使用开发者工具。

最大内容渲染(LCP)

最大内容渲染(LCP)测评的是画面中最大的内容元素何时呈现到屏幕的时间。这项不过往往是大图片造成的,尝试压缩降低图片的尺寸、文件大小,我就对图片进行了裁剪,只到够页面显示的大小,减少不必要的浪费。

累计位移量(CLS)

累计位移量(CLS)测评的是页面在加载过程中各个元素会不会位移,位移了多少。这项的优化技巧在于提前告知浏览器元素的大小,这样在元素渲染之前,浏览器就给元素留出了渲染的位置,防止页面其他元素发生位移。例子就是图片img标签要添加width和height,告知浏览器这个元素是多大来显示的。

速度指数

速度指数是测评页面加载过程中内容可视化显示的速度。说白了就是页面用多长时间可以渲染完成,显示出画面,优化这项就是减少不必要的css文件,然后把JavaScript代码放到页面最下面,减少主线程工作、减少JavaScript执行时间。

开发者工具

在上面我提到了使用开发者工来调试页面,这个东西如果是前端工程师应该非常熟悉,我使用的是Chrome浏览器,在菜单->更多工具->开发者工具就可以打开,在性能(Performance)标签页中,可以记录当前页面的性能信息,可以看到网络请求、主线程在做什么、去请求了哪些资源、什么时候使用了GPU、每一个时间点渲染的画面等等,在这个工具中可以轻松找到是什么东西阻塞了你的页面,然后开始调试和优化你的页面性能。

Chrome开发者工具性能工具

商业用途请联系作者获得授权。
版权声明:本文为博主「任霏」原创文章,遵循 CC BY-NC-SA 4.0 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://www.renfei.net/posts/1003422
评论与留言
以下内容均由网友提交发布,版权与真实性无法查证,请自行辨别。

本站有缓存策略,时间约2小时后能看到您的评论。本站使用自动审核机制,如果您的内容包含广告/谩骂/恐怖/暴力/涉政等不和谐内容将无法展示!


本站有缓存策略,时间约2小时后能看到您的评论。本站使用自动审核机制,如果您的内容包含广告/谩骂/恐怖/暴力/涉政等不和谐内容将无法展示!

关注任霏博客
扫码关注「任霏博客」微信订阅号
微博:任霏博客网
Twitter:@renfeii
Facebook:任霏
最新留言 优先级低的并不代表一定要等到优先级高的运行完才能运行,只是cpu分配的资源少了而已。 /lib64/ld-linux-x86-64.so.2: No such file or directory 报了这个错误,怎么解决呢 对于一个布道 DevOps 多年的选手来讲,看到这个报告,还是想继续布道布道。虽然是各种对比哈,但是我感觉与 DevOps 太像了(可能是职业病犯了哈)。首先声明本人不是GitLab 用户(因为不免费,没法薅羊毛啊),本人是 GitHub 忠实用户。 首先,你这是田忌赛马的对比,中文对比一事,着实有点可笑 1 土生土长和外来户能立马拉到同一个起跑线上吗? 2 一个真正的开发者应该去提升自己的英语能力,而不是拿全部是中文文档说事。大家都知道现在开源非常热,开发者是开源的主力军,如果要贡献优秀的开源项目(诸如Linux 内核,Kubernetes),英语就是个硬门槛。如果我是你,我倒希望公司内部的系统是英文的,最起码能让我锻炼英语,在看开源项目文档的时候不至于看不懂,提 PR 的时候不至于提交代码的内容描述不清楚而没法被 Merge。 其次,阿里云效、Coding 大家都知道背后站的是谁,很容易造成厂商绑定,现在很多企业都希望不要被厂商绑定。 再者,有一个点需要明白,GitLab 是一个 DevOps 平台,什么叫做 DevOps 平台(DevOps 走到现在,确切的说应该叫做 DevSecOps)?就是覆盖了软件开发生命周期全阶段的,从项目管理到代码托管到安全再到日志监控、甚至包含现在的云原生能力。不仅仅是说一个 CI/CD 就能概括的了的。这一点是 DevOps 布道的真正误区,我见过太多了,我在这儿再布道一哈,CI/CD 不等于 DevOps,他只是 DevOps 落地实践的核心能力。仅凭借一个 CI/CD 能有现成模版就判断出哪个好坏,过于牵强了吧。相信大家真正到项目用的时候,模版是满足不了要求的吧,毕竟大家都很特性化。 最后,还是一个很热的话题,开源,open source。GitLab 是开源的,Coding 和 云效这方面我没看到相关的开源内容(可能是我孤陋寡闻)。大家可以看看国内有多少用 GitLb 的,GitLab 的 CE 版,然后私有化部署,就是很多公司的代码托管 + DevOps 解决方案。 个人愚见,做一些对比报告的时候,还是先需要明白这个产品的定位,去深入挖掘一些真正有意义的对比,这样的对比报告才能有意义。作为一个常年写博客、文章的人来说。你写的每个字、每篇文章,你要想到你的思想会影响到别人。有可能因为你的片面之词,让别人错失一些学习的好机会。 docker run 那一长串后,出来一个字符串,然后去 docker containers 下面看 显示 exited(1);logs 下就一行错误 initdb failed 感谢🙏,第一个问题是空格的问题应该,我逐字敲完后可以构建了.第二个问题是我docker环境的问题,docker更新为最新版后需要重置配置文件.现已经正常使用,再次感谢您的分享和您的细心解答,期待下次相遇😄 还有一个问题可以请教下吗?就是我在容器里建文件夹没有权限,su root后密码不知道是多少,sudo mkdir xxx 提示我,没有sudo命令,请问有好的解决方法吗?谢谢解答 -v 后面可以指定文件吗 我的也是报错,还有。我执行了这个:@localhost kingbase-es-v8-r3-docker % docker run -d --name kingbase -p 54321:54321 -e SYSTEM_PWD=SYSTEM -v /opt/kingbase/data:/opt/kingbase/data -v /opt/kingbase:/opt/kingbase/Server/bin kingbase:v8r3 docker: 'run -d --name kingbase -p 54321:54321 -e SYSTEM_PWD=SYSTEM -v /opt/kingbase/data:/opt/kingbase/data -v /opt/kingbase:/opt/kingbase/Server/bin kingbase:v8r3' is not a docker command. See 'docker --help' 麻烦帮忙看下,是不是我写的命令有问题,还是版本问题,谢谢啦 请问我build的时候一直报错,是资源没了吗?failed to solve with frontend dockerfile.v0: failed to create LLB definition: failed to do request: Head "https://reg-mirror.qiniu.com/v2/library/centos/manifests/7?ns=docker.io": Moved Permanently 能不能在代码那里详细解释一下啊,没完全懂呀 en 按照路径上的来操作的,但是启动时一直报:zsh: no such file or directory: docker run -d --name kingbase -p 54321:54321 -e SYSTEM_PWD=SYSTEM -v /Volumes/installation/opt/kingbase/data:/opt/kingbase/data -v /Volumes/installation/opt/kingbase/bin/license.dat:/opt/kingbase/Server/bin/license.dat kingbase:v8r3 错误