开发者社区> 欧阳呀> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

深度探秘web前端性能优化

简介: 笔记
+关注继续查看

2000元阿里云代金券免费领取,2核4G云服务器仅664元/3年,新老用户都有优惠,立即抢购>>>

性能优化总论



1.性能优化的必要性

性能优化一直是我们在讨论的一个话题,也是很重要的知识点,当项目功能越来越多,模块规模一步步扩大,就会发生一系列的性能问题,比如说vue首屏加载会变得非常慢,编译会延迟,打包也要等半天。

必须明确性能优化的重要性,任何一个项目的生命历程都会走向性能优化这个阶段


2.性能优化的误区

我们经常会犯错误的一个地方是,混淆了性能优化与执行效率的概念。

比如:

1.while 循环快还是 for 循环快?

2.|0 是不是比 Math.floor 性能好?

3.if else 与三元运算符哪个更快?

很多人会认为以上三个问题就是性能优化的范畴了,会去纠结这些问题。然而实际上,这三个问题与性能优化毫无关系,不过是几个执行效率的问题罢了,纠结也无益。


3.什么才是前端的性能优化

总结来说,就是这三个方面

1.页面加载性能(加载的时间)

2.动画与操作性能(是否流畅无卡顿)

3.内存、电量消耗(内存占用,耗电量)


针对以上方面做性能优化



1.页面加载性能(加载的时间)

a.减少请求数


(1) js,css,打包到html,并为一个请求


(2) 精灵图,多个小图并为一个图片,只请求一次


(3) 小图片用字体图标代替,或者使用data-url


(4) js控制图片懒加载,异步加载,页面初始化的时候避免一次请求多张图片


b.减少传输体积


(1) js库存放在静态cdn上,项目执行的时候,一个链接拿过来就行


(2) 压缩策略,大图压缩(tinypng),代码压缩(webpack,Gzip)


(3) 优雅降级,根据用户网络状况以及机型控制图片清晰度


(4) 清晰度低的图片,锐化处理,提高用户体验


c.缓存策略


(1) ?图片缓存


(2) 数据缓存,常用的就是地址选项,省市区,不用重复请求,缓存至用户本地即可


2.动画与操作性能

a.避免操作过多dom元素


可采用数据驱动,操作虚拟dom,通过diff算法,最后比较转换成真实dom


b.避免去操作元素的top,left等位置的值


如果去改变元素的top与left等值,会导致dom回流,可以采用dom重绘


dom回流:当页面中的html结构发生改变(增加、删除元素、位置发生改变),浏览器都需要重新计算一边新的DOM结构,重新对当前的页面进行渲染。回流非常消耗性能,特别是性能有限的移动端。

dom重绘: ?当某个元素的部分样式发生了改变(如背景颜色、字体颜色、位置(使用transform的情况下)发生了改变),浏览器重新渲染当前元素即可。回流比重绘耗能耗时,所以在优化程序系统的时候,我们尽量要减少浏览器的DOM回流操作。


平时操作元素的top值,left的值可以用transform里的translate代替


3.内存、电量消耗

a.作用域问题 (内存相关)


(1) 避免定义无意义变量,每去var定一个值或者定一个对象都是占内存的


(2) 禁止滥用闭包,js垃圾回收机制不会回收闭包里的变量,它们将会常驻内存。


b.循环 (性能相关)


前端应避免大规模数据的比对与循环,可分开处理或交由后台先处理好,否则也会导致卡顿


c.电量消耗 (主要是前端做游戏的时候)


(1) 优化美术资源,比如合理规划图集,约定好模型的最大三角形面数,制定合理的粒子效果规范。这个可以说是游戏优化中最重要的一个,因此,技术美术在游戏开发中作用巨大。


(2) 简化或者优化着色器(shader),如在游戏开始前就对Shader进行编译和加载。


(3) 使用Batching,尽量减少DrawCall


Batching : 批处理动态或静态物体(批量处理,优化电量消耗)


DrawCall : CPU调用图形编程接口,比如DirectX或OpenGL,来命令GPU进行渲染的操作(描绘次数越多,耗电量越大)


以上是本人的总结与经验,如有不对,敬请指正。


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
web前端性能优化 —— 前端人必需的知识储备
本文较长,也比较全,从多个维度、各个阶段来谈前端性能优化的各种实用技巧。(重点与难点放了图片解析,希望能够对大家有所帮助)
8 0
web开发性能优化---安全篇
1、权限管理 从模块、表单、数据审核、功能按钮全面数据安全验证及管理。 2、ip验证 数据接口访问进行IP校验 3、登录、操作日志、程序安全日志? 系统所有用户登录、操作全部日志记录。
1082 0
web开发性能优化---扩展性能篇
1、实现代码分离 一个成熟的软件开发团队一般都不会完全手写代码,这里讲的代码分离只要是开发中用到的小技巧,通过底层框架+手工代码方式结合实现快速开发和快速扩展; Code文件夹内文件不允许修改,文件夹主要存放系统自动生成代码;同一DAL层下运行两个类名相同,采用partial合并类,但是两个类不允许有同名同参数方法; 利用partial关键字合并两个同名类小技巧,code存放代码底层工具自动生成代码类,根目录存放手工添加自定义方法类。
826 0
web开发性能优化---代码优化篇
1、合理使用缓存使用 提高性能最好最快的办法当然是通过缓存来改善,对于任何一个web开发者都应该善用缓存。Asp.net下的缓存机制十分强大,用好缓存机制可以让我们极大的改善web应用的性能。
920 0
web开发性能优化---UI界面篇
1、尽量采用div+css布局 DIV+CSS相比较与表格布局的优势: a.代码精简?使用DIV+CSS布局,页面代码精简,这一点对XHTML有所了解的都知道。
1237 0
web开发性能优化---分布式篇
1、分布式架构-独立站点开发 模块化结构化开发,实现多资源分站点,数据分库,为后期实现分布式部署做准备,主要分为以下几部分: web站点: 1.web前端站点  2.图片、文件资源站点 3.管理端站点4.数据接口站点 数据库: 1.业务数据库 2.访问信息数据库、日志 前期访问量和数据量较小可采取单台或小数目台数服务器部署,后期大数据量采取多web站点多数据服务器方式进行部署。
1008 0
+关注
98
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载
http://www.vxiaotou.com