前端优化

一.减少http请求

1.图片

（1）图片可通过图片合并成雪碧图减少http请求

（2）图片可转换成内联图片如base64图片编码，注意每个浏览器对内联图片的大小限制

（3）iconfont：可利用阿里的矢量图对纯色图标进行优化，通过设置大小和颜色可通用，也可减少请求

2.css和js合并 （不推荐使用内联样式和脚本，推荐一个页面大约一个脚本和样式）

注意：对于模块化文件怎么进行合并？

二.内容分发（CDN）

1.通过将静态资源发布在不同地理位置的服务器，缩短响应时间。CDN的 缺点可能受到其他网站的影响，CDN不能控制组件服务器带来的麻烦，例如修改http响应只能通过CDN代理服务器进行修改。

三.缓存

（1）expires:设置http响应头的expires过期时间，如2019-09-09 xx-xx-xx是一个特定时间这就需要保持服务端和客户端时间同步

（2）cache-control:max-age 设置相对时间如10000ms，这就不要求时间同步，这是http1.1的属性小部分服务器还不支持

注意：更新了 内容 如何请求新文件？

（1）通过改变请求地址

四.压缩组件（缩小资源）

（1）http请求头设置accept-encoding：gzip（最典型的压缩格式）,deflate;响应头设置content-encoding：gzip;设置资源以gzip的形式压缩。压缩会增大服务器cpu的 处理时间，浏览器要对压缩资源进行解压要检测收益是否大于开销。图片和pdf就不需要在进行压缩，它本身都已经被压缩了。

五.样式表放在头部（逐步呈现）

六.脚本放在页面底部

（1）脚本放置在页面底部可以阻止页面逐步呈现，减少页面阻塞（脚本下载的时候会按顺序下载，阻塞页面呈现,阻塞页面dom渲染）

七.避免css表达式（移动鼠标或滚动都有可能会造成表达式求值影响性能）

八.使用外部css和js

（1）内联的css和js在某些情况下加载速度比外联快，但是外联可以缓存，组件可以复用

九.减少DNS查找？

10.避免重定向

（1）重定向html会导致整个html文档延迟返回，造成组件下载也延迟

11.移除重复脚本

12.Etag标签（用还是不用？）

13.ajax可缓存

14.精简js