搜索
您的当前位置:首页正文

网站前端性能优化

2023-11-28 来源:莱芜美食

继前面几篇文章后再来说说老生常谈的话题,怎么样提升前端性能。文中很多取材自网络及《High Performance Web Sites》,并根据自己工作中所接触到的知识整理而成。

http://hovertree.com/menu/webfront/

1. 减少HTTP请求

终端用户响应时间80%消耗在前端,而大部分时间都是在下载页面的资源:图片,脚本,flash等等,减少请求资源简化页面设计成为了性能提升的关键。尽量合并CSS、JS及图片文件,减少HTTP请求。

2. 使用内容分发机制

使用内容分发如CDN加速,使用户从离自己最近的服务器下载文件。但一般要求减少DNS查询次数,如同一个页面的请求资源尽量少的使用不同的主机名,可以减少网站并行下载的数量。但很多网站为了加速下载资源特意用了多个主机名,这样可以并行下载资源。在低版本的浏览器IE6,7中并行连接数为4个,高版本的IE8及以上以及现在较新版的chrome,firefox等浏览器都是6个。一般CSS,JS及图片资源均通过CDN加速,并且使用多个主机名来实现并行下载。

3. 设置header的过期时间,使内容可以缓存

这个规则可以从两个方面来看:

对于静态组件,实现“永不过期”的政策,通过设置一个较长时间的Expires头,例如图片,flash;

对于动态组件:使用适当的Cache-Control头来处理不同的请求,如CSS,JS等。

对于第一次访问网站的用户来说,图片资源等都是固定不变的,设置为永不过期的Expires头可以在客户端缓存,减少服务端的负载以及请求数量,而JS,CSS资源可以设置一个适当的过期时间。

但是实际上我们会遇到一个挑战:如果版本更新导致原来的CSS或JS有改动,如何确保终端用户是下载的最新的资源文件呢?

最最常用的一种方法,就是每次有改动时生成一个tag然后加在文件名称中,如果有修改文件名就会不一致,客户端就会强制获取最新的资源文件,amazon,google等都是这么处理的;当然还有一种办法就是在资源文件目录上打上tag,但是有一种弊端就是对于没有更改的文件客户端也会重新下载对应的资源,如果对于发布较为频繁的web项目,用户在首次访问时就比较耗性能。

4. 使用Gzip压缩内容

服务端可以把不只是html还有JS,CSS,XML等一切文本的响应都进行压缩,减小传输的大小

5. 样式放在页头

用户在打开一个页面时,浏览器会逐步的加载头部,导航栏及logo等,在加载过程中用户能看到页面的反馈,提升了用户体验。如果样式放在页脚,带来的问题是,包括在IE的很多浏览器上禁止逐步呈现,他们会阻止渲染,避免页面样式变化而引起重绘页面元素,用户就只能看到一个空白页。

6. JavaScript放在页脚

相对于CSS而言,JS提倡放在页脚加载避免阻碍其他资源的并行下载,对于内容性质的网站,将内容的HTML放在相对靠前的位置,而对于交互较多的网页,需要把特别重要的核心组件的JS剥离往前放,而不太重要的则在最后加载。更详细的关于Javascript的加载请查看上一篇文章:《从两个bug来看网页内容的装载》

7. 避免使用CSS表达式

CSS表达式计算会非常频繁,不仅仅是在渲染和resize时会执行,滚动页面甚至移动鼠标都会重新计算。

8. 外部引用JavaScript和CSS

如果通过引用外部JavaScript和CSS的形式,因为浏览器会缓存这些资源,下次访问时可以使得页面加载更快,而如果将它们写在HTML中每次访问页面时都会再次加载。

9. 减少DNS查询

这点与第2点有相似之处,需要做的就是在减少DNS查询次数与并发下载之间做好平衡。

10. 精简JavaScript和CSS

删除JS和CSS中的空白换行,注释等,使用混淆把JS中的长变量换成短变量,可以缩小他们的体积,减少请求数据所占用的网络带宽.

11. 避免重定向

除了在header中人为的重定向之外,网页重定向常在不经意间发生,被重定向的内容将不会使用浏览器的缓存。比如用户在访问www.xxx.com,服务器会通过301转向到www.xxx.com/,在后面加了一个“/”。如果服务器的配置不好,这也会给服务器带来额外的负担。通过配置apache的 alias或使用mod_rewrite模块等方法,可以避免不必要的重定向,而在ngingx中也可以直接配置rewrite规则。

12. 删除重复的脚本

在页面中重复的脚本会增加性能压力,美国20%的热门网站中都包含有重复的脚本,团队规模和脚本数量增加了出现重复脚本的几率。在IE中,包含重复的JS脚本会导致浏览器的缓存不被使用,同时增加不必要的请求(仅在IE,FF下不会出现重复的请求)和重复的脚本执行(在IE和FF下都会重复执行)。

13. 配置ETags

ETag是一种服务器和浏览器用于识别请求的浏览器已缓存的资源是否与服务端匹配的机制,比last-modified更灵活,能更加精确的知道文件是否被修改过,因为If-Modified-Since只能检查秒级的修改,而ETag是一个唯一的字符串,不会受到修改时间的限制。

顺便说说浏览器访问URL时的工作机制:

a. 第一次访问url时,用户从服务器段获取页面内容,并把相关的文件(images,css,js…)放在高速缓存中,也会把文件头中的expired time,last modified, ETags等相关信息也一同保留下来。

b. 用户重复访问url时,浏览器首先看高速缓存中是否有本站同名的文件,如果有,则检查文件的过期时间;如果尚未过期,则直接从缓存中读取文件,不再访问服务器。

c. 如果缓存中文件的过期时间不存在或已超出,则浏览器会访问服务器获取文件的头信息,检查last modifed或ETags等信息,如果发现本地缓存中的文件在上次访问后没被修改,则使用本地缓存中的文件;如果修改过,则从服务器上获取最新版本。

14. 使Ajax可缓存

Ajax如果使用POST请求的话,浏览器通常会假定用户是提交数据给服务端的,所以自然不会缓存,因为有数据提交就意味着服务端要所处理,而get形式的Ajax请求却可以缓存,如果对安全性没有特别高要求的可以使用get形式的Ajax请求。

15. 减少DOM节点,加速页面渲染

16. 避免404错误

17. 减少Cookie的大小,静态资源使用无cookie的域,客户端请求它们的时候,减少 Cookie 的反复传输对主域名的影响。Yahoo!使用yimg.com,YouTube使用ytimg.com.Amazon使用images-amazon.com

18. 避免频繁操作DOM节点,过多的操作还可能导致浏览器死机,据说之前twitter就因为在windows.scroll事件的操作中绑定了过多的dom操作而导致浏览器死机

19. 用LINK而不用@import方式导入样式

20. 给图片加上正确的宽高值,以减少页面重绘,同时可以防止图片缩放

21. 缩小favicon.ico并缓存,很多时候开发者都会忽略这个文件,但是每当有用户收藏网站/网页时,浏览器会自动请求这个文件,就算这个图标文件没有在你的网页中明显说明,浏览器也会请求,如果不添加就会出现404.

使用工具:

目前有一些工具可以用来做性能分析,并依据以上法则给出优化建议,值得我们使用,常见的工具如下:

Yslow: 雅虎针对前端网站优化提出了23条准则,同时开发了网页性能分析浏览器插件;

PageSpeed:是google推出的性能分析工具

dynaTrace: 是基于IE的分析工具

推荐:http://www.cnblogs.com/roucheng/p/texiao.html

小编还为您整理了以下内容,可能对您也有帮助:

如何评价 Web 性能优化的重要性?

Web 性能优化的重要性在于,随着网站和应用程序的功能变得越来越丰富,他们对网络和设备资源的要求也越来越高,而我们现在很难在各种网络条件和设备上实现高水平的性能。性能不佳的网站会显示和响应输入速度缓慢,增加用户放弃访问的概率。

Web 性能优化包括负载均衡、分布式、CDN、缓存等多个方面。前端性能优化主要是尽量减少前端HTTP请求,合并脚本文件和CSS文件等。前端的性能优化是个综合性问题,涉及到前端开发的方方面面。

网络性能对无障碍、用户体验和你的商业目标很重要。用户感知性能比你的网站有多快(以毫秒为单位)更重要的是你的用户认为你的网站有多快。这些感知受到实际页面加载时间、空闲、对用户互动的响应能力、滚动和其他动画的流畅度的影响。

总的来说,Web 性能优化对于提高用户体验、提升商业目标以及实现无障碍访问等方面都具有重要意义。

如何进行网站性能优化

一、前端优化

网站性能优化是一个很综合的话题,涉及到服务器的配置和网站前后端程序等各个方面,我只是从实际经历出发,分享一下自己所尝试过的网站性能优化方法。之所以在标题上挂一个web2.0,是因为本文更偏重于中小网站的性能优化,我所使用的系统也是典型web2.0的LAMP架构。

首先讲讲前端的优化,用户访问网页的等待时间,有80%是发生在浏览器前端,特别是页面和页面中各种元素(图片、CSS、Javascript、flash)的下载之上。因此在很多情况下,相对于把大量的时间花在艰苦而繁杂的程序改进上,前端的优化往往能起到事半功倍的作用。雅虎最近将内部使用的性能测试工具yslow向第三方公开,并发布了著名的网站性能优化的十三条规则,建议你下载并安装yslow,并作为测评网站优化效果的工具。下面我挑其中特别有价值的具体说明一下优化的方法:

对于第一次访问您网站,尚未在浏览器cache中缓存您网站内容的用户,我们可以做的事情包括:

1)减少一个页面访问所产生的elebrator(),还有收费的ZendPerformanceSuite

3)将静态内容和动态内容分开处理

apache是一个功能完善但比较庞大的webserver,它的资源占用基本上和同时运行的进程数呈正比,对服务器内存的消耗比较大,处理并行任务的效率也一般。在一些情况下,我们可以用比较轻量级的webserver来host静态的图片、样式表和javascript文件,这样可以大大提升静态文件的处理速度,还可以减少对内存占用。我使用的webserver是来自俄罗斯的nginx,其他选择方案还包括lig等知名网站应用中都得到了检验。

6)服务器运行状态的检测,找到影响性能的瓶颈所在

系统优化没有一劳永逸的方法,需要通过检测服务器的运行状态来及时发现影响性能的瓶颈,以及可能存在的潜在问题,因为网站的性能,永远取决于木桶中的短板。可以编写一些脚本来检测web服务的运行,也有一些开源的软件也提供了很好的功能

7)良好的扩展架构是稳定和性能的基础

一些技巧和窍门可以帮你度过眼前的难关,但要想使网站具备应付大规模访问的能力,则需要从系统架构上进行彻底的规划,好在很多前人无私的把他们架构

网站的经验分享给我们,使我们可以少走甚多弯路。我最近读到的两篇有启发的文章:

-从LiveJournal后台发展看大规模网站性能优化方法

-Myspace的六次重构

最后不得不提到程序编码和数据库结构对性能的影响,一系列糟糕的循环语句,一个不合理的查询语句、一张设计不佳的数据表或索引表,都足以会使应用程序运行的速度成倍的降低。培养全局思考的能力,养成良好的编程习惯,并对数据库运行机制有所了解,是提高编程质量的基础。

Web前端新手如何做好性能优化

今天小编要跟大家分享的文章是关于Web前端新手如何做好性能优化?影响用户访问的最大部分是前端的页面。网站的划分一般为二:前端和后台。我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等。而前端呢?其实应该是属于功能的表现。

而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的。

除了后台需要在性能上做优化外,其实前端的页面更需要在性能优化上下功夫,只有这样才能给我们的用户带来更好的用户体验。不仅仅如此,如果前端优化得好,他不仅可以为企业节约成本,他还能给用户带来更多的用户,因为增强的用户体验。说了这么多,那么我们应该如何对我们前端的页面进行性能优化呢?

前端性能优化的方法?

一、content方面

1,减少HTTP请求:合并文件、CSS精灵、inlineImage

2,减少DNS查询:DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法:DNS缓存、将资源分布到恰当数量的主机名,平衡并行下载和DNS查询

3,避免重定向:多余的中间访问

4,使Ajax可缓存

5,非必须组件延迟加载

6,未来所需组件预加载

7,减少DOM元素数量

8,将资源放到不同的域下:浏览器同时从一个域下载资源的数目有限,增加域可以提高并行下载量

9,减少iframe数量

10,不要404

二、Server方面

1,使用CDN

2,添加Expires或者Cache-Control响应头

3,对组件使用Gzip压缩

4,配置ETag

5,FlushBufferEarly

6,Ajax使用GET进行请求

7,避免空src的img标签

三、cookie方面

1,减小cookie大小

2,引入资源的域名不要包含cookie

四、CSS方面

1,将样式表放到页面顶部

2,不使用CSS表达式

3,使用不使用@import

4,不使用IE的Filter

五、JavaScript方面

1,将脚本放到页面底部

2,将javascript和css从外部引入

3,压缩javascript和css

4,删除不需要的脚本

5,减少DOM访问

6,合理设计事件、

六、图片方面

1,优化图片:根据实际颜色需要选择色深、压缩

2,优化css精灵

3,不要在HTML中拉伸图片

4,保证favicon.ico小并且可缓存

七、移动方面

1,保证组件小于25k

2,PackComponentsintoaMultipartDocument

以上就是小编今天为大家分享的关于Web前端新手如何做好性能优化的文章,希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助。想要了解

更多web前端知识记得关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利!

前端性能优化有哪些方法

前端性能优化的方法有:

一、减少http请求数

常用的减少http请求数有以下几种:

1、合并图片。当图片较多时,可以合并为一张大图,从而减少http请求数。经常变化的图片可能不太合适,变化相对稳定的就可以考虑。合并大图除了能减少http请求数外,还可以充分利用缓存来提升性能。

2、合并压缩css样式表和js脚本,他们的共同目的都是为了减少http连接数。

3、去掉不必要的请求。开发写代码或者系统升级之后残留的无效请求连接。

4、充分利用缓存。这里说的缓存是客户端侧缓存或者说浏览器缓存。Expires头信息是客户端侧缓存的重要依据,格式类似于Expires:sun ,20 Dec 2017 23:00:00 GMT。

如果当前时间小于Expires指定的时间,浏览器就会从缓存中直接获取相关的数据信息或html文件,如果当前时间大于Expires指定的时间,浏览器会向服务器发送请求来获取相关数据信息。

以Apache为例,可在Apache的配置文件httpd.conf中设置Expires。

二、图片优化

优化方法:

1、尽可能的使用PNG格式的图片,它相对来说体积较小。

2、对于不同格式的图片,在上线之前最好进行一定的优化。

3、图片的延迟加载,也叫做赖加载。

三、使用CDN

CDN即内容分发网络,可以使用户就近取得所需内容,解决网络拥挤的状况,提高用户访问网站的响应速度。

四、开启GZIP

GZIP即数据压缩,用于压缩使用Internet传输的所有文本资源。开启GZIP的方法很简单,到对应的web服务配置文件中设置一下即可。以Apache为例,在配置文件httpd.conf中添加。

五、样式表和JS文件的优化

一般我们会把css样式表文件放到文件的头部。比如,放到<head>标签中,这样可以让CSS样式表尽早地完成下载。对应js脚本文件,一般我们把他放到页面的尾部。

六、使用无cookie域名

无cookie域名的概念:当发送一个请求时,同时还要请求一张静态的图片和发送cookie时,服务器对于这些cookie不会做任何使用,也就是说这些cookie没什么用,没不要随请求一同发送。

莱芜美食还为您提供以下相关内容希望对您有帮助:

Web前端新手如何做好性能优化

前端性能优化的方法?一、content方面1,减少HTTP请求:合并文件、CSS精灵、inlineImage2,减少DNS查询:DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法:DNS缓存、将资源分布到恰当数量的主机名,平衡并行下载和DNS查...

前端性能优化有哪些方法

二、图片优化 优化方法:1、尽可能的使用PNG格式的图片,它相对来说体积较小。2、对于不同格式的图片,在上线之前最好进行一定的优化。3、图片的延迟加载,也叫做赖加载。三、使用CDN CDN即内容分发网络,可以使用户就近取...

企业网站前端性能优化怎么处理

网站性能优化中前端优化是非常重要的,我们需要知道的是用户在访问网页的等待的时间,有超过80%的时候都是在浏览器前端的,特别是网页和页面中的各种元素(图片、CSS、Javascript、flash)。所以在许多情况下,与其花费大量时间进...

如何对前端性能进行优化

前端性能进行优化都有哪些规则 减少HTTP请求次数 尽量合并图片、CSS、JS。比如加载一个页面有5个css文件的话,把这个5个文件合成一个的话,就只需要发出一次http请求,节省网络请求时间,加快页面的加载。2. 使用CDN 网站上...

如何进行前端优化

(2). CSS 选择器优先级 22. 使用 flexbox 而不是较早的布局模型 23. 使用 transform 和 opacity 属性更改来实现动画 24. 合理使用规则,避免过度优化 性能优化主要分为两类:加载时优化 运行时优化 ...

常用的前端性能优化方法有哪些?

第一:面向内容的优化 1. 减少 HTTP 请求 2. 减少 DNS 查找 3. 避免重定向 4. 使用 Ajax 缓存 5. 延迟载入组件 6. 预先载入组件 7. 减少 DOM 元素数量 8. 切分组件到多个域 9. 最小化 iframe 的数量 10. ...

你有用过哪些前端性能优化的方法?

我来简单说下几个方面:1.减少http请求:在YUI35规则中也有提到,主要是优化js、css和图片资源三个方面,因为html是没有办法避免的。因此,我们可以做一下的几项操作:合并js文件 合并css文件 雪碧图的使用(css sprite)使...

Web前端性能优化的实用技巧汇总

1.循环中减少属性查找并反转(可以提升50%-60%的性能)//for循环for(vari=item.length;i--){_process(item[i]);}//while循环varj=item.length;while(j--){_process(item[i]);}2.使用Duff装置来优化循环(该方法在后面的文章...

前端性能优化总结(一)-js、css优化

输入搜索时,可以用防抖debounce等优化方式,减少http请求;这里以滚动条事件举例:防抖函数 onscroll 结束时触发一次,延迟执行 节流函数:只允许一个函数在N秒内执行一次。滚动条调用接口时,可以用节流throttle等优化方式,减少...

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

前端优化的途径有很多,按粒度大致可以分为两类,第一类是页面级别的优化,例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 ;第二类则是代码级别的优化,例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构...

Top