前端页面性能优化的几种方式

先说一下整体思想,
使用缓存:DOM缓存,浏览器缓存,请求缓存
减少请求:少请求就意味着变化少
加载要考虑有限顺序:重要的先加载,不重要的后加载

以下就是我对这些的阐述,没有分类,想到什么就写了什么,不是很完整,欢迎补充

一、资源合并,减少JS的请求加载次数
二、将CSS放在请求的最上面,将JS请求放在HTML最下面
这样可以让用户在最短的时间内看到画面,也避免了JS中操作DOM元素,导致页面重排。
为了尽量早的执行js,可以使用DomContentLoader
三、操作DO买的时候,尽量利用缓存(先查在操作),避免查一次操作一次。对于频繁的操作的Dom,可以合并到一起操作,比如使用createDocumentFrafment
四、为了避免堵塞加载,可以提前规定图片的大小。也可以同时使用懒加载,当前了能用iconfont代替的,尽量使用iconfont代替
五、能利用浏览器缓存的也要利用浏览器的缓存(session,localStorage,sessionStorage)
六、使用节流防抖操作
七、加载资源的时候使用CDN
八、通过 DNS 预解析来告诉浏览器未来我们可能从某个特定的 URL 获取资源,当浏览器真正使用到该域中的某个资源时就可以尽快地完成 DNS 解析。

 <meta http-equiv="x-dns-prefetch-control" content="on">

九、开启预解析。我们现代浏览器是默认开始预加载的,针对其他浏览器,我们还是可以做一点优化的。比如chrome和Firefox默认的可以预加载a标签链接的网页的资源,有些浏览器就不行,特别是https的网页,我们只要设置meta就能实现a标签的预加载。

<meta http-equiv="x-dns-prefetch-control" content="on">
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值