前端性能优化

加载优化

首先引入两个概念：首屏时间和懒加载

首屏时间：指用户打开一个网站时,直到浏览器首页面内容渲染完成的时间。

懒加载：懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片 数据，是一种较好的网页性能优化的方式。

优化首屏时间，便可利用懒加载来实现。

懒加载特点：

减少无用资源的加载：使用懒加载明显减少了服务器的压力和流量， 同时也减小了浏览器的负担。

提升用户体验: 如果同时加载较多图片，可能需要等待的时间较长， 这样影响了用户体验，而使用懒加载就能大大的提高用户体验。

防止加载过多图片而影响其他资源文件的加载 ：会影响网站应用的 正常使用。

懒加载的使用：

以图片懒加载为例， 当网页引入过多的图片展示时，页面会加载很久，这时，通过判断用户需要查看哪些图片，在浏览区域内就加载哪些图片。

window.innerHeight 是浏览器可视区的高度

document.documentElement.scrollTop 是浏览器滚动的过的距离

imgs.offsetTop 是元素顶部距离文档顶部的高度 (包括滚动条的距离)

图片加载条件：当图片的（顶部高度）小于（浏览器的可视区域和滚动区域） 该图片需要进行加载，便于用户查看。

也就是：img.offsetTop  < window.innerHeight + document.body.scrollTop;

注意：懒加载大多需要监听页面的滚动事件，防止事件频繁调用耗性能，页面全部加载后需要注销滚动事件的监听 。

构建优化

渲染优化

浏览器页面渲染的流程：解析HTML(构建出DOM树结构)——>解析CSS（构建出CSSOM树结构）——>构造渲染树Render Tree（将解析后的DOM树和CSSOM树结合，构造出渲染树，只包含渲染的节点）——>布局（计算每个节点在屏幕上的位置以及大小）——>绘制（根据布局，绘制出内容）——>合成图层——>显示

重排：当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时，浏 览器会重新渲染部分或者全部文档的过程。

导致重排的操作：

1、浏览器的窗口大小发生变化

2、元素的内容发生变化

3、元素的尺寸或者位置发生变化

4、元素的字体大小发生变化

5、激活 CSS 伪类

6、查询某些属性或者调用某些方法

7、添加或者删除可见的 DOM 元素 

重绘： 当页面中某些元素的样式发生变化，但是不会影响其在文档流中的位 置时，浏览器就会对元素进行重新绘制。

导致重绘的操作：

1、color、background 相关属性：background-color、background-image 等

outline 相关属性 ：  outline-color 、  outline-width  、text-decoration、border-radius、

2、visibility、box-shadow

3、css3的translate

注意：  当触发重排时，一定会触发重绘，但是重绘不一定会引发重排。

缓存优化