说一说你知道的那些前端性能优化

随着近几年前端的迅猛发展,人们越来越把目光放在了前端性能优化上。下面我们来谈谈我所知道的前端性能优化方式:

请看大图

了解每个优化的点,对我们的项目帮助是非常的巨大的,我将挑上面几点谈谈优化的过程。

1.页面常用优化

1-1.减少HTTP请求数

图片合并CSS Sprite、常用工具(webpack、gulp)打包将js、css合并到一个文件、行内图片(Base64编码)图片转化等等

svg转化网站 链接标题

webpack图片合并 链接标题

1-2.延迟加载js

js文件全部放body底部(常用)
另外一种是

setTimeout延时加载(常用)

defer和async(详情: 链接标题)

1-3.资源预加载

当你加载完当前页的资源的时候,你可以考虑加载待会你要用到的资源。比如Chrome首页会加载一个图片,但它当前页用不到,是为了搜索结果用的。又或者我们常见的一些网页步骤,在第一步交互的时候,把后面的步骤用到的资源先加载完。

1-4.按需加载

vue异步组件技术(详细:链接标题)

(原理: 链接标题

2.CSS优化

2-1.尽量减少标签选择器的使用

如: div {font-size: 14px;}

2-2.尽可能少用ID标签,多使用样式类选择器(可复用性强)

如: #id {font-size: 14px;}

2-3.尽量使用CSS3动画,CSS动画都开启了硬件加速

链接标题

3.JavaScript优化

3-1.加载资源优化

静态资源的压缩合并,如a.js、b.js、c.js通过一些工具合并成一个js文件

3-2.CDN加速

如:

总结:

前端性能优化是一个比较多且细的领域,深入了解每一个点对我们来说都是非常重要的,当前文章写的比较少,后续会不断的补充深入各种优化的场景。(敬请期待~)

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复