专栏首页web前端记录web前端之性能优化
原创

web前端之性能优化

1、资源压缩合并,减少http请求

2、浏览器缓存(强缓存、协商缓存),vue中使用keep-alive

3、利用CDN

4、按需加载资源

5、非核心代码异步加载(defer,async)

6、懒加载(页面/组件/图片)

7、节流和防抖(渲染完成后的页面交互优化)

8、减少重排和重绘

9、SSR服务器端渲染(利于SEO优化)

10、图片优化(使用svg,雪碧图,小图片使用iconfont或是转base64)

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • web前端性能优化

    网站的划分一般为二:前端和后台。我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等。而前端呢?其实应该是属于功能的表现。并...

    lyb-geek
  • Web前端性能优化(二)

    懒加载 即延迟加载,在电商或是页面很长的业务场景中,我们通常会使用懒加载的方式对图片进行请求,只有在图片进入可视区域之后才请求图片资源,而在之前都通过一张占位图...

    Nian糕
  • Web前端性能优化(一)

    我们在开发的时候会习惯缩进和写注释,方便我们在日常的维护,但将代码上传至服务端后,我们完全可以把那些空格、制表符、换行符进行压缩,以此减少请求资源的大小;同样的...

    Nian糕
  • Web前端性能优化(三)

    因为HTTP请求无状态,当这一次 HTTP 请求结束之后,这个链接就关闭了,而下一次需要发起这个请求时,服务端不会知道这个请求是和之前某一个请求,来自同一个客户...

    Nian糕
  • Web 前端性能优化准则

    “只有10%-20%的最终用户响应时间花在接收请求的HTML文档上,剩下的80%-90%时间花在HTML文档所引用的所有组件(图片,script,css,fla...

    书童小二
  • Web 前端性能优化概要

    本文遵守创作共享CC BY-NC-SA 4.0协议 网络平台如需转载必须与本人联系确认。

    前端GoGoGo
  • 前端性能优化之 JavaScript

    本文为 《JavaScript》 读书笔记,是利用中午休息时间、下班时间以及周末整理出来的,此书虽有点老旧,但谈论的性能优化话题是每位同学必须理解和掌握的,业务...

    Jack Chen
  • WEB前端性能优化常见方法

    web前端是应用服务器处理之前的部分,前端主要包括:HTML,CSS,javascript,image等各种资源,针对不同的资源有不同的优化方式。

    疯狂的技术宅
  • 前端性能优化 —— 前端性能分析

    作者:ouven https://my.oschina.net/zhangstephen/blog/1601380 前端性能优化是一个很宽泛的概念,本书前面的部...

    程序员宝库
  • 前端性能优化

    本文主要考虑客户端性能、服务器端和网络性能,内容框架来自Yahoo Developer Network,包含 7 个类别共 35 条前端性能优化最佳实践,在此基...

    grain先森
  • 前端性能优化

    用JS操作DOM,是比较慢的。为什么呢?首先,补充一下浏览器相关的知识。下图为浏览器结构:

    娜姐
  • 前端性能优化

    前端性能优化与重绘与回流有关系的原因是:频繁的触发重绘与回流,会导致UI频繁染,最终会导致js变慢,会导致页面性能变差

    javascript艺术
  • 提高前端性能之Javascript优化

      要这样做有两种选择。第一种是使用 JavaScript Cache API,我们可以安装 service worker 来使用它。第二种是使用 HTTP 协...

    javascript.shop
  • 前端性能优化篇一:webpack性能优化

    当我们不用cli,而是自己搭建项目架子的时候,会用到webpack构建我们的项目,在用webpack构建项目的时候,过长的打包编译时间和庞大冗余的代码会让我们...

    用户6835371
  • 前端性能优化(一)

    前端是庞大的,包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的,针对方方面面的资源都有不同的方式。...

    用户2305169
  • 前端性能优化(二)

         从用户访问资源到资源完整的展现在用户面前的过程中,通过技术手段和优化策略,缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。

    用户2305169
  • Web 前端性能优化相关内容解析

    Web 前端性能优化相关内容,来源于《Google官方网页载入速度检测工具PageSpeed Insights 使用教程》一文中PageSpeed Insigh...

    Jeff
  • Web前端性能优化教程05:配置ETag

    什么是ETag? 实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串,是web服务器用于确认缓存组件的有效性的一种机制,通常可以使用组件的...

    逸鹏
  • Web前端的性能优化,需要怎么做?

    本文将分享一些前端性能优化的常用手段,包括减少请求次数、减小资源大小、各种缓存、预处理和长连接机制,以及代码方面的性能优化等方面。

    用户8983410

扫码关注云+社区

领取腾讯云代金券