前端性能优化总结
对于广大的前端开发人员来说,网站构建本是家常便饭;其中也不得不涉及到性能优化的问题。之前也有接触过,今天总结一下这方面的技巧,下面是我的一下认知,欢迎探讨:
Number One:加载优化
-
减少HTTP请求。
因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个。a) 合并CSS、JavaScript;b) 合并小图片,使用雪碧图(CSS SPRITE);
-
使用缓存可以减少向服务器的请求数,节省加载时间,所以所有静态资源都要在服务器端设置缓存,并且尽量使用长Cache(长Cache资源的更新可使用时间戳)。
a) 缓存一切可缓存的资源;b) 使用长Cache(使用时间戳更新Cache);c) 使用外联式引用CSS、JavaScript;
-
减少资源大小可以加快网页显示速度,所以要对HTML、CSS、JavaScript等进行代码压缩,并在服务器端设置GZip。a) 压缩(例如,多余的空格、换行符和缩进);b) 启用GZip;
-
写在HTML头部的JavaScript(无异步),和写在HTML标签中的Style会阻塞页面的渲染,因此CSS放在页面头部并使用Link方式引入,避免在HTML标签中写Style,JavaScript放在页面尾部或使用异步方式加载
-
首屏的快速显示,可以大大提升用户对页面速度的感知,因此应尽量针对首屏的快速显示做优化。
-
将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载,可以大大提升重要资源的显示速度和降低总体流量(PS:按需加载会导致大量重绘,影响渲染性能)。
a) LazyLoad;b) 滚屏加载;c) 通过Media Query加载;
-
大型重资源页面(如游戏)可使用增加Loading的方法,资源加载完成后再显示页面。但Loading时间过长,会造成用户流失。对用户行为分析,可以在当前页加载下一页资源,提升速度;a) 可感知Loading(如进入空间游戏的Loading);b) 不可感知的Loading(如提前加载下一页);
-
图片是最占流量的资源,因此尽量避免使用他,使用时选择最合适的格式(实现需求的前提下,以大小判断),合适的大小,然后使用智图压缩,同时在代码中用Srcset来按需显示(PS:过度压缩图片大小影响图片显示效果)。
a) 使用智图(雪碧图);
b) 使用其它方式代替图片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont);
c) 使用Srcset;
d) 选择合适的图片(1. webP优于JPG 2. PNG8优于GIF);
e) 选择合适的大小(1. 首次加载不大于1014KB 2. 不宽于640(基于手机屏幕一般宽度));
减少Cookie、避免重定向以及异步加载第三方资源。
Cookie会影响加载速度,所以静态资源域名不使用Cookie。此外,重定向也会影响加载速度,所以在服务器正确设置避免重定向。最后,第三方资源不可控会影响页面的加载和显示,因此要异步加载第三方资源。
Number Two:脚本执行优化
* 脚本处理不当会阻塞页面加载、渲染,因此在使用时需当注意:
1.· CSS写在头部,JavaScript写在尾部或异步。
2. 避免图片和iFrame等的空Src。
空Src会重新加载当前页面,影响速度和效率。
3. 尽量避免重设图片大小。
重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小,多次重设图片大小会引发图片的多次重绘,影响性能。
4. 图片尽量避免使用DataURL。
DataURL图片没有使用图片的压缩算法文件会变大,并且要解码后再渲染,加载慢耗时长。
Number Three:css优化
1. 尽量避免写在HTML标签中写Style属性。
· 避免CSS表达式CSS表达式的执行需跳出CSS树的渲染,因此请避免CSS表达式
· 移除空的CSS规则空的CSS规则增加了CSS文件的大小,且影响CSS树的执行,所以需移除空的CSS规则
· 正确使用Display的属性Display属性会影响页面的渲染,因此请合理使用a) display:inline后不应该再使用width、height、margin、padding以及floatb) display:inline-block后不应该再使用floatc) display:block后不应该再使用vertical-alignd) display:table-*后不应该再使用margin或者float
2.不滥用Float。
Float在渲染时计算量比较大,尽量减少使用
3. 不滥用Web字体。
Web字体需要下载,解析,重绘当前页面,尽量减少使用
4. 不声明过多的Font-size。
过多的Font-size引发CSS树的效率
5. 值为0时不需要任何单位。
为了浏览器的兼容性和性能,值为0时不要带单位
6. 标准化各种浏览器前缀。
a) 无前缀应放在最后
b) CSS动画只用 (-webkit- 无前缀)两种即可
c) 其它前缀为 -webkit- -moz- -ms- 无前缀 四种,(-o-Opera浏览器改用blink内核,所以淘汰)
7. 避免让选择符看起来像正则表达式。
高级选择器执行耗时长且不易读懂,避免使用
Number Four:JavaScript执行优化
1. 减少重绘和回流。
a) 避免不必要的Dom操作
b) 尽量改变Class而不是Style,使用classList代替className
c) 避免使用document.write
d) 减少drawImage
2. 缓存Dom选择与计算。
每次Dom选择都要计算,缓存它
3. 缓存列表.length。
每次.length都要计算,用一个变量保存这个值
4. 尽量使用事件代理,避免批量绑定事件
5. 尽量使用ID选择器。
ID选择器是最快的
6. TOUCH事件优化。
使用touchstart、touchend代替click,因快影响速度快。但应注意Touch响应过快,易引发误操作
Number Five:渲染优化
1. HTML使用Viewport。
Viewport可以加速页面的渲染,请使用以下代码<meta name=”viewport” content=”width=device-width, initial-scale=1″>
2. 减少Dom节点。
Dom节点太多影响页面的渲染,应尽量减少Dom节点
3. 动画优化。
a) 尽量使用CSS3动画b) 合理使用requestAnimationFrame动画代替setTimeoutc) 适当使用Canvas动画 5个元素以内使用css动画,5个以上使用Canvas动画(iOS8可使用webGL)
4. 高频事件优化。
Touchmove、Scroll 事件可导致多次渲染a) 使用requestAnimationFrame监听帧变化,使得在正确的时间进行渲染b) 增加响应变化的时间间隔,减少重绘次数
5. GPU加速。
CSS中以下属性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)来触发GPU渲染,请合理使用(PS:过渡使用会引发手机过耗电增加)
大致就这些吧,不一定能用上但是肯定有能用的上的,希望对大家有所帮助。
- Java基础-17(01)总结,登录注册案例,Set集合,HashSet
- mongoDB初探第一篇(r4笔记第75天)
- 重温快速排序(r4笔记第73天)
- Java基础-17(01)总结,TreeSet,LinkHashSet
- 海量数据迁移之数据抽取流程 (r4笔记第72天)
- CSS Selectors Level 4新特性全面解析
- 巧用外部表避免大量的insert (r4笔记第71天)
- 如何用java语言实现C#中的ref关键字(按引用传递参数)的效果
- 16(01)总结List的子类,ArrayList,Vector,LinkedList
- 16(02)总结泛型
- 基于 React + Webpack 的音乐相册项目(上)
- 16(03)总结增强for循环,静态导入,可变参数
- 基于 React + Webpack 的音乐相册项目(下)
- 通过图表简化sql语句的表关联(r4笔记第70天)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 【一起学系列】之策略模式:好多鸭子啊
- 没内鬼,来点干货!volatile和synchronized
- 【一起学系列】之观察者模式:我没有在监控你啊
- Celery 4 初体验及踩坑
- MySQL 最佳实践:gh-ost 工具使用详解
- 如何将 Hexo 博客部署到云开发静态网站托管
- WordPress 静态化部署到云开发网站托管
- 如何用云应用快速部署一个nodebb的开源论坛
- 【一起学系列】之装饰器模式:不改代码增强功能?
- Hello!GitHub 好用好玩值得收藏的开源项目集合~
- 【一起学系列】之工厂模式:产品?产品族?
- 再见,Navicat!同事安利的这个IDEA的兄弟,真香!
- 【一起学系列】之单例模式:只推荐三种~
- 【一起学系列】之命令模式:封装一个简单Jedis?
- 轻松学Pytorch-实现自定义对象检测器