前端减少页面加载时间的方法（前端减少页面加载时间的方法有哪些）

大家好！今天让创意岭的小编来大家介绍下关于前端减少页面加载时间的方法的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。

开始之前先推荐一个非常厉害的Ai人工智能工具，一键生成原创文章、方案、文案、工作计划、工作报告、论文、代码、作文、做题和对话答疑等等

只需要输入关键词，就能返回你想要的内容，越精准，写出的就越详细，有微信小程序端、在线网页版、PC客户端

官网：https://ai.de1919.com。

创意岭作为行业内优秀的企业，服务客户遍布全球各地，如需了解SEO相关业务请拨打电话175-8598-2043，或添加微信：1454722008

本文目录:

• 1、如何进行前端优化

• 2、如何对前端性能进行优化

• 3、常见的前端性能优化手段都有哪些？都有多大收益

• 4、APP常见加载方式

一、如何进行前端优化

1.减少 HTTP 请求....

2.使用 HTTP2

3.使用服务端渲染

4.静态资源使用 CDN

5.将 CSS 放在文件头部，JavaScript 文件放 ...

6.使用字体图标 iconfont 代替图片图标

7.善用缓存，不重复加载相同的资源

8.压缩文件

9.图片优化

(1).图片延迟加载

(2). 响应式图片

(3). 调整图片大小

(4). 降低图片质量

(5). 尽可能利用 CSS3 效果代替图片

(6). 使用 webp 格式的图片

10. 通过 webpack 按需加载代码，提取第三库代码，减少 ES6 转为 ES5 的冗余代码

11. 减少重绘重排

12. 使用事件委托

13. 注意程序的局部性

14. if-else 对比 switch

15. 查找表

16. 避免页面卡顿

17. 使用 requestAnimationFrame 来实现视觉变化

18. 使用 Web Workers

19. 使用位操作

20. 不要覆盖原生方法

21. 降低 CSS 选择器的复杂性

(1). 浏览器读取选择器，遵循的原则是从选择器的右边到左边读取。

(2). CSS 选择器优先级

22. 使用 flexbox 而不是较早的布局模型

23. 使用 transform 和 opacity 属性更改来实现动画

24. 合理使用规则，避免过度优化

性能优化主要分为两类：

• 加载时优化

• 运行时优化

二、如何对前端性能进行优化

前端开发代码优化、可维护性、浏览器兼容性是非常重要的课题。从实际的工程应用角度出发，最常遇见的前端优化问题。前端性能进行优化规则，基本可以涵盖现在前端大部分的性能优化原则了，很多更加geek和精细优化方法都是从这些原则里面延伸出来的。

前端性能进行优化都有哪些规则

1. 减少HTTP请求次数

   尽量合并图片、CSS、JS。比如加载一个页面有5个css文件的话，把这个5个文件合成一个的话，就只需要发出一次http请求，节省网络请求时间，加快页面的加载。

2. 使用CDN

网站上静态资源即css、js全都使用cdn分发，包括图片

3. 避免空的src和href

当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。所以要避免犯这样的疏忽。

4. 为文件头指定Expires

Exipres是用来设置文件的过期时间的，一般对css、js、图片资源有效。 他可以使内容具有缓存性，这样下回再访问同样的资源时就通过浏览器缓存区读取，不需要再发出http请求。如下例子：

新浪微博的这个css文件的Expires时间是2016-5-04 09:14:14.

5. 使用gzip压缩内容

gzip能够压缩任何一个文本类型的响应，包括html，xml，json。大大缩小请求返回的数据量。

6. 把CSS放到顶部

网页上的资源加载时从上网下顺序加载的，所以css放在页面的顶部能够优先渲染页面，让用户感觉页面加载很快。

7. 把JS放到底部

加载js时会对后续的资源造成阻塞，必须得等js加载完才去加载后续的文件 ，所以就把js放在页面底部最后加载。

8. 避免使用CSS表达式

举个css表达式的例子

font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF" : “#AAAAAA" );

这个表达式会持续的在页面上计算样式，影响页面的性能。并且css表达式只被IE支持。

9. 将CSS和JS放到外部文件中

目的是缓存文件，可以参考原则4。 但有时候为了减少请求，也会直接写到页面里，需根据PV和IP的比例权衡。

10. 权衡DNS查找次数

减少主机名可以节省响应时间。但同时，需要注意，减少主机会减少页面中并行下载的数量。

IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。

下面是新浪微博的图片域名，我们可以看到他有多个域名，这样可以保证这些不同域名能够同时去下载图片，而不用排队。不过如果当使用的域名过多时，响应时间就会慢，因为不用响应域名时间不一致。

11. 精简CSS和JS

这里就涉及到css和js的压缩了。比如下面的新浪的一个css文件，把空格回车全部去掉，减少文件的大小。现在的压缩工具有很多，基本主流的前端构建工具都能进行css和js文件的压缩，如grunt，glup等。

12. 避免跳转

有种现象会比较坑爹，看起来没什么差别，其实多次了一次页面跳转。比如当URL本该有斜杠（/）却被忽略掉时。例如，当我们要访问 http:// baidu.com 时，实际上返回的是一个包含301代码的跳转，它指向的是 http:// baidu.com/ （注意末尾的斜杠）。在nginx服务器可以使用rewrite；Apache服务器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash来避免。

另一种是不用域名之间的跳转， 比如访问 http:// baidu.com/bbs 跳转到 http:// bbs.baidu.com/ 。那么可以通过使用Alias或者mod_rewirte建立CNAME（保存一个域名和另外一个域名之间关系的DNS记录）来替代。

13. 删除重复的JS和CSS

重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题。

14. 配置ETags

它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性，例如某个文件在1秒内修改了10次，Etag可以综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用，可取后两个参数。使用ETags减少Web应用带宽和负载

15. 可缓存的AJAX

异步请求同样的造成用户等待，所以使用ajax请求时，要主动告诉浏览器如果该请求有缓存就去请求缓存内容。如下代码片段, cache:true就是显式的要求如果当前请求有缓存的话，直接使用缓存

$.ajax({      url : 'url',      dataType : "json",      cache: true,      success : function(son, status){                  }

16. 使用GET来完成AJAX请求

当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此使用GET获取数据时更加有意义。

17. 减少DOM元素数量

这是一门大学问，这里可以引申出一堆优化的细节。想要具体研究的可以看后面推荐书籍。总之大原则减少DOM数量，就会减少浏览器的解析负担。

18. 避免404

比如外链的css、js文件出现问题返回404时，会破坏浏览器的并行加载。

19. 减少Cookie的大小

Cookie里面别塞那么多东西，因为每个请求都得带着他跑。

20. 使用无cookie的域

比如CSS、js、图片等，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名的影响。

21. 不要使用滤镜

IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支，因此它的问题是多方面的。

完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替，这种格式能在IE中很好地工作。如果你确实需要使用AlphaImageLoader，请使用下划线_filter又使之对IE7以上版本的用户无效。

22. 不要在HTML中缩放图片

比如你需要的图片尺寸是50* 50

那就不用用一张500*500的大尺寸图片，影响加载

23. 缩小favicon.ico并缓存

三、常见的前端性能优化手段都有哪些？都有多大收益

规则01：尽量减少HTTP请求

前端优化的黄金准则指导着前端页面的优化策略：只有10%-20%的最终用户响应时间花在接受请求的HTML文档上，剩下的80%-90%时间花在为HTML文档所引用的所有组件（图片、脚本、样式表等）进行的HTTP请求上。因此，改善响应时间的最简单途径就是减少组件的数量，并由此减少HTTP请求的数量。当然很多人就会说，既然这样，那我们就减少页面组件的数量不就OK了吗？那你试试，你会掀起一场性能优化和产品设计之间的大PK。

所以，我们要减少HTTP请求是要平衡性能和设计的。如果找到这个平衡点呢？书中从以下几个方面做了介绍，我逐一说明：

① 图片地图

初看“图片地图”四个字，对非专业的前端人员来说一头雾水，我的第一印象就是这样的，咱们以京东的移动站点为例，右侧用户和购物车的图标，正常实现我会选择如下方式：

<a href=”用户跳转页面URL”>

<div class=”定义用户icon显示的样式表”></div>

</a>

<a href=”购物车跳转页面URL”>

<div class=” 定义用户icon显示的样式表”></div>

</a>

这种方式无可厚非的，但是两张图片就有两个HTTP请求，这明显是增加了页面中的HTTP请求。那么我们可以把这两个HTTP请求变成一个吗？

答案当然是可以的，这就是图片地图：允许在一张图片上关联多个URL，而目标URL的选择取决于用户单击了图片上的哪个位置。

这样上面京东两个图标合并成一张图片，这样图片的HTTP请求就减少了一个。

示例代码如下：

<img src=合并后的图片>

<map name=”map1”>

<areashape=”rect” coords=”0,0,40,40” href=”用户跳转页面URL”>

<areashape=”rect” coords=”50,0,90,40” href=”购物车跳转页面URL”>

</map>

不过图片地图只支持矩形形状，其他形状不支持。

② 请CSS喝“雪碧”（CSS Sprites）CSS Sprites一句话：将多个图片合并到一张单独的图片，这样就大大减少了页面中图片的HTTP请求。

③ 内联图片和脚本使用data:URL（Base64编码）模式直接将图片包含在Web页面中而无需进行HTTP请求。但是此种方法存在明显缺陷：- 不受IE的欢迎；- 图片太大不宜采用这种方式，因为Base64编码之后会增加图片大小，这样页面整体的下载量会变大；- 内联图片在页面跳转的时候不会被缓存。（大图片可以使用浏览器的本地缓存，在首次访问的时候保存到浏览器缓存中，典型的是HTML5的manifest缓存机制以及LocalStorage等）。

④ 样式表的合并将页面样式定义、脚本、页面本身代码严格区分开，但是样式表、脚本也不是分割越细越好，因为没多引用一个样式表就增加一次HTPP请求，能合并的样式表尽量合并。一个网站有一个公用样式表定义，每个页面只要有一个样式表就OK啦。

通过以上四个努力之后，你会发现你的网页响应时间最多能减少一半，这不是作者说大话，也不是我狂吹，我亲手用我的移动网站首页做了一个尝试，本地测试之后响应时间能减少40%左右。所以减少页面HTTP请求数量，是一个很重要的原则。遵循此原则可以同时改善首次访问和后续访问的响应时间，而每一个网站的首次响应时间会决定用户之后还来不来的重要原因。

规则02：使用内容发布网络（CDN的使用）

什么叫内容发布网络（CDN）？它是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。主要用于发布页面静态资源：图片、css文件、js文件等。如此，能轻易地提高响应速度。关于CDN的具体详细原理以及优缺点，各位可以自行询问度娘或者google。

规则03：添加Expires头

浏览器使用缓存来减少HTTP请求的数据，并减小HTTP响应的大小，使页面加载更快。Web服务器使用Expires头来告诉浏览器它可以使用一个组件的当前副本，直到指定的deadline为止。HTTP规范中称此头为：在这一时间之后响应被认为失效。个人对这块表示不想使用，其实就是一句话，把一些css、js、图片在首次访问的时候全部缓存到浏览器本地，从我做移动网站的过程中发现，其实没有这么复杂，完全可以使用HTML5提供的本地缓存机制就OK了。关于HTML5本地缓存机制，各位可以查阅相关资料。后续我也会对HTML5的缓存机制进行介绍的。

规则04：压缩组件（使用Gzip方式）

书中关于压缩从gzip压缩方式到如何压缩讲了很多，我想直接跳过，对于做PC网站或者移动网站来说，急需要压缩的是css文件和js文件，至于如何压缩，网上有很多在线工具，去挑选一个自己用的顺手看的顺眼的就好，当然也有人选择对HTML进行压缩，这样也可以。但是实际工作中我没有这么做。之所谓没有这么做，是因为我觉得很麻烦。不要鄙视我，毕竟我不是一个真正意义上的前端工程师，哈哈！

规则05：将CSS样式表放在顶部

如果将css样式定义放在页面中或者页面底部，会出现短暂白屏或者某一区域短暂白板的情况，这和浏览器的运营机制有关的，不管页面如何加载，页面都是逐步呈现的。所以在每做一个页面的时候，用Link标签把每一个样式表定义放在head中。

规则06：将javascript脚本放在底部

浏览器在加载css文件时，页面逐步呈现会被阻止，直到所有css文件加载完毕，所以要把css文件的引用放到head中去，这样在加载css文件时不会组织页面的呈现。但是对于js文件，在使用的时候，它下面所有也页面内容的呈现都会被阻塞，将脚本放在页面越靠下的地方，就意味着越多的内容能够逐步呈现。

规则07：避免使用CSS表达式

CSS表达式是动态玩CSS的一种很强大的方式，但是强大的同时也存在很高的危险性。因为css表达式的频繁求值会导致css表达式性能低下。如果真想玩css表达式，可以选用只求值一次的表达式或者使用事件处理来改变css的值。

规则08：使用外部javascript和CSS内联js和css其实比外部文件有更快的响应速度，那为什么还要用外部呢？因为使用外部的js和css可以让浏览器缓存他们，这样不仅HTML文档大小减少，而且不会增加HTTP请求数量。另外，使用外部js和css可以提高组件的可复用性。

规则09：减少DNS查询

DNS查询有时间开销，通常一个浏览器查找一个给定主机名的IP地址需要20-120ms。缓存DNS：缓存DNS查询可以很好地提高网页性能，一旦缓存了DNS查询，之后对于相同主机名的请求就无需进行再次的DNS查找，至少短时间内不需要。所以在使用页面中URL、图片、js文件、css文件等时，不要使用过多不同的主机名。

规则10：精简javascript

如何精简？

其实W3Cfuns已经给大家准备好精简JS所需的所有工具“前端神器”，这点W3Cfuns为大家做的很不错，在这个规则里我们就用到“JS压缩/混淆/美化工具”

最初始的精简方式：就是移除不必要的字符减小js文件大小，改善加载时间。包括所有的注释、不必要的空白字符。

高级一点的精简方式就是：混淆。

它不但会移除不必要的字符，还会改写代码，比如函数和变量的名字会被改成很短的字符串，这样使js代码更简练更难阅读。

但是我一般很少使用混淆，一个现在互联网时代，代码没有必要整的那么神秘，大可以大家一起share，天下代码一起抄，只要抄出自己的特色就ok了。

而且一旦使用混淆，对于js代码的维护和调试都很复杂，因为有时候混淆之后的js代码完全看不懂。其实实际开发过程中，从文件大小和代码可复用性来说，不仅仅是js代码需要精简，css代码一样也很需要精简。

规则11：避免重定向

重定向的英文是Redirect，用于将用户从一个URL重新跳转到另一个URL。

最常见的Redirect就是301和302两种。

关于重定向的性能影响这里就不说了，自行查阅相关资料吧。

在我们实际开发中避免重定向最简单也最容易被忽视的一个问题就是，设置URL的时候，最后的“/”，有些人有时候会忽略，其实你少了“/”，这时候的URL就被重定向了，所以在给页面链接加URL的时候切记最后的“/”不可丢。

规则12：删除重复脚本

重复的js代码除了有不必要的HTTP请求之外，还会浪费执行js的时间。

将你使用的js代码模块化，可以很好地避免这个问题，至于js模块化如何实现，现在有很多可以使用的开源框架，我用的比较多的是我们公司玉伯的Sea.js。

规则13：配置ETag

Etag（Entity Tag），实体标签，是Web服务器和浏览器用户确认缓存组件的有效性的一种机制。写的很复杂，对我这种非专业的前端开发人员来说，有点过了，关于这个原则有兴趣的自己看吧。

规则14：使Ajax可缓存

针对页面中主动的Ajax请求返回的数据要缓存到本地，当然这个是针对短期内不会变化的数据。如果不确定数据变化周期的话，可以增加一个修改标识的判断，我正常处理过程中会给一些Ajax请求返回的数据增加一个MD5值的判断，每次请求会判断当前MD5是否变化，如果变化了取最新的数据，如果不变化，则不变。

四、APP常见加载方式

本文仅供个人学习，转自IT修真院。

一、加载

      用户在客户端发出一个指令后，直到客户端出现反馈结果时，这段时间内计算机完成的一系列执行动作，可能包括有客户端发出请求，服务器做出响应，客户端拿到数据后计算，渲染等。

二、加载方式

1、启动页加载

      这个主要是APP启动时的一个页面，由于APP启动需要时间，因此可以加入一个启动页来自然过渡，而且很多启动页是广告，这样也可以带来一些收益，这个页面一般可以点击跳过。

2、界面跳转加载

      这个加载模式又可分为当前页加载和跳转下个页面加载。当前页加载一般是帐号登录的时候使用的，跳转页面加载一般用于新闻类APP，点击新闻标题后跳转至内容页面。

3、白屏加载

      这个加载方式其实很多地方都用到了，只是平常没有刻意关注它，在使用QQ或者微信时，如果别人发了一个链接过来，然后去点击链接，当时周围的网络信号又不太好的话，就会看到这种加载模式的完整过程。一般顶部会有进度条，出结果就是整个页面加载出来，加载失败的话则页面为空。

4、分步加载

      顾名思义，就是分步骤的加载网页，优先加载占网络资源较小的元素。如先文字和默认图标后图片，图片加载完成前使用占位符显示；当加载的页面内容有固定的框架时，可以先加载框架，再加载框架内的内容。这个方式可以减少用户等待内容时间，即使网络不太好，也可以先把文字等数据量较小的先显示出来，可以让用户提前看到一些内容。

      类似的还有懒加载与预先加载，都可以算作是分步加载。

      懒加载主要是针对前端页面比较大而设计出来的一种方式，假如一个网页很大，又含有很多图片、视频内容，那么想一次性加载就会等待很久，懒加载就是只有在屏幕显示范围内的资源，被用户看到的内容才会真正去加载。

       预加载就是提前加载，比如启动APP时，当显示启动画面时，就可以预先把首页内容加载出来，这样可以减少用户加载内容时的等待时间，还有一个很典型的使用场景就是浏览视频网站或者购物网站，当我们快要滑到页面底部时，下面图片已经几乎加载完成了，这就是预加载的好处，在使用上感觉更加流畅。

5、智能加载

      这个加载模式我经常使用到，假如是在WIFI情况下，使用QQ浏览器去看视频，那么它会自动加载视频播放，而使用4G的流量去访问视频页面的话，会有一个弹窗来确认是否要播放，以免耗费大量流量造成用户扣费。智能加载模式就是根据用户使用场景来改变加载形式的。

6、缓存加载

      就是用户在没有网络的情况下，依靠缓存数据来加载内容，可以在断网的情况下显示数据，不会因为断网APP就啥也不显示了。而且由于有缓存数据，还可以提高正常模式下的加载速度，缺点就是会占用用户本地存储空间，设计时需要考虑好限制条件。

7、全页面加载

      将整个页面一起加载。这一过程用户不需要了解，不需要等待，在正常情况下体验是非常棒的。

8、占位色块加载

      在页面即将出现的位置加载占位色块，等到数据加载完成后将数据陆续填进色块（给用户加载很快的感觉，体验会比全页面加载流畅）。让等待时间变得更加有趣，保持用户感受的连续性。

9、进度条加载

      可以清楚的看到当前进度，反馈十分明确。反馈明确，清晰易懂缺点：页面无内容，美观度较低。

10、混合加载模式

      为了能让产品有一个流畅的体验，很多app会根据产品的各种不同场景来组合使用不同加载方式。根据不同场景来设计，体验升级缺点：需要对各场景制定对应的加载规范，保证交互一致性。

11、后台加载

       用户在操作后，客户端立刻反馈操作成功，然后把请求放到后台与服务器交互。这一过程用户不需要了解，不需要等待，在正常情况下体验是非常棒的。

12、渐进加载

      在 PC 端用浏览器看图片的时候，经常是先看到一张模糊图，然后再渐渐的变得清晰，这种效果就叫做渐进式加载。

三、加载遇到的问题

      有些加载过程的时间可能会比较长，甚至用户不知道此时应用是卡死了还是在执行命令，这样就会导致用户体验降低，用户会对应用失去耐心。

原文链接：https://blog.csdn.net/jnshu_it/article/details/89282461

以上就是关于前端减少页面加载时间的方法相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。

推荐阅读：

客户端前端后端工作的关系（客户端前端后端工作的关系是）

前端培训的机构（前端培训的机构推荐）

千锋教育前端学费多少（学前端去哪个培训机构）

杭州华三科技（杭州华三科技招聘信息）

杭州最大的副食品市场在哪（杭州最大的副食品市场在哪个位置）