前端性能优化方法

计算机系统的组成

关于图的介绍

有损压缩-你看到的不一定是真实的

JPG是我们最常见的采用有损压缩对图像信息进行处理的图片格式。然后对每个栅格的数据进行压缩处理，当我们放大一幅图像的时候，就会发现这些8*8像素栅格中很多细节信息被去除，而通过一些特殊算法用附近的颜色进行填充（为了让大家看得更清楚我将图像的压缩比率调到很低）。这也是为什么我们用JPG存储图像有时会产生块状模糊的原因。

无损压缩-最精确的拼图

相对有损压缩而言无损压缩则会真实的记录图像上每个像素点的数据信息，但为了压缩图像文件的大小会采取一些特殊的算法。无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的，哪些是不同的，然后把这些相同的数据信息进行压缩记录，（例如一片蓝色的天空之需要记录起点和终点的位置就可以了），而把不同的数据另外保存（例如天空上的白云和渐变等数据）。

一个完整的计算机系统由计算机硬件系统和计算机软件系统两部分组成。如果仅有硬件系统，计算机不能做任何有意义的工作，硬件仅仅是建立了计算机的物质基础。如果要计算机硬件发挥作用，必须配置软件系统，软件使计算机硬件具有了生命力。

矢量图-完美的几何图形

需要强调说明的是我们在web页面上所使用的图像都是位图，即便有些称为矢量图形（如矢量icon等）也是指通过矢量工具进行绘制然后再转成位图格式在web上使用的。

位图-神奇的拼图

位图又叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就好比一幅大的拼图，只不过每个拼块都是一个纯色的像素点，当我们把这些不同颜色的像素点按照一定规律排列在一起的时候，就形成了我们所看到的图像。所以当我们放大一幅像素图时，能看到这些拼片一样的像素点（如下图）。

位图的优点是利于显示色彩层次丰富的写实图像。缺点则是文件大小较大，放大和缩小图像会失真。

尽管我们在web页面中所使用的JPG、PNG、GIF格式的图像都是位图，即他们都是通过记录像素点的数据来保存和显示图像，但这些不同格式的图像在记录这些数据时的方式却不一样。

前端性能优化

采用css雪碧图（css sprite/css图片精灵）技术

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

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

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

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

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

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

采用CDN加速（分布式操作）

关于页面的SEO优化技巧

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

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

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

操作DOM弊端：
DOM存在映射机制（js中的DOM元素对象和页面的DOM结构是存在映射机制的，一改则都是改），这种映射机制，是浏览器按照W3C标准完成对JS语言的构建和DOM的构建（其实就是构建了一个监听机制），操作DOM是同时要修改两个地方，相对于一些其他的js编程来说是消耗性能的。

页面中的DOM结构改变或者样式改变，会触发浏览器的回流（浏览器会把DOM结构重新进行计算，这个操作很消耗性能）和重绘（把一个元素的样式重新渲染）

编写代码的时候，更多的使用异步编程

同步编程会导致： 上面的东西完不成，下面任务也做不了，开发的时候，可以把某一个区域模块都设置为异步编程，这样只要模块之间没有必然的先后顺序，都可以独立进行加载，不会受到上面模块的堵塞影响（用的比较少）。

尤其是ajax数据请求，我们一般都要使用异步编程，最好是基于promise设计模式进行管理（项目中经常使用fetch、vue axios等插件，来进行ajax请求处理，因为这些插件中就是基于promise设计模式对ajax进行封装处理）

在实际项目中，我们尽可能避免一次性循环过多的数据（因为循环操作是同步编程），尤其是避免while导致的死循环操作
css选择器优化

尽量减少标签选择器的使用
尽量少使用id选择器，多使用样式类选择器（通用性比较强）

减少选择器前面的前缀（选择器是从右向左查找的，前缀多，查询的时间多）避免使用css表达式

减少页面中的冗余代码，尽可能提高方法的重复使用率：“低耦合高内聚”

最好css放在head中，js放在body尾部，让页面加载的时候，先加载css，再加载js(先呈现页面，再给用户提供操作)

js中避免使用eval性能消耗大
代码压缩后，容易出现代码执行错话问题
js中尽量减少闭包使用，闭包会形成一个不销毁的栈内存，过多的栈内存累积会影响页面的性能

还会容易造成内存的泄漏，闭包也有自己的优势：保存和保护，我们不能避免，我们只能尽量减少

在做dom事件绑定的时候，尽量避免一个个的事件绑定，而是采用性能更高的事件委托来实现

事件委托（事件代理）：把事件绑定给外层容器，当里面的后代元素相关行为被触发，外层容器绑定的方法也会被触发执行（冒泡传播机制导致）通过事件源是谁，我们做不同的操作即可

尽量使用css3动画代替js动画，因为css3的动画或者变形都开启了硬件加速，性能比js动画好。编写js代码的时候，尽可能使用设计模式来构建体系，方便后期的维护，也提高了扩充性。

css中减少对滤镜的使用，页面中减少队友flash的使用

关于页面的SEO优化技巧

页面中杜绝出现死链接（404页面），而且对于用户输入一个错误页面，我们要引导到404提示页面中（服务器处理的）。

避免浏览器中异常错误抛出

尽量避免代码出错

使用try catch做异常信息捕获

增加页面关键词优化