前端性能优化建议


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 相关文章推荐
重定向实现代码
Nov 20 Javascript
在html页面上拖放移动标签
Jan 08 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
用json方式实现在 js 中建立一个map
May 02 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
JavaScript多态与封装实例分析
Jul 27 Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 Javascript
使用layui的router来进行传参的实现方法
Sep 06 Javascript
过滤器vue.filters的使用方法实现
Sep 18 Javascript
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
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
php下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
php简单中奖算法(实例)
2017/08/15 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
Python类的多重继承问题深入分析
2014/11/09 Python
Python从MP3文件获取id3的方法
2015/06/15 Python
Python中random模块生成随机数详解
2016/03/10 Python
python实现弹窗祝福效果
2019/04/07 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
python爬虫基础之urllib的使用
2020/12/31 Python
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
给排水工程师岗位职责
2013/11/21 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书