性能优化

1.图片优化
1)大小优化:通过减少像素点和每个像素点能够显示的颜色缩小图片大小
2)加载优化:用CSS代替修饰类的图片,用CDN加载图片,计算出适配屏幕的宽度去请求相应剪裁好的图片而不是直接使用原图浪费宽带,小图用base64,使用精灵图,选择正确的图片格式,比如小图使用png,图标尽量使用svg代替,照片使用jpeg

2.DNS预解析
DNS解析也是需要时间的,可以通过预解析的方式先获得域名对用的ip:

<link rel="dns-prefetch" href="//blog.poetries.top"> 

3.节流
节流是将多次执行的函数,每隔一段时间再执行,比如滚动过程中并不希望一直发送请求而是希望隔一段时间再发送

4.防抖
防抖是多次触发事件,但在期望的事件内,执行函数只执行一次,比如点击一个按钮会发送一次请求,但不希望每次点击都会发送请求,而是希望当用户一段时间内没有再次点击的情况下再去发送请求

5.预加载
在开发中可能有些资源不需要马上用到,但希望尽早获取,就可以使用预加载,预加载其实就是强制浏览器请求资源,但是不会阻塞onload事件

<link rel="preload" href="http://blog.poetries.top"> 

预加载可以一定程度上降低首屏加载时间,因为可以将一些不影响首屏但重要的文件延后加载

6.预渲染

<link rel="prerender" href="http://blog.poetries.top">

可以通过预渲染将下载的⽂件预先在后台渲染,预渲染虽然可以提⾼⻚⾯的加载速度,但是要确保该⻚⾯⼤概率会被⽤户打开,不然就浪费资源去渲染了。

7.懒执行
就是将逻辑延迟到使用的时候在计算,可以用于首屏优化,对于某些耗时逻辑不需要再首屏就使用的,就可以使用懒执行,懒执行需要唤醒,一般可以通过定时器或者事件的调用来唤醒。

8.懒加载
懒加载就是将不关键的资源延后加载
原理是只加载自定义区域内需要加载的东西,自定义区域通常是可视区域,也可以是即将进入的可视区域,比如设置图片标签src属性为一张占位图,将真实的图片资源放入一个自定义属性中,当进入自定义区域的时候,就将自定义图片属性替换为src属性。这样图片就会去下载资源,实现图片懒加载。懒加载对其他资源也适用,比如到达可视区域才播放视频。

9.CDN
CDN内容分发网络,其的原理是尽可能的在各个地方服务节点缓存数据,用户向根服务器发送请求的时候,请求会被调度到最接近用户的服务节点,直接由这个服务节点快速响应,从而使用户可以更快的加载资源。

全部评论

相关推荐

点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
正在热议
更多
# 长得好看会提高面试通过率吗? #
3876次浏览 45人参与
# 离家近房租贵VS离家远但房租低,怎么选 #
16907次浏览 137人参与
# 米连集团26产品管培生项目 #
7288次浏览 226人参与
# 春招至今,你的战绩如何? #
15716次浏览 144人参与
# 你的实习产出是真实的还是包装的? #
3051次浏览 53人参与
# 沪漂/北漂你觉得哪个更苦? #
1553次浏览 41人参与
# MiniMax求职进展汇总 #
25142次浏览 321人参与
# HR最不可信的一句话是__ #
1091次浏览 32人参与
# AI面会问哪些问题? #
946次浏览 23人参与
# 你做过最难的笔试是哪家公司 #
1247次浏览 22人参与
# AI时代,哪个岗位还有“活路” #
2853次浏览 51人参与
# 不考虑薪资和职业,你最想做什么工作呢? #
152905次浏览 889人参与
# 军工所铁饭碗 vs 互联网高薪资,你会选谁 #
8021次浏览 43人参与
# XX请雇我工作 #
51155次浏览 171人参与
# 简历第一个项目做什么 #
32148次浏览 361人参与
# 简历中的项目经历要怎么写? #
311051次浏览 4265人参与
# 投格力的你,拿到offer了吗? #
178339次浏览 891人参与
# 你最满意的offer薪资是哪家公司? #
76981次浏览 375人参与
# 当下环境,你会继续卷互联网,还是看其他行业机会 #
187605次浏览 1123人参与
# AI时代,哪些岗位最容易被淘汰 #
64730次浏览 886人参与
# 如果重来一次你还会读研吗 #
230018次浏览 2011人参与
# 正在春招的你,也参与了去年秋招吗? #
364353次浏览 2642人参与
牛客网
牛客网在线编程
牛客网题解
牛客企业服务