: Undefined offset: 56 in

on line

: Undefined offset: 57 in

on line

背景

做过前端开发，知道有很多前端的工作内容，比如HTML，CSS，Javascript，I***ge，Flash等等的使用。为了提高应用程序的性能，我们需要在不同方面优化各种资源。

对于用户来说，优化可以加快应用的响应和加载速度，可以带来更好的体验。

对于服务提供商来说，前端优化可以减少页面请求的数量，减少宽带占用的带宽，有效节约资源。

前端优化内容很多，按照粒度级别大致可以分为两类:页面优化级别和代码级别优化。

页面优化主要针对页面加载，包括HTTP请求的数量、脚本的非阻塞加载、内联脚本的位置优化等。代码优化包括Javascript中的DOM操作优化、CSS选择器优化、图片优化和HTML结构优化。

代码级优化更注重数据请求，减少HTTP请求的数量非常重要。一个完整的HTTP请求需要经历路由查找、TCP握手、发送请求、服务器响应、浏览器接收等一系列过程。对于小文件，下载文件的实际时间占总请求时间的比例较低，因此需要将小文件合并成大文件进行传输。

页面级:提高页面加载速度。

优化就是解决页面内容加载速度受网络带宽限制，太耗时的问题。主要手段有:

项目打包优化

Webpack是一个前端资源加载/打包工具。它会根据模块的依赖关系进行静态分析，然后根据指定的规则从这些模块中生成相应的静态资源。通常我们使用Webpack将各种静态资源js、css等转换成一个静态文件，减少了页面请求。

核心概念是:

Output:告诉webpack将它创建的包输出到哪里，以及如何命名这些文件。默认值为。/dist。

模块:Web Pack将递归地从配置的条目中找出所有依赖的模块。

Chunk:Chunk由多个模块组成，用于代码合并和划分。

Loader:loader可以将所有类型的文件转换成webpack可以处理的有效模块，然后你就可以利用webpack的打包能力来处理它们了。

插件:它用于转换某些类型的模块，而插件可以用于执行更广泛的任务。

Sprite (CSS Sprite)

Css Sprite又称Css sprite，是一种CSS图像合并技术。这种方法是将小图标和背景图片组合成一张图片，然后利用CSS的背景定位来显示图片中需要显示的部分。

Sprite的基本原理是将我们在网上使用的图片整合到同一个图片中，可以减少网站的HTTP请求数量。该图像使用CSS背景和背景位置属性呈现，

这意味着我们的标签变得更加复杂，图片是在CSS中定义，而非<img>标签。这意味着我们的标签变得更加复杂，图像是用CSS而不是

使用Sprite图表有两个明显的优点:

降低网页图片内容对服务器的请求次数

Sprite可以组合大部分背景图片和小图标，方便我们在任何地方使用。不同位置的请求只会调用同一个图片，大大减少了页面对服务器的请求数量，减轻了服务器的压力；这样也可以提高页面的加载速度，节省服务器的流量。

提升页面加载速度

Sprite镶嵌的图像尺寸明显小于镶嵌前的图像尺寸。

这两个方面可以明显优化前端请求速度。

HTTP2之后就不需要考虑减少请求的数量了，所以Sprite对于优化前端页面的性能意义不大。现在更推荐使用字体图标。这些文件是小的矢量图标。

CDN加速

CDN的全称是Content Delivery Network，即内容分发网络。其目的是在现有的互联网上增加一个新的缓存层，将网站的内容发布到离用户的网络“边缘”最近的节点上，让用户就近获取所需内容，提高用户访问网站的响应速度。技术上可以全面解决网络带宽小、用户访问量大、网点分布不均等问题。，提高用户访问网站的响应速度。

缓存层技术可用于消除高峰数据访问导致的节点设备拥塞。服务器有缓存功能，大部分网页的重复访问不需要从原网站重新发送文件，只需要通过简单的认证发送副本即可。缓存服务器的位置通常不在用户端附近，因此可以获得局域网的响应速度，有效降低广域宽带的消耗。

对于提高响应速度，节省带宽，有效降低源服务器负载是非常有效的。

综上所述，CDN对网络的优化作用主要体现在以下几个方面:

解决服务器端的“第一公里”问题 　缓解甚至消除了不同运营商之间互联的瓶颈造成的影响 　减轻了各省的出口带宽压力 　缓解了骨干网的压力 　优化了网上热点内容的分布

gzip压缩

Gzip是GNUzip的缩写，是GNU自由软件的文件压缩程序。它基本上可以压缩正在使用的文本文件大小的50%。在说Gzip之前，我们先介绍一个概念，HTTP压缩。HTTP压缩是一种内置于网页和web客户端的方法，用于提高传输速度和带宽利用率。在HTTP压缩的情况下，HTTP数据在从服务器发送之前是经过压缩的:兼容的浏览器会在下载所需格式之前向服务器宣布自己支持哪种方法；不支持压缩方法的浏览器将下载未压缩的数据。

HTTP压缩是重新编码HTTP内容以减少其容量的过程。

Gzip是HTTP压缩的经典例子。

减小文件大小将带来两个明显的好处:

减少存储空间通过网络传输时可以减少传输时间

Gzip压缩的原理是在一个文本文件中找到一些重复的字符串，并临时替换它们，从而使整个文件变得更小。正是因为这个原理，文件中代码的重复率越高，Gzip压缩的效率就越高，使用Gzip的好处也就越大。反之亦然。

代码级:减少数据请求的数量。

我们在页面的初始加载中列出了优化方法，但是在某些场景中，这是不够的，因为经常会出现页面显示和使用时频繁请求服务更新信息的场景。

比如开发类似Excel的在线协作系统时，由于单元格业务相互独立，全屏刷新无法满足需求。我们只能定期从服务器获取每个单元格的值，检测到变化后显示在页面上。但是当每个cell调用api获取内容时，会产生大量的网络请求。一方面，大量请求拖累加载速度，页面会卡顿。

在这种情况下，WebSocket是一个不错的选择。它通过长链接与服务器保持同步，服务器主动向客户端推送更新，减少了网络开销。但是WebSocket也有自己的缺点，开发成本高。客户端和服务器端都需要考虑断网重连、频繁推送、资源占用等问题。因此，我们还需要通过优化将请求的频率降到最低。

优化思维

如何减少数据请求的数量？我们可以通过请求队列来优化逻辑。

(通过请求队列优化Web请求)

优化后，在类似Excel的在线协同系统中获取数据的逻辑变为:

当单元格发送请求时，请求先添加ID，并通过ID缓存callback方法，然后进入请求队列，队列管理器定时或者根据队列中请求数量多少像服务端发送请求包。服务端接收到请求包后批量处理，处理后封装新的返回包前端接受到返回包后根据请求的唯一ID，调用对应的callback方法执行，完成单元格的请求

使用这种方法进行优化的优势是显而易见的:

实现简单，代码改动小，原本的ajax请求改为队列调用即可，请求后的callbak无需修改。服务端添加一个新接口拆分请求即可。根据实际场景设置请求频率或者一次请求中数据的数量，兼顾更新频率和相应次数。

应用示例

下面的代码是GETNUMBERFROMSERVER的实现，负责调用服务器的getData接口，传递参数，获取显示内容并在单元格中显示。为了保证异步更新单元格的用户体验，这个函数是由SpreadJS的异步函数派生而来的。

var GetNumberFromServer = function () { }; GetNumberFromServer.prototype = new GC.Spread.CalcEngine.Functions.AsyncFunction(“GETNUMBERFROMSERVER”, 1, 2); GetNumberFromServer.prototype.evaluate = function (context, arg1, arg2) { fetch(“/spread/getData?data=”+arg1) .then(function(response) { return response.text(); }) .then(function(text) { context.setAsyncResult(text); }); }; GC.Spread.CalcEngine.Functions.defineGlobalCustomFunction(“GETNUMBERFROMSERVER”, new GetNumberFromServer());

为了减少请求，我们首先需要使用一个cache对象来存储请求的数据，并定期调用接口进行处理。

let callStack = {}; //收集请求数据let callingStack = {}; //缓存正在请求中的数据信息let callStackCount = 0; //请求数量，当作请求ID，用于区分请求内容let timingId = 0; //用于判断当前是否有定时器等待请求中

然后，我们定义一个新的排队请求方法，而不是直接在函数中调用API接口。

// data 请求数据// context 异步函数context, 网络请求结束后回调时使用// callback 回调函数function stackCall(data, context, callback){ let id = callStackCount++; callStack[id] = {}; callStack[id].data = data; callStack[id].context = context; callStack[id].callback = callback; if(timingId === 0){ // 同时只有一个定时器 timingId = setTimeout(function(){ callingStack = callStack; callStack = {}; let newData = “” //合并请求数据，根据实际业务情况整理 for(let cId in callingStack){ newData += (cId + “,” + callingStack[cId].data + “;”); } // 发送请求，这里模拟数据，发送什么返回什么 fetch(“/spread/getData?data=” + newData) .then(function(response) { return response.text(); }) .then(function(text) { let resData = newData.split(“;”); let spread = designer.getWorkbook(); spread.suspendPaint(); //暂定页面绘制 //解析返回的数据 for(let resId in resData){ if(resData[resId]){ let ress = resData[resId].split(“,”); // 根据Id，获取函数的context，调用callback回调 callingStack[ress[0]].callback.call(null, callingStack[ress[0]].context, ress[1]) } } spread.resumePaint(); //重启统一绘制 timingId = 0; }); }, 1000) }}

最后更新异步函数的实现方式，在函数中调用stackCall栈函数，批量调用成功后在回调中执行setAsyncResult方法，最终实现业务逻辑。

GetNumberFromServer.prototype.evaluate = function (context, arg1, arg2) { stackCall(arg1, context, function(context, text){ context.setAsyncResult(text); }) };

经过这种优化，当页面上有大量异步请求时，这些请求会被放入队列中，固定时间统一处理，刷新一次。

此外，我们还可以使用SpreadJS的doNotRecalculateAfterLoad导入选项，在第一次加载时不会进行计算，而是使用json中的原始值；calcOnDe***nd打开按需计算。进一步优化页面初始化的速度和体验。

json.calcOnDe***nd = true;spread.fromJSON(json, { doNotRecalculateAfterLoad: true });

摘要

本文介绍了几种前端性能优化的方法。这些最佳实践涵盖了页面加载和数据请求。在文章的后半部分，我们通过类似Excel的在线协同编辑的例子，详细介绍了“数据请求排队”的实现，希望对你的前端开发有所帮助。