Work hard and live hard
Web > 网页前端加载优化(仅作记录)

网页前端加载优化(仅作记录)

2020-10-04 分类:Web 作者:Agoni 阅读(1019)

1. 减少http的接口请求,合理设置http缓存,主要是合并一些css,js文件,这样的话,浏览器只需要请求一次资源就行了;
2. 懒加载,这样不一定能减少 HTTP请求数量,但是却能在某些条件下或者页面刚加载时减少 HTTP请求数。对于图片而言,在页面刚加载的时候可以只加载第一屏,当用户继续往后滚屏的时候才加载后续的图片。这样一来,假如用户只对第一屏的内容感兴趣时,那剩余的图片请求就都节省了。
3. css放在页面最上面,js放在页面的最下面,浏览器会在下载完成全部CSS之后才对整个页面进行渲染,因此最好的做法是将CSS放在页面最上面,让浏览器尽快下载CSS。如果将 CSS放在其他地方比如 BODY中,则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了,这就导致页面由无 CSS状态跳转到 CSS状态,用户体验比较糟糕,所以可以考虑将CSS放在HEAD中。
4. 异步请求,将一些代码提出之后,慢慢加载,或者是通过事件点击加载等,这样就不会对页面形成首次加载的负担;
5. js的优化, 减少作用域的查找,

减少闭包的使用,也是方法之一;
6. 将字符串拼接(指使用"+"号拼接的代码)替换成join()方法;
7. 使用CDN加载资源;

参考:https://blog.csdn.net/lmb55/article/details/51106820?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param

「 有志者自有千计万计,无志者只感千难万难 」

赞(2) 打赏
2

谢谢,共同进步~

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

1 条评论关于"网页前端加载优化(仅作记录)"

  1. cs Windows NT Firefox 82.0

    测试

博客简介

loading......
姓名:张峰
性别:男
爱好:女
喜欢:旅游,煲剧,写书法,写博客,欢迎一起交流。。。。。。

精彩评论

站点统计

  • 文章总数: 35 篇
  • 草稿数目: 0 篇
  • 分类数目: 11 个
  • 独立页面: 1 个
  • 评论总数: 23 条
  • 链接总数: 4 个
  • 标签总数: 29 个
  • 访问总量: 8091541 次
  • 最近更新: 2022年11月29日
服务热线:
 1995****175

 QQ在线交流

 旺旺在线