前端进阶（一）Web前端性能优化Web前端性能优化不仅可以提升网站的用户体验，还能节省可观的成本资源利用率。下面将从1）服务器，2）html内容，3）css，4）javascript，5）图片等方面介绍具体的优化操作。1.服务器优化1.1．利用内容分发网络（CDN）将网站内容分发到不同地理位置的多台服务器上，可以加快下载速度。1.2.服务器使用http2.0协议Http2.0优势Binaryframingheadercompressionflowcontrolmultiplexingrequestpriorityserverpush例如使用nginx，要求1）v1.9.5或以上，2）使用https；1.3.GZIP压缩1.4。使用浏览器缓存CSS、javascript、logo、图标等静态资源文件。这些静态资源文件的更新频率比较低，几乎每次http请求都需要这些文件。很高兴提高性能。通过在http头中设置cache-control和expires属性，可以设置浏览器缓存，减少网络请求次数。1.5.设置ETagETags（Entitytags，实体标签）是网络服务器和浏览器使用的一种机制，用来判断浏览器缓存中的内容是否与服务器中的原始内容相匹配。2.HTML内容优化2.1.减少HTTP请求次数这个策略最重要也是最有效的，因为一个完整的请求需要经过DNS寻址，与服务器建立连接，发送数据，等待服务器响应，接收数据。这样一个耗时的过程成本和资源成本的复杂过程。常用方法：合并多个CSS文件和js文件，并最小化。使用CSSSprites整合图片，base64编码内嵌图片，使用data:URLscheme将图片数据嵌入到实际页面中。合理设置HTTP缓存2.2。减少DNS查找为了减少DNS查询次数，最好的解决办法是减少页面差异。域名请求的机会。2.3.避免重定向301/30x重定向，在访问过程中需要反复发起一系列动作，会消耗大量时间，所以要避免多次重定向地址或资源访问。2.4.避免将html标签中的style属性js和css写到单独的文件中，方便浏览器缓存。2.5.异步加载组件，预加载组件(ansyc,defer)ansyc,defer不会阻塞浏览器的文档解析。ansyc用于异步加载，defer用于预加载2.6。图片延迟分页加载对于图片，在页面刚加载时只能加载第一屏，后续图片会在用户继续向后滚动时加载。这样，如果用户只对第一屏的内容感兴趣，则保留其余的图片请求。2.7.减少DOM元素的数量页面中的DOM元素很多，会减慢javascript遍历DOM的效率。2.8.最大限度地减少iframe的数量iframe提供了一种将内容从一个网站嵌入到另一个网站的简便方法。但它的创建速度比其他DOM元素（包括JavaScript和CSS）的创建速度慢1-2个数量级。2.9.避免404HTTP请求是耗时的，所以使用HTTP请求得到无用的响应（比如404页面未找到）是完全没有必要的，只会降低用户体验而没有任何好处。2.10.对Ajax请求使用GET方法2.11。避免空图像src3.CSS优化3.1。将CSS代码放在HTML页面的顶部3.2。合并和压缩CSS3.3。CSS选择器优化浏览器对选择器的解析是从右到左按ID查询效率最高3.4.避免使用CSS表达式3.5。使用而不是@import3.6。避免使用过滤器4.javascript优化4.1。将JavaScript脚本放在页面底部4.2。JavaScript和CSS被引用为外部文件在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都可以缓存在浏览器中。4.3.合并和压缩JavaScript4.4。删除无用和重复的脚本4.5。最小化DOM访问使用JavaScript访问DOM元素速度较慢4.6。开发智能事件处理变量，少访问全局变量）减少闭包的使用，避免内存泄漏，谨慎使用with避免使用eval函数函数字符串拼接，Javascript中使用“+”拼接字符串的效率比较低，推荐使用数组的join方式5.图片优化5.1。优化图像大小5.2。通过CSSSprites5.3优化图像。不要在HTML5.4中使用缩放图像。Favicon.ico应小且可缓存6.其他6.1。减小cookie大小，尽量不要在每次请求和响应中使用cookie，过大的cookie会严重影响数据传输6.2.LoadbalancingLoadbalancing负载均衡器，减少各个站点的请求本，提高单个请求的响应时间。
