美文网首页
前端如何优化?

前端如何优化?

作者: pomelo_西 | 来源:发表于2019-12-09 14:04 被阅读0次
1. 减少http请求
  1. css Sprites
  2. 行内图片(Base64编码)用data: URL模式来把图片嵌入页面。
2. 路由、组件按需加载
3. 模块部分加载: import throttle from 'lodash/throttle'
4. 图片预加载、懒加载
  1. 预加载是展示的时候,减少图片加载过程载入不好的体验
  2. 懒加载是图片不在当前可是区域展示,为了网络带宽以及提升首次加载速度而做的优化

预加载:

  • 用img标签与dom的background-image 来达到预加载的效果。在展示前就可以保证图片资源已经加载完成

懒加载:

  • 可视区加载: element.getBoundingClientReact
  • 纯粹的延时加载: setTimeout, setInterval
  • 条件加载: 触发某些时间才开始异步加载
5. 清楚不必要的cookie,保证cookie可能小
6. 尽量减少dom访问
7. 本地大图片上传cdn,减少png图片的使用

相关文章

  • 前端面试必问及加分点---性能优化篇

    如何进行网站性能优化 你有用过哪些前端性能优化的方法? 谈谈性能优化问题 代码层面的优化 前端性能优化最佳实践

  • 撩课-Web大前端每天5道面试题-Day25

    1.web前端开发,如何提高页面性能优化? 2.前端开发中,如何优化图像?图像格式的区别? 3.Vue的双向数据绑...

  • 撩课-Web大前端每天5道面试题-Day22

    1.web前端开发,如何提高页面性能优化? 2.前端开发中,如何优化图像?图像格式的区别? 3.Vue的双向数据绑...

  • 前端性能优化(中)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(上)...

  • 前端性能优化(下)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(中)...

  • 文摘-20170226

    前端 释义前端指南 性能优化腾讯HTTPS性能优化实践 vuevue早期源码学习系列之一:如何监听一个对象的变化 ...

  • 前端性能优化(上)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 为什么要进行前端性能...

  • 前端如何优化?

    1. 减少http请求 css Sprites 行内图片(Base64编码)用data: URL模式来把图片嵌入页...

  • 前端如何优化

    性能加载时的优化 第一点:减少HTTP请求   一个完整的 HTTP 请求需要经历 DNS 查找,TCP 握手,浏...

  • 前端如何做好网站性能优化

    随着前端技术的迅猛发展,网站前端性能优化的必要性也逐渐凸显出来。下面我们站在前端的角度上谈谈如何做好网站性能的优化...

网友评论

      本文标题:前端如何优化?

      本文链接:https://www.haomeiwen.com/subject/kfafwctx.html