web性能优化

 

1.减少图片请求的次数（雪碧图）

图片越多请求次数越多，造成延迟的可能性也就越大。所以在这里我们要做的就是把网页中常用的图片整合到一张图片文件中，然后通过移动图片的位置来实现图片的正确显示效果。

2.使用CDN（内容发布网络）

CDN的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。 CDN的原理简单易懂，就是将内容缓存在离用户更近的节点上，以此来提高用户体验，它主要适用于静态资源的访问加速，包括静态页面、图片、视频、js文件、css文件等。

3.懒加载（按需加载）

懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。

实现：

首先为所有懒加载的静态资源添加自定义属性字段，比如如果是图片，可以指定data-src为真实的图片地址，src指向loading的图片。 

然后当资源进入视口的时候，将src属性值替换成data-src的值。 

在vue中懒加载的实现是通过import引入组件

component: () => import(src/xxx")

component: resolve => require(['../components/hello'], resolve),

4.节流和防抖

节流： 就是指连续触发事件，但是该事件在规定时间内只执行一次。

防抖： 就是指连续触发事件，但是该事件在规定时间内只执行一次。如果在规定时间内该事件又触发了，则会重新计算函数的执行时间。

//函数节流 let myBtn = document.getElementById('myBtn'); let canRun = true; myBtn.onclick = function () { if (!canRun) { return; } canRun = false; setTimeout(() => { console.log('我被点击了一次'); canRun = true; }, 1000); }

 

//函数防抖 let timer = false; let myBtn = document.getElementById('myBtn'); myBtn.onclick = function () { clearTimeout(timer); timer = setTimeout(() => { console.log('我被点击了一次'); },1000) }

5.避免css表达式（CSS Expression）

css表达式就是动态的设置css属性，因为 CSS 表达式太强大了，以至于 CSS 表达式带来的严重的性能问题：“ 为了确保有效性，CSS 表达式会进行频繁的求值 ”，到底有多频繁？就是在你改变窗口大小，滚动页面甚至移动鼠标都会触发表达式进行求值，如此频繁的求值以至于浏览器的性能收到严重的影响；

6.避免重定向

重定向会增加http请求的次数，会影响到整个网站的性能，但是必要的重定向又可以提高用户体验，所以我们需要在性能和用户体验之间去权衡，达到最好的目的。

HTTP重定向，简言之，就是当用户浏览器或搜索引擎访问某个旧的网址时，服务器告诉浏览器或搜索引擎，「该网页已经搬家了，新家的地址是……，请使用新地址来访问该网页」。例如，当用户访问网址http://www.baidu.com/index.php时，服务器将告诉浏览器，这个页面应该重定向到http://www.baidu.com/。此时，浏览器或者搜索引擎就会自动跳转到新的网址从而访问网页内容。

怎么避免重定向？

1、在定义链接地址的href属性的时候，尽量使用最完整的、直接的地址。例如

使用www.cnblogs.com 而不是cnblogs.com

使用cn.bing.com 而不是bing.com

使用www.google.com.hk 而不是google.com

使用www.mysite.com/products/ 而不是 www.mysite.com/products

2、在使用Response.Redirect的时候，设置第二个参数为false

考虑是否可用Server.Execute代替

考虑Respone.RedirectPermanent

3、如果涉及到从测试环境到生产环境的迁移，建议通过DNS中的CNAME的机制来定义别名，而不是强制地重定向来实现

7.减少DNS查找（DNS域名系统）

DNS用于映射主机名和IP地址

DNS查找流程：首先查看浏览器缓存是否存在，不存在则访问本机DNS缓存，再不存在则访问本地DNS服务器。所以DNS也是开销，通常浏览器查找一个给定URL的IP地址要花费20-120ms，在DNS查找完成前，浏览器不能从host那里下载任何东西。

为达到更高的性能，DNS解析通常被多级别地缓存。

8.压缩组件

客户端请求报文中包含Accept-Encoding表示客户端能识别的压缩方法，如果客户端请求报文没有包含Accept-Encoding首部，服务器就会假设客户端能够接受任何编码格式；服务器响应报文中包含Content-Encoding表示采用的压缩方法。基于文本的资源如html，js，css，xml都适用于压缩。然而对于图片而言，却不应该对图片进行压缩，因为图片本身是已经被压缩过了，如果再进行gzip压缩，有可能得到的结果是和图片本身大小相差不大或更大，这样就浪费了服务器的CPU资源来做无用功了。

9.使用外部css和javascript

在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。内置在HTML文档中的JavaScript 和CSS则会在每次请求中随HTML文档重新下载。

10.样式置于头部，脚本置于底部

至于为什么CSS写在头部，是因为浏览器预先加载CSS后，可以不必等待HTML加载完毕就可以开始渲染页面了。CSS 不会阻塞 DOM 的解析。

至于JavaScript写在尾部，这是因为JS主要扮演事件处理的功能。这样的话，页面渲染的时候和JS没有关系，放在后面慢慢加载，不要影响更重要的CSS和HTML的加载。