如何提升web服务器页面的性能,Web 前端性能优化 : 如何有效提升静态文件的加载速度...

用户在访问网页时， 最直观的感受就是页面内容出来的速度，我们要做的优化工作， 也主要是为了这个目标。那么为了提高页面加载(或者渲染)速度呢？一般来说有三个方面：

1、代码逻辑：优秀的代码逻辑结构可以有效减少渲染页面使用的内存和速度(比如虚拟DOM)，此方面不在本文讨论范围内。

2、SSR服务器渲染，也就是所谓的“直出”。将首屏所有内容在服务器端渲染成html静态代码后，直接输出给浏览器，可以有效加快用户访问站点时首屏的加载时间。不过此方面也不在本文讨论范围内。

3、提升静态文件的加载速度，这是本文会讨论的点，而这方面大致又可分为下面几点：

— 加快静态文件下载速度

— 减少静态文件的文件大小

— 减少静态文件请求数量，从而减少发起请求的次数(对于移动端页面来说，请求的开销比网速的开销要大)

(一)代码压缩最常规的优化手段之一。

我们在平时开发的时候，JS脚本文件和CSS样式文件中的代码，都会依据一定的代码规范(比如javascript-standard-style)来提高项目的可维护性，以及团队之间合作的效率。但是在项目发布现网后， 这些代码是给客户端(浏览器)识别的，此时代码的命名规范、空格缩进都已没有必要，我们可以使用工具将这些代码进行混淆和压缩，减少静态文件的大小这里我们选择使用 Webpack，具体会在后面介绍。

(二)文件合并在npm流行的今天，前端在进行项目开发的时候，往往会使用很多第三方代码库，比如jQuery，axios，weixin-js-sdk，lodash，bootstrap等等，每个库都有属于自己的脚本或者样式文件。按照最老的方式的话，我们会标签分别引入这些库文件，导致在打开一个页面的时候会发起几十个请求，这对于移动端来说是不可接受的。

(三)gzip

我们的文件在压缩合并之后，文件大小和文件数量都有了客观的减少。但是一旦站点业务逻辑多了，或者引入的第三方库多了之后，对于移动端来说，文件大小还是不太乐观。

这个时候就是gzip压缩登场的时候啦~我们在webpack的配置中增加gzip压缩配置。

(四)CDN和缓存为什么使用CDN?

CDN 是一个全球(或者只有国内，具体看供应商)分布式网络，它把网站内容更快地传递给服务范围内的一个具体位置，而往往这个具体的位置离实际的内容服务器距离很远。举个极端点的例子，你的网站主机在爱尔兰(海南)，而你的用户则在澳大利亚(漠河)访问。这时当你的用户访问你的网站的时候，延迟会很大，把你的(静态)数据用 CDN 放到澳大利亚(漠河)则会很大程度上提高用户访问网站的体验。如果没有CDN服务，我们可以添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存。

(五)安全方面:

CSPweb前端对于xss安全漏洞一定不陌生。我们知道Javascript语句甚至是css表达式都可能导致xss攻击，现在很多前端会使用CSP策略来进行脚本源的限制防御。

最后给大家推荐一个web前端学习群：675498134，群里有海量资料，每天都有技术大牛分享最前沿的前端案例，大家一起学习一起进步。

群号：675498134

举报/反馈