阅读 68

每个前端工程师都应该懂的前端性能优化总结:

采用css雪碧图(css sprite/css图片精灵)技术

采用css雪碧图(css sprite/css图片精灵)技术,把一些小图合并到一张大图上,使用的时候通过背景图片定位,定位到具体的某一张小图片上
css代码如下:

.pubBg{
	background: url('././img/sprit.png') no-repeat;
  background-size: 0 0 /*和原图大小保持一致*/
}
.box {
	background-position: x y; /*通过背景定位,定位到具体的位置,展示不同的图片即可*/
}
复制代码


html代码:

<div class="pubBg box"></div>
复制代码

优点:减少HTTP的请求次数或者减少请求数据的大小,因为页面中每发送一次http请求,都需要完成请求+响应这个完整的http事务,会消耗一些时间,也可能会导致http链接通道的阻塞,为了提高页面加载速度和运行的性能,我们应该减少http的请求次数和减少请求内容的大小(请求内容越大,消耗的时间越长)。

在项目中,我们最好把css或者js文件进行合并或者压缩,尤其是在移动端开发的时候,如果css或者j s内容不是很多,我们可以采用内嵌式,以此减少http的请求次数,加快页面加载速度

  1. css合并成一个,js也最好合并
  2. 首页通过一些工具(例如: webpack)把合并后的css或者js压缩成x xx.min.js减少文件大小
  3. 服务器开启资源文件的GZIP压缩
  4. 通过一些自动化工具完成css以及js的合并压缩,或者再完成less转css,es6转es5等操作,我们这种自动化构建模式,称之为前端“工程化”开发

采用图片懒加载技术,在页面开始加载的时候,不请求真实图片地址,而是用默认图占位,当前页面加载完成后,在根据相关的条件依次加载真实图片(减少页面首次加载http请求的次数)

在实际项目中,我们开始图片都不加载,页面首次加载完成后,先把第一屏幕中可以看见的图片进行加载,随着页面滚动,再把下面区域中能够呈现出来的图片进行加载。
根据图片的恶懒加载技术,还可以扩充出,数据的懒加载

  • 开始加载页面的时候,我们只把首屏或者前两屏的数据从服务器端进行请求(有些网站首屏数据是后端渲染好,整体返回给客户端呈现的)
  • 当页面下拉,滚动到某个区域,再把这个区域需要的数据进行请求,(请求回来做数据绑定以及图片延迟加载等)
  • 分页展示技术采用的也是数据的懒加载思想实现的:如果我们请求获取的数据是很多的数据,我们最好分批请求,开始只请求一页的数据,当用户点击其他页的时候,再请求那页的数据

对于不经常更新的数据,最好采用浏览器的304缓存左处理,主要由服务器处理(减少http请求次数)

例: 第一个请求css和js下来,浏览器会把请求的内容缓存起来,如果做了304处理,用户再次请求css和js,直接从缓存中读取,不再请求服务器获取(减少http请求次数)
当用户强制刷新页面,或者当前缓存的css和js发生了变动,都会重新从服务器获取
对于客户端来讲,我们还可以基于localStorage来做一些本地存储。

使用字体图标代替一些页面中的位图(图片),这样不仅做适配的时候方便,而且更加轻量级,而且减少了htttp请求次数(类似雪碧图)

如果当前页面中出现了AUDIO或者VIDEO标签,我们最好设置它们的preload为none,页面加载的时候,音视频资源不进行加载,播放的时候再进行加载,(减少页面首次加载HTTP请求的次数)

preload为auto,页面首次加载的时候就把音视频资源进行加载;
preload为metadata: 页面首次加载的时候只把音视频资源的头部信息进行加载

在客户端和服务器端进行数据通信的时候,我们尽量采用json格式进行数据传输

优势:

  1. json格式数据,能够清晰明了的展示数据结构,而且也方便我们获取和操作
  2. 相对于很早以前的xml格式传输,json格式的数据更加轻量级
  3. 客户端和服务器端都支持json格式数据的处理,处理起来非常的方便

在真实项目中,并不是所有的数据都要基于json,我们尽可能这样做,但对于某些特殊需求(例如文件流传输或者文档传输),使用json就合不合适了

采用CDN加速

cdn: 分布式(地域分布式)

关于编写代码时候的一些优化技巧

除了减少http请求次数和大小可以优化性能,在编写代码的时候,也可以进行一些优化,让页面性能有所提升(不好的代码编写习惯,会导致页面性能消耗太大,例如:内存泄露)

  1. 在编写js代码的时候,尽量减少对DOM的操作。在js中操作DOM是一个非常消耗性能的事情,但是我们又不可能避免的操作DOM,我们只能尽量减少对于DOM的操作

操作DOM弊端:

  • DOM存在映射机制(js中的DOM元素对象和页面的DOM结构是存在映射机制的,一改则都是改),这种映射机制,是浏览器按照W3C标准完成对JS语言的构建和DOM的构建(其实就是构建了一个监听机制),操作DOM是同时要修改两个地方,相对于一些其他的js编程来说是消耗性能的。
  • 页面中的DOM结构改变或者样式改变,会触发浏览器的回流(浏览器会把DOM结构重新进行计算,这个操作很消耗性能)和重绘(把一个元素的样式重新渲染)
  1. 编写代码的时候,更多的使用异步编程

同步编程会导致: 上面的东西完不成,下面任务也做不了,开发的时候,可以把某一个区域模块都设置为异步编程,这样只要模块之间没有必然的先后顺序,都可以独立进行加载,不会受到上面模块的堵塞影响(用的比较少)。
尤其是ajax数据请求,我们一般都要使用异步编程,最好是基于promise设计模式进行管理(项目中经常使用fetch、vue axios等插件,来进行ajax请求处理,因为这些插件中就是基于promise设计模式对ajax进行封装处理)

  1. 在实际项目中,我们尽可能避免一次性循环过多的数据(因为循环操作是同步编程),尤其是避免while导致的死循环操作
  2. css选择器优化
  • 尽量减少标签选择器的使用
  • 尽量少使用id选择器,多使用样式类选择器(通用性比较强)
  • 减少选择器前面的前缀(选择器是从右向左查找的,前缀多,查询的时间多)
  1. 避免使用css表达式
  2. 减少页面中的冗余代码,尽可能提高方法的重复使用率:"低耦合高内聚"
  3. 最好css放在head中,js放在body尾部,让页面加载的时候,先加载css,再加载js(先呈现页面,再给用户提供操作)
  4. js中避免使用eval
  • 性能消耗大
  • 代码压缩后,容易出现代码执行错话问题
  1. js中尽量减少闭包使用
  • 闭包会形成一个不销毁的栈内存,过多的栈内存累积会影响页面的性能
  • 还会容易造成内存的泄漏

闭包也有自己的优势:保存和保护,我们不能避免,我们只能尽量减少

  1. 在做dom事件绑定的时候,尽量避免一个个的事件绑定,而是采用性能更高的事件委托来实现
  • 事件委托(事件代理)
  • 把事件绑定给外层容器,当里面的后代元素相关行为被触发,外层容器绑定的方法也会被触发执行(冒泡传播机制导致)通过事件源是谁,我们做不同的操作即可
  1. 尽量使用css3动画代替js动画,因为css3的动画或者变形都开启了硬件加速,性能比js动画好。
  2. 编写js代码的时候,尽可能使用设计模式来构建体系,方便后期的维护,也提高了扩充性
  3. css中减少对滤镜的使用,页面中减少队友flash的使用

关于页面的SEO优化技巧

  1. 页面中杜绝出现死链接(404页面),而且对于用户输入一个错误页面,我们要引导到404提示页面中(服务器处理的)。
  2. 避免浏览器中异常错误抛出
  • 尽量避免代码出错
  • 使用try catch做异常信息捕获
  1. 增加页面关键词优化

总结

这篇文章主要分享了一些前端性能优化的方法,从不同角度考虑,比如减少http请求,编写代码的一些优化技巧,页面seo优化的一些技巧等,如果想了解更多,请扫码下面的二维码,关注公众号:

qrcode_for_gh_4d3763fa9780_258 (1).jpg