前端性能优化方法

5个方法用来优化页面的性能
1.网站中的图像放置在专门的图像服务器中，开辟多个不用传Cookie的子域名，这些子域名都能访问该服务器中的图像。
2.优化请求，包括合并文件、缓存资源、使用CDN、减小Cookie、启用GZip压缩和长连接等。
3.优化CSS，包括将CSS文件至于HTML文档的顶部、使用外部样式、压缩CSS文件等。
4.优化JS，包括减少重绘和重排、避免内联脚本阻塞并行下载、批量执行DOM操作、把脚本置于HTML文档底部等。
5.优化图像，包括压缩、合并、懒加载、预加载和使用WebP格式等。

WebP是由谷歌（google）开发的一种旨在加快图片加载速度的图片格式,并能节省大量的服务器宽带资源和数据空间，在压缩率上比 JPEG 格式更优越，同时提供了有损压缩与无损压缩的图片文件格式，在质量相同的情况下，WebP 格式图像的体积要比 JPEG 格式图像小 40%。

● 前端优化
参考回答：
降低请求量：合并资源，减少HTTP 请求数，minify / gzip 压缩，webP，lazyLoad。
加快请求速度：预解析DNS，减少域名数，并行加载，CDN 分发。
缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存localStorage。
渲染：JS/CSS优化，加载顺序，服务端渲染，pipeline。

页面性能关注的参数：
1.请求时间相关的参数，包括白屏时间、加载总时间、DNS查询耗时和TTFB（读取页面第一个字的时间）等
2.资源载入信息，通常以瀑布图的形式展现，包括资源地址、载入耗时、TTFB和TCP连接耗时等
3.网络的状态和速度
4.代理信息，包括操作系统、设备和浏览器
5.Ajax请求监控，包括请求地址、请求耗时和传输字节量等
6.异常监控，包括异常的提示信息、行数、列数和地址等

图片有关：
①压缩
②多使用icon字符集，懒加载

CSS
①放在head标签里
②减少使用复杂的css选择器

JS
①把脚本放在body底部
②使用外部js、css
③压缩js，css

有关DOM
①能用css解决的不要操作dom
②对dom查询做缓存
③将频繁操作改为一次性
④不必等到 onload 事件来开始处理 DOM 树，使用DOMContentLoaded 会更快。大多时候我们需要的只是想访问的元素已在 DOM 树中，所以不必等到所有图片下载完。

Cookie
①清楚不必要的cookie
②减少cookie的大小
③正确设置Expires日期

服务端
使用cdn：（内容分布网络）在离你最近的地方，放置一台性能好的，连接顺畅的副本服务器，让你能够以最快的速度，获取内容

清理闭包的变量

防抖节流

减少http请求次数
js，css等资源合并