前端性能优化建议


Posted in Javascript onSeptember 17, 2020

前言:

一说到性能优化,大家都不约而同的想起了雅虎的军规,2-5-8原则,3秒的首屏准则等等,这些规则在开发中虽然不是强制要求的,但是为了追求页面性能的完美体验,就不得不对代码进行修改和优化。

下面就与大家一同分享一下我了解的一些性能优化指标:

一.加载优化

1. 减少HTTP请求:尽量减少向服务器发送的请求数,节省网络资源,所有静态资源都要放在服务器端并设置缓存,并且要尽量使用长缓存。

2. 压缩代码:减少资源大小可加快网页的显示速度,对代码进行压缩,并在服务器开启Gzip

3. 无阻塞:头部内联的样式和脚本会阻塞页面的渲染,样式放在头部使用link引入,脚本放在尾部并使用异步方式加载。

4. 首屏加载:首屏快速显示可大大的提升用户对页面速度的感知,应尽量针对首屏的快速显示做出相应的优化。

5. 按需加载:将不影响首屏的资源和当前屏幕不使用的资源放到用户需要时才加载,可大幅度提升显示速度和降低总体流量。但是按需加载会导致大量重绘,影响渲染性能。

6. 预加载:大型资源页面可使用Loading,资源加载完成后再显示页面,但是加载时间过长,会造成负体验。

7. 压缩图像:使用图像时选择最合适的格式和大小,然后使用工具压缩,同时在代码中进行图片懒加载。

8. 减少Cookie:Cookie会影响加载速度,所以尽量减少不必要的Cookie。

9. 异步加载第三方资源:第三方资源不可控,会影响页面加载,所以要异步加载第三方资源。

二.执行优化

1.css写在头部,js写在尾部并异步。

2.避免img、iframe等标签的src属性为空:空src会重新加载当前页面,影响速度和效率。

3.尽量避免重置图像大小:多次重置图像大小会引发图像的多次重绘,影响性能。

4.图像尽量避免使用DataURL:DataURL图像没有使用图像压缩算法,文件会变大,并且要解码后再渲染,加载慢耗时长。

三.渲染优化

1.设置Viewport:HTML的viewport可加快页面的渲染。

2.减少DOM结点:DOM结点太多会影响页面的渲染。

3.尽量使用css3动画,合理使用requestAnimationFrame动画代替setTimeout。

4.优化高频事件:scroll、touchmove等事件尽量使用函数防抖节流等进行限制。

四.样式优化

1.避免在HTMl中书写style。

2.避免css表达式:css表达式的执行需要跳出css树的渲染。

3.移除css空规则:css空规则增加了css文件的大小。

4.正确使用display:display会影响页面的渲染。

5.不滥用float:float在渲染时计算量较大,尽量减少使用。

6.不滥用WEB字体:WEB字体需要下载、解析、重绘当前页面,尽量减少使用。

五.脚本优化

1.尽量减少回流和重绘。

2.缓存DOM选择与计算:每次DOM选择都要计算和缓存。

3.缓存.length的值:每次.length计算使用一个变量保存值。

4.尽量使用事件代理:避免批量绑定事件。

5.尽量使用id选择器:id选择器选择元素是最快的。

2-5-8原则

在前端开发中,此规则作为一种开发指导思路,针对浏览器页面的性能优化。

o 用户在2秒内得到响应,会感觉页面的响应速度很快 Fast

o 用户在2~5秒间得到响应,会感觉页面的响应速度还行 Medium

o 用户在5~8秒间得到响应,会感觉页面的响应速度很慢,但还可以接受 Slow

o 用户在8秒后仍然无法得到响应,会感觉页面的响应速度垃圾死了(「此时会有以下四种可能」)

§ 难道是网速不好,发起第二次请求 => 刷新页面

§ 什么垃圾页面呀,怎么还不打开 => 离开页面,有可能转投竞争对手的网站

§ 垃圾程序猿,做的是什么页面啊 => 咒骂开发此页面的程序猿

§ 断网了 => 网线断了?Wi-Fi断了?信号不好?话费用完了?

Ok完事儿,这就是本小白总结的一点点小经验啦~

以上就是前端性能优化建议的详细内容,更多关于前端性能优化的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
理解Javascript_02_理解undefined和null
Oct 11 Javascript
IE浏览器中图片onload事件无效的解决方法
Apr 29 Javascript
jQuery中的$.ajax()方法应用
May 06 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
vue 登录滑动验证实现代码
Aug 24 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
vue自定义表单生成器form-create使用详解
Jul 19 Javascript
JS 自执行函数原理及用法
Aug 05 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 #Javascript
JavaScript中如何调用Java方法
Sep 16 #Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 #Javascript
Vue父子组件传值的一些坑
Sep 16 #Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 #Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 #Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 16 #Javascript
You might like
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
jQuery判断checkbox是否选中的小例子
2013/12/02 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
简单实现JavaScript弹幕效果
2020/08/27 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
什么是数组名
2012/05/10 面试题
大专生工程监理求职信
2013/10/04 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
迎新晚会策划方案
2014/06/13 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
Java死锁的排查
2022/05/11 Java/Android