简单提一下前端性能优化有哪些(页面优化);

从页面的角度出发:

1、通过文件合并,css雪碧图,使用base64等方式减少HTTP请求数,避免过多的请求造成等待的情况;

2、通过DNS缓存等机制来减少DNS的查询次数;

3、通过设置缓存策略,对常用不变的资源进行缓存;

4、通过延迟加载的方式,来减少页面首屏加载时需要请求的资源,延迟加载的资源当用户需要访问时,再去请求加载;

5、通过用户行为,对某些资源使用预加载的方式,来提高用户需要访问资源时的响应速递;

在服务器方面:

1、使用CDN服务,来提高用户对于资源请求时的响应速度;

2、服务器端自用Gzip、Deflate等方式对于传输的资源进行压缩,减少传输文件的体积;

3、尽可能减小cookie的大小,并且通过将静态资源分配到其他域名瞎,来避免对静态资源请求时携带不必要的cookie;

二、提高前端性能的方法

要优化提升前端性能,有以下两大方法:

减少页面加载所需时间;

提升用户角度的观感体验(让用户觉得页面更快);

减少页面加载所需时间,可以从请求数量、请求并发度及网络传输时间等方面着手;提升用户观感,则主要从让页面尽快展示入手;下面一一介绍:

1、减少网络时间

浏览器从服务端获取HTML文档和资源都需要经历“DNS解析——建立连接——获取连接——断开连接”的过程;如果能减少DNS解析和文件在网络上传输的时间,性能自然能得到提升。

①使用DNS缓存技术

使用DNS缓存技术可以让用户获得更快的DNS解析时间,一般而言,由于浏览器本身就具有一定的DNS缓存机制,所以服务端的DNS缓存并不能带来太大的性能提升。

②减少需要传输的文件尺寸

在网络带宽有限的情况下,减少传输的文件尺寸可以提升很大的性能。常见的有将文件进行压缩的方法,除此之外,还有使用混淆等方法尽量减少JS文件和样式表的大小,从JS文件和

样式表中去除不需要使用的部分等,都可以起到减少需要传输文件尺寸的作用。

③加快文件传输速度

Internet网站的用户通常分布在一个较广阔的区域内,Internet本身的多层次网络结构导致从某一个节点到另一些节点之间的可用带宽和网络传输速度都比较慢;这种情况下使用CDN技术,

让用户尽可能访问到对用户节点而言更快速的服务器就可以加快文件传输速度。

国内而言,移动联通电信三大运营商之间并没有建立良好的互联互通,通常需在三个服务商所在网络中设置GDN服务器;另外,出于地域原因,建立CDN也是种常见的方法。

CDN(Content Delivery Network):内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。

2、减少发送的请求数量

在短连接情况下,每个请求都需要经过“建立连接——发送数据——断开连接”的过程,因此减少请求数量可带来显著的性能提升;即使使用持久连接方式,由于浏览器与每个服务器之间的

建立的持久连接数量是有限的,减少必须的请求也可以带来性能提升。

①利用浏览器缓存

为了充分利用浏览器缓存,需要在服务端保证每个可以被缓存的资源在被服务端返回时附带合适的expries头信息;此外,为了保证有尽可能多的内容可以被缓存,也要求网站尽可能将页面

中较少改变的部分提取出来。

保证服务端返回资源的响应头带有Expires信息,使得资源可以被缓存;

用引用方式引用样式表和JS脚本。如果使用内嵌的样式表和JS脚本,每次HTML文档的变化都会导致样式表和JS脚本重新加载,无法充分利用缓存;当然,在没有缓存或样式表与JS脚本

经常变动的情况下,引用方式使用样式表和JS脚本反而会导致更多的http请求;

使用更多的URI可以被缓存。

②使用合并的图片文件

当页面包含很多个小图片文件时,可以考虑将小图片文件合并为一个大的图片文件,在页面使用CSS Sprites技术将大图片显示为分隔开的小图片,在没有缓存的情况下,将许多小图片合并为

大图片文件可以大量减少http请求数。

3、提高浏览器下载的并发度

①JS文件放在HTML文档最后

在某些浏览器上,JS文件的下载和执行会阻止其他页面资源文件的下载和执行,之道JS文件下载和执行完,其他资源文件才可以开始下载和执行,因此,将JS文件放在HTML文档最后可以保证

JS文件不会阻止任何其他元素的下载。

②使用多个域名

浏览器对服务器的连接限制是基于域名的。比如S服务器有2个域名a.com和b.com,在浏览器限制最多与同一个域名建立2个连接时,浏览器实际上可以与服务器S建立4个连接;

一般大型网站都拥有几个域名,根据文件类型(静态资源、动态资源、JS脚本等)选择合适的服务器进行部署,也是个很好的做法。

4、让页面尽早开始显示

将样式表的引用放在HTML文档的开头(如放在<Head>标签中),这样可以使样式表在一开始就被下载下来,一旦样式表下载完成,浏览器就可以使用样式表中定义的样式开始在屏幕上

显示页面元素;另外,也避免了新样式表可能带来的屏幕显示的重绘。

将JS的引用放在HTML文档的最后,这样JS文件的下载和执行会在所有页面都下载完成后,不会阻止其他页面元素的显示。从用户感官上说,JS文件的下载和执行时间完全不会被用户感觉到。

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值