认识达内从这里开始

性能优化是需要程序员长期关注的一个问题，而今天我们就通过案例分析来了解一下，web前端性能优化包含哪些方法。

1、提升页面加载速度

加载优化是为了解决页面内容加载速度受限于网络带宽，过于耗时的问题，主要手段有：

项目打包优化

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

核心概念有：

Output：告诉webpack在哪里输出它所创建的bundles,以及如何命名这些文件,默认值为./dist。

Module：Webpack会从配置的Entry开始递归找出所有依赖的模块。

Chunk：一个Chunk由多个模块组合而成,用于代码合并与分割。

Loader：loader可以将所有类型的文件转换为webpack能够处理的有效模块,然后你就可以利用webpack的打包能力,对它们进行处理。

Plugin：被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。

2、gzip压缩

Gzip是GNUzip的缩写，是一个GNU自由软件的文件压缩程序，在使用中基本可以压缩50%的文本文件大小。在说Gzip之前，我们先介绍一个概念，HTTP压缩。HTTP压缩是一种内置到网页和网页客户端中以改进传输速度和带宽利用率的方式。在使用HTTP压缩的情况下，HTTP数据在从服务器发送前就已压缩：兼容的浏览器将在下载所需的格式前宣告支持何种方法给服务器;不支持压缩方法的浏览器将下载未经压缩的数据。

HTTP压缩就是以缩小体积为目的，对HTTP内容进行重新编码的过程。

Gzip就是HTTP压缩的例题。

减少文件大小会带来两个明显的好处：

减少存储空间

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

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

3、减少数据请求次数

前面我们列举了在页面初始加载时的优化方法，然而在某些场景下这还不够，因为经常会出现页面展示和使用时，频繁请求服务来更新信息的场景。

例如在开发类Excel在线协同系统时，因为单元格业务相互独立，全屏刷新无法满足需求。我们只能定时从服务器获取每个单元格的值，检测到变化后展示在页面上。而每个单元格分别调用api获取内容，就会产生大量网络请求。大量的请求一方面拖累了加载速度，页面也会发生卡顿。

在这种场景下，WebSocket是一个很好的选择，通过长链接的方式保持与服务器的同步，服务端主动推送更新到客户端，减少了网络的开销。但是WebSocket也有自身的缺点，开发成本高，无论是客户端还是服务端都需要考虑断开重连、频繁推送、资源占用等问题。所以，我们还需要通过优化，尽量减少请求频率。

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。