【腾讯云前端性能优化大赛】前端性能优化最佳实践

【前言】

如今浏览器能够实现的特性越来越多，并且网络逐渐向移动设备转移，用户对于网页的打开速度要求也越来越高。首屏作为直面用户的第一屏，其重要性不言而喻。优化能够让页面加载得更快、对用户的操作响应的更及时，能够给用户提供更为良好的体验。

从用户的角度而言，当打开一个网页，往往关心的是从输入完网页地址后到最后展现完整页面这个过程需要的时间，这个时间越短，用户体验越好。

【减少HTTP请求数量】

合并文件

将脚本文件和样式表文件分别合并到一个文件中，可以减少HTTP请求的数量并缩短最终用户响应时间。当脚本或者样式表在不同页面中使用时需要做不同的修改，这可能会相对麻烦点，但即便如此也要把这个方法作为改善页面性能的重要一步。

CSS Sprites

这是减少图像请求的有效方法，把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分；合并后的图片会比分离的图片总和要小，这是因为它降低了图片自身的开销。

图片地图

是把多张图片整合到一张图片中。虽然文件的总体大小不会改变，但是可以减少HTTP请求次数。图片地图只有在图片的所有组成部分在页面中是紧挨在一起的时候才能使用，如导航栏。确定图片的坐标和可能会比较繁琐且容易出错，同时使用图片地图导航也不具有可读性，因此不推荐这种方法。

内联图像

使用data:URL 模式可以在web页面中包含图片但无需任何额外的HTTP请求。把内联图像放到样式表（可缓存）中可以减少HTTP请求同时又避免增加页面文件的大小。但是内联图像现在还没有得到主流浏览器的支持。

【减少HTTP请求大小】

组件(HTML, CSS, JavaScript)压缩处理。
配置请求头部信息：Accept-encoding: gzip, deflate。此时服务器返回的响应头部中会包含Content-encoding: gzip的信息，表明http响应包被压缩。

【JavaScript的优化】

在JavaScript中，作用域分为函数作用域和词法作用域。当我们执行了某个函数时，会创建一个执行环境。如果在执行环境中想搜索某个变量，会经历以下行为：

首先从当前词法作用域开始搜索，如果找到了这个变量，那么就停止搜索，返回该变量；如果找不到，那么就会搜索外层的词法作用域，一直向上冒泡；如果仍然没有在全局作用域下仍然没有搜索到该变量，浏览器就会报RefferceError类型的错误，此错误表示与作用域相关。最后，此函数的执行环境被销毁。

从性能方面思考，如果将某个变量放在全局作用域下，那么读写到该变量的时间会比局部变量多很多。变量在作用域中的位置越深，访问所需时间就越长。由于全局变量总是(document, window对象)处在作用域链的最末端，因此访问速度是最慢的。

【Ajax方面的优化】

get或者post请求

对于get请求来说，主要用于获取（查询）数据。get请求的参数需要以query string的方式添加在URL后面的。当我们需要从服务器获取或者查询某数据时，都应该使用get请求。优点在于gei请求比post请求要快，同时get请求可以被浏览器缓存。缺点在于get请求的参数大于2048个字符时，超过的字符会被截取，此时需要post请求。

对于post请求来说，主要用于保存（增加值、修改值、删除值）数据。post请求的参数是作为请求的主体提交到服务器。优点在于没有字节的限制。缺点是无法被浏览器缓存。

get和post请求有一个共同点：虽然在请求时，get请求将参数带在url后面，post请求将参数作为请求的主体提交。但是请求参数都是以name1=value1&name2=value2 的方式发送到服务器的。所以，扯了那么多。要注意的是，get请求用于查询(获取)数据，post请求用于保存(增删改)数据。

跨域JSONP

由于同源政策的限制，ajax只能在同域名、同协议、同端口的情况下才可以访问。也就是说，跨域是不行的。但是可以使用JSONP的方式绕过同源政策。

JSONP实现的原理：动态创建script标签。通过src属性添加需要访问的地址，将返回的数据作为参数封装在回调函数中

【使用CDN】

如果应用程序web服务器离用户更近，那么一个HTTP请求的响应时间将缩短。另一方面，如果组件web服务器离用户更近，则多个HTTP请求的响应时间将缩短。

CDN（内容发布网络）是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。在优化性能时，向特定用户发布内容的服务器的选择基于对网络慕课拥堵的测量。例如，CDN可能选择网络阶跃数最小的服务器，或者具有最短响应时间的服务器。