web性能优化浅显理解

Posted 2021-04-30 菜鸟杂文

前端优化是复杂的，针对不同的资源都有不同的优化方式，那么前端优化的目的是什么？

1、从用户的角度而言，优化能够让页面加载的更快、对用户的操作相应能及时，能够给用户提供更为友好的体验。

2、从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省客观的资源。

前端优化分为一下几个优化点：

1、尽量减少HTTP请求数

减少HTTP请求数基本上所有的前端都知道，而且也是最重要最有效的，都说要减少HTTP请求，那么请求多了到底会怎么样呢？首先，每个请求都是由成本的，既包含时间成本也包含资源成本。一个完整的请求都需要经过DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接受数据这样一个漫长而复杂的过程，时间成本就是需要用户看到或者感受到这个资源是必须要等待这个过程结束，资源上由于每个请求都需要携带数据，因此每个请求都需要占用带宽，另外，由于浏览器进行并发请求的请求数是有上限的，因此请求数多了以后，浏览器会分配进行请求，因此增加用户的等待时间，会给用户造成页面速度慢的印象，即使可能用户能看到第一屏的资源都已经请求完了，但是浏览器的进度条会一直纯在。

终端用户在等待响应的时间中，有80%用户下载的各个内容，贼部分时间包括下载页面中的图片、CSS、JS、FLASH等等，通过减少页面中的元素可以减少HTTP请求的次数，这是提高网页速度的关键步骤。

1.1、合并文件：合并文件是通过把所有的脚本放在一个文件中减少HTTP请求的方法，例如可以简单得把多有的CSS文件都放入一个样式表中，当脚本或者样式表在不同的页面中使用时需要做不同的修改，这可能会相对比较麻烦，但即便如此也要把这个方法作为改善页面性能的重要一步。

1.2、CSS Sprites：css sprites是减少图像请求的有效方法。把所有的背景图片都放在一个图片文件中，然后通过css的background-image和background-position属性来显示图片的不同部分；

1.3、Inline images：使用data:URL scheme的方式将图片嵌入到页面或css中，如果不考虑资源管理上的问题的话，也是一个好方法。如果是嵌入页面的话换来的是增大了页面的体积，而且无法利用浏览器缓存。使用在css中的图片则更好点。

1.4、Layz load images：图片懒加载，在页面加载第一屏的时候可以只加载第一屏所能见到的图片，当用户继续往后滚屏的时候才会加载后续的图片，以此内推。这样以来加入用户支队第一屏内容感兴趣时，那么剩下的图片的请求就节省了。

1.5、将外部脚本置底：浏览器是可以并发请求的，这一点使得其能够更快的加载资源，然而外部链接脚本在加载时会阻塞其他资源，例如在脚本加载完成之前，它后面的图片、样式以及其他脚本都处于阻塞状态，知道脚本加载完成后才会开始加载。如果脚本放在比较考勤的位置，则会影响整个页面的加载速度从而影响用户体验。解决这一问题的方法有很多，而最简单可依赖的方法就是将脚本尽可能的往后挪，减少对并发下载的影响。

1.6、将css放置于head中：如果将css放在其他地方，则浏览器有可能还未下载和解析到CSS就已经开始渲染页面了，贼九导致页面由无css跳转到css状态。用户体验不友好，除此之外，有些浏览器会在css下载完成后才开始渲染页面，如果css放在靠下的位置则会导致浏览器将渲染时间推迟。

2、减少DNS查找次数

缓存DNS查找可以改善页面性能，这中缓存需要一个特定的缓存服务器，这种服务器一般属于用户的ISP提供商或者本地局域网控制，但是它同样会在用户使用的计算机上产什么缓存.DNS信息会保留在操作系统的DNS缓存中，大多数浏览器由独立于操作系统以外的自己的缓存。由于浏览器有自己的缓存记录，因此在一次请求中它不会受到操作系统的影响。

Internet Exporer默认情况下对DNS查找记录的缓存时间为30分钟，它在注册表中的键值为DnsCache Timeout，firefox对DNS的查找记录缓存时间为1分钟，它在配置文件中的选项为network.dnscacheexpiration(fasterfox把这个选项改为1小时)。

当客户端中的DNS缓存都为空时（浏览器和操作系统都为空），DNS查找的次数和页面中主机名和数量相同，这其中包括页面的URL、图片、脚本、样式、flash等包含的主机名。减少主机名的数量可以减少DNS查找的次数也还可以减少页面中并行的下载数量。减少DNS查找次数可以节省响应时间，但是减少并行下载却会增加相应时间。原则是把这些页面中的内容分割成至少两部分但不超过四部分，贼众结果就是在减少DNS查找次数和保持较高程度并行下载两者之间的权衡。