Web前端性能优化的实用技巧分享

开发 前端 新闻
Web前端的优化是非常重要的,也是每一位Web前端开发工程师所重视的,毕竟Web前端性能优化的好与否是直接影响到用户体验的。用户体验的好与否是直接影响用户对网站的满意度的。Web前端性能优化的好的网站才能达到理想中的效益。

 Web前端的优化是非常重要的,也是每一位Web前端开发工程师所重视的,毕竟Web前端性能优化的好与否是直接影响到用户体验的。用户体验的好与否是直接影响用户对网站的满意度的。Web前端性能优化的好的网站才能达到理想中的效益。

[[270758]]

那么在Web前端性能优化的时候怎么做才比较好呢?Web前端性能优化有没有什么技巧呢,以下为大家推荐三个Web前端性能优化的实用技巧。

1、减少HTTP请求数:

(1)避免重定向:重定向就是说明需要客户端采取进一步操作才能完成请求,请求时间就会延长。所以输入URL时应使用最完整的、最直接的地址,比如输入www.baidu.com而不是baidu.com。

(2)使用缓存的机制:主要有数据库缓存、服务端缓存(反向代理和CDN缓存)、浏览器缓存。

2、图片懒加载

页面的图片非常的多,可以使用懒加载。只加载***屏的图片,当用户通过滚动访问后面的内容时再加载相应图片。方法是先用一张极小的占位图代替图片,占位图只下载一次,将原本图片的src存储在另一个属性中,判断当图片快进入可视区域就将路径赋值给src并下载图片进行展示。

3、代码的优化

(1)页面的结构:CSS放在HTML内容上部,JavaScript放在HTML内容下部。可以使用preload提前解析资源的DNS。由于浏览器是自上而下读取内容的,因此放置资源的位置会影响网站的访问速度。比如,如果将script标签放在HTML内容的前边,浏览器就会先调用JavaScript解释器对JS进行解析,完成之后才会渲染其余的HTML内容,对用户来说,能看到的是HTML的内容,所以(1)这么做会导致页面可用性的延迟。另外,CSS是对页面节点进行修饰的,如果CSSOM未构建之前就进行了布局,等到CSSOM构建出来,如果CSS修改了节点的布局,就会发生重排,需要重新计算布局并绘制。

(2)JavaScript优化:比如减少对DOM的操作,减少重排和重绘,减少作用域链查找,慎用eval函数等等。JS代码和(下面的)CSS的优化主要要求前端开发人员对页面渲染原理有清晰的了解、对基础知识的掌握和良好的编程习惯。

(3)CSS优化:比如减少使用通配符‘*’,提取公用样式增强可复用性,选择器准确可减少匹配时间,适度使用内联样式。

责任编辑:华轩 来源: 今日头条
相关推荐

2023-01-26 01:33:09

web性能优化

2022-05-11 12:15:50

scriptweb性能

2022-01-07 06:09:23

Web性能优化

2012-01-10 16:22:25

Web

2024-09-23 00:00:00

数据库场景Entity

2009-08-11 08:38:15

Linux服务器硬盘性能实用技巧

2017-02-05 17:33:59

前端优化Web性能

2009-12-09 17:33:22

PHP性能优化

2011-08-18 14:26:55

Web

2009-09-04 10:27:28

Linux实用技巧linux操作系统linux

2022-03-23 09:18:10

Git技巧Linux

2009-12-21 15:50:39

2009-05-20 16:17:39

Linux硬盘技巧

2022-03-02 11:13:50

Web前端开发

2010-10-08 15:44:17

vim

2010-01-14 18:00:07

VB.NET串行化对象

2023-09-05 08:00:00

开源GreptimeDB

2011-04-08 15:40:01

Oracle认证

2009-01-03 09:34:30

ASP.NET.NET性能优化

2024-05-17 08:52:43

SQL实用技巧行列转换
点赞
收藏

51CTO技术栈公众号