本文目录导航：
前端性能优化有哪些方法
前端性能优化的方法有：
一、增加http恳求数
罕用的增加http恳求数有以下几种：
1、兼并图片。
当图片较多时，可以兼并为一张大图，从而增加http恳求数。
经常变动的图片或许不太适合，变动相对稳固的就可以思考。
兼并大图除了能增加http恳求数外，还可以充沛应用缓存来优化性能。
2、兼并紧缩css样式表和js脚本，他们的独特目标都是为了增加http衔接数。
3、去掉不用要的恳求。
开发写代码或许系统更新之后残留的有效恳求衔接。
4、充沛应用缓存。
这里说的缓存是客户端侧缓存或许说阅读器缓存。
Expires头消息是客户端侧缓存的关键依据，格局相似于Expires:sun ,20 Dec 2017 23:00:00 GMT。
以Apache为例，可在Apache的性能文件中设置Expires。
二、图片优化
优化方法：
1、尽或许的经常使用PNG格局的图片，它相对来说体积较小。
2、关于不同格局的图片，在上线之前最好启动必定的优化。
3、图片的提前加载，也叫做赖加载。
三、经常使用CDN
CDN即内容散发网络，可以经常使用户就近取得所需内容，处置网络拥堵的状况，提高用户访问网站的照应速度。
四、开启GZIP
GZIP即数据紧缩，用于紧缩经常使用Internet传输的一切文本资源。
开启GZIP的方法很便捷，到对应的web服务性能文件中设置一下即可。
以Apache为例，在性能文件中增加。
五、样式表和JS文件的优化
六、经常使用无cookie域名
无cookie域名的概念：当发送一个恳求时，同时还要恳求一张静态的图片和发送cookie时，主机关于这些cookie不会做任何经常使用，也就是说这些cookie没什么用，没不要随恳求一起发送。
前端性能优化总结(一)-js、css优化
移动互联网时代，用户关于网页的关上速度要求越来越高。
首屏作为直面用户的第一屏，其关键性显而易见。
优化用户体验更是咱们前端开发十分须要 focus 的物品之一。
从用户的角度而言，当关上一个网页，往往关心的是从输入完网页地址后到最后展现完整页面这个环节须要的时期，这个时期越短，用户体验越好。
所以作为网页的开发者，就从输入url到页面渲染出现这个环节中去优化网页的性能。
所以输入URL后出现了什么呢？在阅读器中输入url会教训域名解析、建设TCP衔接、发送http恳求、资源解析等步骤。
http缓存优化是网页性能优化的关键一环，这一局部我会在后续笔记中做一个具体总结，所以本文暂不多做具体整顿。
本文关键从网页渲染环节、网页交互以及Vue运行优化三个角度对性能优化做一个小结。
首先谈谈拿到服务端资源后阅读器渲染的流程： 关键渲染门路是阅读器将 HTML、CSS、Javascript 转换为在屏幕上出现的像素内容所教训的一系列步骤。
也就是咱们刚刚提到的的的阅读器渲染流程。
为尽快成功初次渲染，咱们须要最大限制减小以下三种可变起因: 首先，DOM 和 CSSOM 理论是并行构建的，所以 CSS 加载不会阻塞 DOM 的解析。
但是，由于 Render Tree 是依赖于 DOM Tree 和 CSSOM Tree 的， 所以他必定期待到 CSSOM Tree 构建成功，也就是 CSS 资源加载成功(或许 CSS 资源加载失败)后，能力开局渲染。
因此，CSS 加载会阻塞 Dom 的渲染。
由此可见，关于 CSSOM 增加、紧缩以及缓存雷同关键，咱们可以从这方面思考去优化。
当阅读器遇到 script 标志时，会阻止解析器继续操作，直到 CSSOM 构建终了，Javascript 才会运转并继续成功 DOM 构建环节。
当页面中元素样式的扭转并不影响它在文档流中的位置时（例如：color、background-color、visibility 等），阅读器会将新样式赋予给元素并从新绘制它，这个环节称为重绘。
回流（Reflow） 当 Render Tree 中局部或所有元素的尺寸、结构、或某些属性出现扭转时，阅读重视新渲染局部或所有文档的环节称为回流。
有时即使仅仅回流一个繁多的元素，它的父元素以及任何追随它的元素也会发生回流。
现代阅读器会对频繁的回流或重绘操作启动优化：阅读器会保养一个队列，把一切惹起回流和重绘的操作放入队列中，假设队列中的义务数量或许时时期隔到达一个阈值的，阅读器就会将队列清空，启动一次性批处置，这样可以把屡次回流和重绘变成一次性。
当你访问以下属性或方法时，阅读器会立刻清空队列: 由于队列中或许会有影响到这些属性或方法前往值的操作，即使你宿愿失掉的消息与队列中操作引发的扭转有关，阅读器也会强行清空队列，确保你拿到的值是最准确的。
防止频繁操作样式，最好一次性性重写 style 属性，或许将样式列表定义为 class 并一次性性更改 class 属性。
防止频繁操作 DOM，创立一个 documentFragment，在它上方运行一切 DOM 操作，最后再把它增加到文档中。
也可以先为元素设置 display: none，操作完结后再把它显示进去。
由于在 display 属性为 none 的元素上启动的 DOM 操作不会引发回流和重绘。
防止频繁读取会引发回流/重绘的属性，假设确实须要屡次经常使用，就用一个变量缓存起来。
对具备复杂动画的元素经常使用相对定位，使它脱离文档流，否则会惹起父元素及后续元素频繁回流。
图片懒加载在一些图片密集型的网站中运用比拟多，经过图片懒加载可以让一些无法视的图片不去加载，防止一次性性加载过多的图片造成恳求阻塞（阅读器普通对同一域名下的并发恳求的衔接数有限制），这样就可以提高网站的加载速度，提高用户体验。
将页面中的img标签src指向一张小图片或许src为空，而后定义data-src（这个属性可以自定义命名，我才用data-src）属性指向实在的图片。
src指向一张自动的图片，否则当src为空时也会向主机发送一次性恳求。
可以指向loading的地址。
留意，图片要指定宽高。
当载入页面时，先把可视区域内的img标签的data-src属性值负给src，而后监听滚动事情，把用户行将看到的图片加载。
这样便成功了懒加载。
事情委托其实就是应用JS事情冒泡机制把原本须要绑定在子元素的照应事情（click、keydown……）委托给父元素，让父元素担当事情监听的职务。
事情代理的原理是DOM元素的事情冒泡。
好处： 例如有一个列表须要绑定点击事情，每一个列表项的点击都须要前往不同的结果。
传统写法： 传统方法会应用for循环遍历列表为每一个列表元素绑定点击事情，当列表中元素数量十分宏大时，须要绑定少量的点击事情，这种模式就会发生性能疑问。
这种状况下应用事情委托就能很好的处置这个疑问。
改用事情委托： 输入搜查时，可以用防抖debounce等优化模式，增加http恳求； 这里以滚动条事情举例：防抖函数 onscroll 完结时触发一次性，提前口头 节流函数：只准许一个函数在N秒外口头一次性。
滚动条调用接口时，可以用节流throttle等优化模式，增加http恳求； 上方还是一个便捷的滚动条事情节流函数：节流函数 onscroll 时，每隔一段时期触发一次性，像水滴一样 参考链接：
你有用过哪些前端性能优化的方法？
这个是面试常问的疑问了。
我来便捷说下几个方面：
1.增加http恳求：在YUI35规定中也有提到，关键是优化js、css和图片资源三个方面，由于html是没有方法防止的。因此，咱们可以做一下的几项操作：
2.增加资源体积
3.图片加载处置：
就便捷说这些，特意具体的可以网上看下。
