这份优化清单,你做了哪些? 这份优化清单,你做了哪些工作
yuyutoo 2024-10-24 17:48 6 浏览 0 评论
引言
大家好,这里是@IT·平头哥联盟,我是 首席填坑官 ——苏南(South·Su),今天是国庆节的第二天,这个假期没有外出(不要问我为什么,自己脑补~),前些天分享了一篇前端面试汇总的文章,有些同学在群里问了其中的一些细节,其中大家最关心的性能优化这块,今天整理了公司项目中的一些认为不错的点,跟大家一起分享,如有理解错误,请纠正。
优化概括
1、首先最基本的, CSS 样式表放在页面头部Head内且 link 链式引入,javascript放在底部body结束标签前避免阻塞。
2、js/html/css/图片都做压缩合并,图片预加载、懒加载,也是老生常谈了,在这里推荐一个图片无损极限压缩的工具,能压小60~80%左右,比较麻烦的是每次要手动操作——TinyPNG。
3、减少DOM元素数量,减少DOM的操作:
减少 DOM 元素数量,合理利用:after、:before等伪类,避免页面过深的层级嵌套;优化javascript性能,减少DOM操作次数(或集中操作),能有效规避页面 重绘/重排 ;如何才算少?抱歉,这个没有办法给出一个标准精确的答案,只能说尽可能去做优化,如数据分页、首屏直出、按需加载等。
4、静态资源 CDN 分发:
- CDN的意图就是尽可能的减少资源在转发、传输、链路抖动等情况下顺利保障信息的连贯性;通俗的讲就是 CDN 系统能够实时地根据网络流量和各节点的连接、负载状况以及到 用户的距离 和响应
- 时间等综合信息将用户的请求重新导向离用户 最近的服务节点 上———曾经人们都说距离产生美,后来变了都说距离产生小三,在这里 距离产生的是用户跑路了 ,所以足以说明CDN的 重要性 ;CDN采用各节点缓存的机制缓存很严重,当我们项目的静态资源(只是之前存放在cdn上的资源)修改后,如果CDN缓存没有做相应更新,则看到的还是旧的网页,解决的办法是刷新缓存,七牛云、腾讯云都可单独针对某个文件/目录进行刷新;广告常说:XX酒虽好,可不要贪杯哦,CDN托管也是如此,合理使用:图片、常用js组件、css重置样式等,即不常改动的文件即可走CDN,包括项目内的一些介绍页;img标签要设置高宽,同样这么做它也能减少页面 重绘/重排 ,使用 WebP 格式图片,它能对原图(png)做到近98%压缩,当然它也不是完美的:
WebP 最初在2010年发布,目标是减少文件大小,支持无损、有损压缩,动态、静态图片,压缩比率优于 GIF、JPEG、JPEG2000、PNG 等格式,非常适合用于网络等图片传输,现在开始已经被越来越多的浏览器支持,当然 WebP 格式也有它的缺点,算法相对其他格式更加复杂,会在节省流量资源的同时会占用计算资源,对计算机造成更大的负担, WebP 支持的像素最大数量是16383x16383。有损压缩的WebP仅支持8-bit的 YUV4:2:0 格式。而无损压缩(可逆压缩)的WebP支持VP8L编码与8-bit之ARGB色彩空间。又无论是有损或无损压缩皆支持Alpha透明通道、ICC色彩配置、XMP诠释数据,更详细支持说明:caniuse.com
优势:
- 体积小几乎可以毫不夸张的说,已经小的不能再小了;
- 小而美的同时,还质量好,几乎看不出来与原图差别;
- 曾经的动态图gif、jpeg压缩都会不清晰,但现在对它来说都是so easy~。
缺点/困难:
- 目前并不是所有浏览器都支持 WebP ,因此需要解决浏览器适配问题;
- 对于已上线的项目,采用 WebP 需要替换大量图片,工作量太大(不确定后台程序是否能搞定)。
5、域名拆分:
什么叫拆分域名?很多公司初始项目搭建,都只申请了一个域名,站点的所有内容(html/php/jsp、js、css、img等都放在一个域名下),域名拆分主要为了增加浏览器资源请求的并行度即并发问题,让浏览器能同时发起更多的请求,也解决了请求默认携带的cookie问题,减少了数据传输字节;如何拆分?以现在前后端分离式开发为例,
建议分为三大类:
- 前端类 - 项目业务本身的htm、css、js、图标/片等;
- 静态类 - 即上述提到的CDN资源类;
- 动态类 - 可归为后端API接口类;
以下为各浏览器请求并发数,数据来源于chorme搜索,珍爱生命,远离某……:
6、 减少http请求次数
结论:从上面的这个过程可以看出,每一次请求都这么复杂,减少http的请求次数是不是很有必要呢??答案是肯定的,我们会以以下几个维度来进行优化:
- 合并 JS、CSS 文件;图片/图标 sprites 合并,或使用 iconfont 字体图标,或者 SVG Sprites ;什么是Svg Sprites?? 请查看之前发表的文章《该如何以正确的姿势插入SVG Sprites?》;
- 资源按需加载,即当前页面用到什么,就加载什么,避免加载与当前页面无关的事情,这一点现在的React/Vue/Angular等 MVVM 框架,基于webpack编译打包工具,做的很好;
- 前端数据的缓存(如:一个列表页,进入详情,再返回,这个用户的交互行为是很频繁的,可以对列表的数据进度一个缓存,不用每次返回都进行加载,比如5分钟更新一次。
7、 数据设置缓存,好累写不动了,http缓存的设置,之前的面试汇总? 如何设置http缓存?吧;
8、 站点服务端开启Gzip压缩,当然还可以了解一下Brotli 或 Zopfli ,据说 Brotli 比 Gzip 和 Deflate更有效,有兴趣的同学可以了解一下;
8、 避免重定向,尽量减少 iframe 使用,它会阻塞主页面的渲染;
9、 避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性);
10、 合理使用dns-prefetch、prefetch、 preload、 defer、async:
- dns-prefetch :使用dns-prefetch对项目中用到的域名进行 DNS 预解析,减少 DNS 查询,如: ;BAT各大巨头都是这么干的,请看下图,dns的详细解析过程今天先不讲了,码字码不动了,写分享比加班做项目还累,望体谅~;
- prefetch : 它是一个优先级非常低的资源加载标识,浏览器会在空闲时(即主进程资源加载完成后)下载带有 prefetch 标识的资源并缓存到disk,在后续模块使用到这个文件的时候,会直接从缓存读取;该功能webpack有个插件,配置后编译能自动插入到页面上;preload :没错,它就是一个可以预加载资源的属性,详细说明请看官方API,一般情况下我们可能会
- 对接下来的业务需要的audio、img、font、script等资源进行预先加载(甚至是下一个路由页面哦),这样能达到0秒打开页面的效果!
暂时就想到这么多了,欢迎补充……
总结:
- 推荐几个工具:WebPagetest、Lighthouse、SpeedCurve、New Relic 等主动/被动监测工具,都能高效帮助我们分析发现问题的所在,从而对症下药;
- DNS预解析的是非重要的,它是一个url到解析IP,到查询根服务器的一个过程,可能会在下一次单独总结出来分享,有兴趣的同学也可以自行先了解一下,
- 要把一个项目做好,每一个细节都很重要,希望今天的分享能给大家的工作带来些许帮助,谢谢!
文章分享计划:
最近一直在思考,如何有规化的分享工作中的积累,国庆这些天也一直看了很多大神写的博客,最后综合自身的能力及时间,决定先尝试写一个 # 动画 # 系列文章,动画可能主要包含( CSS/Canvas )两部分,欢迎大家持续关注!
以上就是今天的分享,新手上路中,我会努力让自己变得更优秀、写出更好的文章,文章中有不对之处,烦请各位大神斧正。如果你觉得这篇文章对你有所帮助,请记得点赞哦~
对前端的技术感兴趣/或想入门前端的同学可关注我的头条号,并在后台私信发送关键字:“前端”即可获取免费学习资料,跟我们一起成长,欢迎来撩哦~。
作者:苏南 - 首席填坑官
来源:@IT·平头哥联盟
本文原创,著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
相关推荐
- 如何安装、启动和退出python,大小写是否一样?
-
1.1Python简介人类在多年前已经进入信息化时代。事实上,我们如今是淹没在信息的海洋之中,时时刻刻都有大量的电子邮件需要阅读或太多的网页亟待浏览。互联网提供了大量关于任何事物的信息,从重要的事件...
- 最基础的Python知识,学会这些已足够你开始写Python代码了
-
本章主要内容缩进和代码块构建识别注释给变量赋值对表达式求值使用常见数据类型获取用户输入选用正确的Python式编码风格本章介绍最基础的Python知识,包括如何使用赋值和表达式、如何输入数字或字符串、...
- python散装笔记——89: 引发自定义错误/异常
-
Python有许多内置异常,当程序中出现问题时,这些异常会强制程序输出错误信息。...
- Python:数据的归宿_python数据类型有哪些?
-
"一起学习,一起成长!"1.文件输入/输出(普通文件)数据持久化最简单的类型是普通文件,又叫平面文件(flatfile)。它仅仅是在一个文件名下的字节流,把数据从一个文件读入内容,然后从内存写入文件...
- 一图看懂 Python 2 / Python 3 编码 | CSDN 博文精选
-
作者|天元浪子责编|刘静出品|CSDN博客无论是PY2还是PY3,都使用Unicode作为内存编码,简称内码。保存在Python解释器内存中的文本,输出到屏幕、编辑器,或者保存成文件的时候...
- Python 基础教程四之Python3 元组
-
前言Python的元组与列表类似,不同之处在于元组的元素不能修改。元组使用小括号(),列表使用方括号[]。...
- 潍坊这个小镇210年前曾被德国侵略过,如今在静静的等待你的到来……
-
潍坊,有个坊茨小镇。这小镇,每一扇门里都是历史,每一扇窗里都有教诲。历史的缠绵、封存的记忆,我们沿着这条脉搏,去寻找那里曾经发生的故事。ThereisatowninWeifangcalle...
- 一文掌握Python 生成器_python3 生成器
-
ython生成器有助于实现维护持久状态的功能。这支持增量计算和迭代。此外,可以使用生成器代替数组以节省内存。这是因为生成器不存储值,而是存储具有函数状态的计算逻辑,类似于准备触发的未计算函数实例。...
- 程序员的福音,C/C++内存泄漏的终极解决方案
-
众所周知,C/C++执行效率高,但难以驾驭,开车一时爽,但稍不留神容易翻车。估计每个C/C++程序员都遭受过内存泄漏的困扰。本文提供一种通过wrapmalloc查找memoryleak的思路,使得...
- python散装笔记——103: 调试_终极笔记
-
1:通过IPython和ipdb如果安装了IPython(或Jupyter),调试器可以使用...
- 美人计|喷香水太浓触发报警?咱夏天要用清新的
-
昨天下午河南一行驶中的高铁因为某乘客喷了高浓度的香水,自动停运了……妹子们,夏季本就容易燥,选几款清淡型的香氛吧。香水其实是很个性很私人的,不同的心情和状态下想使用的味道也会不同,但同时每个人又都是社...
- 2022年5月19日学习笔记-基础语法_基础语法题库
-
Python学习笔记-基础语法第七章用户输入和while循环...
- 时髦办|度假我只带了一条丝巾,却拍出了365个造型
-
是不是一提到丝巾,都认为丝巾和小年轻不太配?其实丝巾才是真正的百搭神器,可以完整你的各种look!今天COCO就来带大家看看风情十足的丝巾可以怎样轻松地融入到各位的搭配之中吧!没错,时尚博主和明星们都...
- 感恩节之后的黑色星期五由来_黑五感恩节是什么意思
-
弗雷德英语笔记跨学科深度学习...
- 荧幕上的经典表白,521表白素材来了丨Day84
-
抖音:谭剑波考研英语微博:谭剑波tangible唱吧:tangible1982...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)