前端性能优化技巧：减少HTTP请求与理解Repaint与Reflow

190 浏览量更新于2024-08-28 收藏 194KB PDF 举报

"Web前端性能优化经验分享" 在前端开发中，性能优化是至关重要的，它直接影响着用户体验和网站的加载速度。本文将分享一些实用的Web前端性能优化策略。 1. 减少HTTP请求 HTTP请求是页面加载过程中耗时最多的部分。每次请求都需要建立连接、发送数据、等待响应以及接收数据。为了提高页面加载速度，应当尽量减少HTTP请求的数量。一种常见的方法是合并资源，例如将多个CSS文件合并成一个，多个JavaScript文件合并成一个，以及使用CSS Sprites技术整合图片，避免多次请求。对于图片较多的页面，还可以利用懒加载（lazyLoad）技术，只在用户滚动到相应位置时才加载图片。 2. 正确理解Repaint和Reflow Repaint和Reflow是浏览器渲染过程中的两个关键步骤。Repaint发生在元素外观改变但不影响布局时，如颜色、边框等改变；而Reflow则是在DOM结构变动，影响元素几何尺寸时发生，例如窗口大小调整、内容添加或删除。Reflow比Repaint更消耗性能，因为它可能引发整个渲染树的重新计算。为了避免频繁的Repaint和Reflow，可以采用以下策略：尽量减少对DOM的直接操作，避免在循环中修改样式，使用CSS3硬件加速属性，以及预先计算好元素尺寸。 3. 使用CDN(Content Delivery Network) CDN能够将静态资源分发到全球各地的服务器上，让用户从最近的节点获取资源，显著缩短加载时间。特别是对于大文件，如图片、视频和库文件，使用CDN能大大提高加载速度。 4. 延迟加载和异步加载对于非首屏内容，可以使用延迟加载（defer）或异步加载（async）来减少页面初始渲染的阻塞。这使得脚本不会阻碍HTML解析，提高页面初始化速度。 5. 压缩和最小化资源压缩CSS、JavaScript和HTML文件可以显著减少传输的数据量。同时，去除代码中的空格、注释和不必要的字符（最小化）也能进一步减小文件大小。 6. 利用缓存通过设置合适的HTTP头部信息，如Cache-Control和Expires，可以让浏览器缓存资源，避免每次访问都重复下载相同的内容。 7. 优化图片使用正确的图片格式（JPEG、PNG、SVG等）是必要的。对于背景图，可以考虑使用CSS精灵图，减少HTTP请求。对于图标，可使用图标字体或SVG。 8. 减少DNS查找时间过多的域名可能导致DNS查找时间增加，尽量合并资源到少数几个域名下，或者使用DNS预加载（DNS Prefetching）来提前解析域名。 9. 合理利用浏览器缓存通过设置HTTP缓存头，可以让浏览器在下次访问时直接从本地缓存读取资源，减少网络请求。 10. 避免阻塞渲染确保CSS文件尽早加载，避免将JavaScript放在`<head>`中导致阻塞HTML解析。将脚本放置在`<body>`底部可以改善这一点。通过以上这些优化措施，开发者可以显著提升Web应用的性能，提供更快的加载速度和更好的用户体验。在面试或实际工作中，理解并掌握这些技巧是非常有帮助的。

Web前端性能优化经验分享前端性能优化经验分享

最近一直有给新同学做前端方面的培训，也有去参与公司前端的招聘，所以把自己资料库里面很多高效且有用的知识

做了些规整分类，然后再分享一篇关于前端优化方面的总结。而且春节一过就又是招聘的高峰期了，在校的、跳槽

的、浮躁的都开始进入面试的大军，前端优化也是前端面试一般会问到的东西，所以希望能对朋友们有用。

1.请减少HTTP请求

基本原理：

在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其

的突出。

一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务

器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收

到来自服务器的应答信息后，对这些数据解释执行。

而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时，将会频繁的与服务器建立连接，与释放连接，

这必定会造成资源的浪费，且每个HTTP请求都会对服务器和浏览器产生性能负担。

网速相同的条件下，下载一个100KB的图片比下载两个50KB的图片要快。所以，请减少HTTP请求。

解决办法：

合并图片(css sprites)，合并CSS和JS文件;图片较多的页面也可以使用 lazyLoad 等技术进行优化。

2.请正确理解 Repaint 和 Reflow

注：Repaint 和 Reflow 也就是重绘和重排，请允许我在这卖弄下我有限认识的那么几个英语单词...囧

基本原理：

Repaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的情况下发生，如改变visibility、outline、背景色

等等。

Reflow(重排)就是DOM的变化影响到了元素的几何属性(宽和高)，浏览器会重新计算元素的几何属性，会使渲染树中受

到影响的部分失效，浏览器会验证DOM树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如：改变窗

囗大小、改变文字大小、内容的改变、浏览器窗口变化，style属性的改变等等。如果Reflow的过于频繁，CPU使用率

就会噌噌的往上涨，所以前端也就有必要知道 Repaint 和 Reflow的知识。

减少性能影响的办法：

上面提到通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow，所以最好通过设置class的方式;　有

动画效果的元素，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局;如果功能需求上不能设置

position为fixed或absolute，那么就权衡速度的平滑性。

总之，因为 Reflow 有时确实不可避免，所以只能尽可能限制Reflow的影响范围。

3.请减少对DOM的操作

基本原理：

对DOM操作的代价是高昂的，这在网页应用中的通常是一个性能瓶颈。

天生就慢。在《高性能JavaScript》中这么比喻：“把DOM看成一个岛屿，把JavaScript(ECMAScript)看成另一个岛

屿，两者之间以一座收费桥连接”。所以每次访问DOM都会教一个过桥费，而访问的次数越多，交的费用也就越多。所

以一般建议尽量减少过桥次数。

解决办法：

修改和访问DOM元素会造成页面的Repaint和Reflow，循环对DOM操作更是罪恶的行为。所以请合理的使用

JavaScript变量储存内容，考虑大量DOM元素中循环的性能开销，在循环结束时一次性写入。

减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。

注：在IE中:hover会降低响应速度。

4.使用JSON格式来进行数据交换

基本原理：

下载后可阅读完整内容，剩余7页未读，立即下载

weixin_38611796

粉丝: 8
资源: 943

前端性能优化技巧：减少HTTP请求与理解Repaint与Reflow

WEB前端工程师Web前端性能优化经验分享

让你页面速度飞起来 Web前端性能优化（视频教程+ppt）

前端 - 郭碧青《Web 前端性能优化思路与学习方法》.pdf

web前端开发后期会议记录

web前端开发会议记录

web前端设计基础叮叮书店

3年web前端开发，面试应该问什么问题，例举10个

web前端开发照相馆网站

现在整天curd，不知道前端如何深入

高级前端面试题 2023

最新资源