web性能优化

简介: web性能优化

HTML方面

对于SPA应用,可以使用预渲染或者服务端渲染,提高首屏加载速度;

引入css时采用link标签,并放入头部,使其与文档一起加载,减少页面卡顿时间;

script标签可以放到body最下边或者添加defer/async属性,因为script的加载会阻塞页面渲染;

尽量减少dom结构的重排和重绘;

使用懒加载,看不到的内容等需要时再进行加载。

CSS方面

能用css解决的问题不要用js解决,如动画、溢出省略号等;

使用css雪碧图,减少网络请求;

对不同分辨率的屏幕采用不同分辨率的图片,防止图片过大导致加载缓慢;

将合并样式分开来书写,效率更高,如margin: top 0 0 left;的效率没有margin-top: top; margin-left:left;高;

需要渲染动画时强制打开GPU加速:transform: translate3d(0, 0, 0);

抽离相同的样式,整合为class在页面中进行使用,提高css的可维护性;

避免使用通配符规则,如果*{},计算次数惊人,只对需要用到的元素进行选择;

减少优先级低的css选择器,如:尽量少的使用标签选择器(查询效率低),而使用class。

JS方面

使用事件委派,减少内存消耗;

使用节流和防抖函数避免函数的频繁调用;

写循环逻辑时尽量降低时间复杂度,尽量减少使用循环嵌套和递归;

尽量不要创建全局变量。

Vue方面

使用路由懒加载模式,异步加载路由;

使用keep-alive缓存路由,避免频繁切换导致性能消耗;

UI组件按需引入,避免全量引入;

v-for和v-if不要同时使用,因为v-for的优先级更高,会先循环,导致所有内容均会被渲染;

图片使用懒加载,指令:v-lazy;

在组件销毁时记得清空定时器的内容和解绑本组件内绑定过的事件,释放内存。

其他方面

使用打包工具对代码进行打包压缩,若想提高打包速度,可以使用happyPack插件;

服务端可以使用缓存技术,强缓存和协商缓存

CDN加速技术。


相关文章
|
11天前
|
缓存 监控 数据库
Flask性能优化:打造高性能Web应用
【4月更文挑战第16天】本文介绍了提升Flask应用性能的七大策略:优化代码逻辑,减少数据库查询,使用WSGI服务器(如Gunicorn、uWSGI),启用缓存(如Flask-Caching),优化数据库操作,采用异步处理与并发(如Celery、Sanic),以及持续监控与调优。通过这些手段,开发者能有效优化Flask应用,适应大型或高并发场景,打造高性能的Web服务。
|
1月前
|
安全 中间件 Go
Go语言Web服务性能优化与安全实践
【2月更文挑战第21天】本文将深入探讨Go语言在Web服务性能优化与安全实践方面的应用。通过介绍性能优化策略、并发编程模型以及安全加固措施,帮助读者理解并提升Go语言Web服务的性能表现与安全防护能力。
|
2月前
|
缓存 前端开发 算法
Java Web性能优化:从响应时间到吞吐量
Java Web性能优化:从响应时间到吞吐量
|
5月前
|
监控 定位技术
Web性能优化地图
Web性能优化地图
304 0
|
8月前
|
缓存 前端开发 JavaScript
Web性能优化的工具和技术
Web性能优化的工具和技术
|
10月前
|
缓存 边缘计算 JavaScript
web前端面试高频考点——性能优化篇(手写防抖、手写节流、XXS攻击、XSRF攻击)
web前端面试高频考点——性能优化篇(手写防抖、手写节流、XXS攻击、XSRF攻击)
114 0
|
10月前
|
Web App开发 域名解析 存储
Web性能优化
Web性能优化
48 0
|
11月前
|
监控 前端开发 JavaScript
Web 现代应用程序架构下的性能优化,渐进式的极致艺术。
前言 本文是 Rendering on the Web: Performance Implications of Application Architecture (Google I/O ’19)[1] 这篇谷歌工程师带来的现代应用架构体系下的优化相关演讲的总结,演讲介绍了以下优化手段: • 预渲染 • 同构渲染 • 流式渲染 • 渐进式注水(非常精彩)
|
存储 缓存 前端开发
Web性能优化_知识点精讲
延迟和宽带 WebWorker 关键渲染路径 React 应用中的优化处理 利用React-Profiler提升应用性能 从 URL 输入到页面加载整过程分析 SPA 提速 SPA: SEO
109 0
Web性能优化_知识点精讲
|
存储 缓存 前端开发
Web性能优化之Worker线程(下)
{服务工作线程|Service Worker} 基础概念 ⭐️⭐️⭐️ 线程缓存 ⭐️⭐️⭐️⭐️ 线程客户端 生命周期 ⭐️⭐️⭐️ 控制反转与线程持久化 updateViaCache 管理服务文件缓存 ⭐️⭐️⭐️ 线程消息 ⭐️⭐️⭐️ 拦截 fetch 事件 ⭐️⭐️⭐️⭐️⭐️
166 0