一、体验优化

从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。

1，首屏渲染优化，请求少、加载体积小、善用缓存
2，动画优化，避免某些动画造成页面的卡顿
3，优化用户的操作感官，提升视觉反馈，比如 hover 小手，让用户一眼就知道是否可操作
4，长列表复用 dom，优化滚动效果及页面卡顿现象，减少页面一次性渲染的数量
5，骨架屏的使用
6，组件的预加载，懒加载

二、提升页面性能

减少 http 请求和冗余数据
组件，路由懒加载
配置 nginx 优化
优化 webpack 打包机制
使用 CDN
预渲染
SSR
图片转 base64
后台分布式部署，负载均衡

三、首页加载优化（减少白屏时间）

cdn 分发：通过在多台服务器部署相同的副本，当用户访问时，服务器根据用户跟哪台服务器地理距离小或者哪台服务器此时的压力小，来决定哪台服务器去响应这个请求。
后台在业务层的缓存：数据库查询缓存是可以设置缓存的，这个对于高频率的请求很有用。值得注意的是，接口也是可以设置缓存的，比如获取一定时间内不会变的资源，设置缓存会很有用。
静态文件缓存方案：这个最常看到。现在流行的方式是文件 hash + 强缓存的一个方案。比如 hash + cache control：max-age=1年。
前端的资源动态加载：
- a. 路由动态加载，最常用的做法，以页面为单位，进行动态加载。
- b. 组件动态加载（offScreen Component），对于不在当前视窗的组件，先不加载。
- c. 图片懒加载(offScreen Image)，同上。值得庆幸的是，越来越多的浏览器支持原生的懒加载，通过给 img 标签加上 loading="lazy" 来开启懒加载模式。
利用好 async 和 defer 这两个属性：如果是独立功能的 js 文件，可以加入 async 属性。如果是优先级低且没有依赖的 js，我们可以加入 defer 属性。
渲染的优先级：浏览器有一套资源的加载优先级策略，也可以通过 js 来自己控制请求的顺序和渲染的顺序。一般我们不需要这么细粒度的控制，而且控制的代码也很不好写。
前端做一些接口缓存：前端也可以做接口缓存，缓存的位置有两个，一个是内存，即保存给变量，另一个是 localStorage。比如用户的签到日历（展示用户是否签到），我们可以缓存这样的接口到 localStorage ，有效期是当天。或者有个列表页，我们总是缓存上次的列表内容到本地，下次加载时，我们先从本地读取缓存，并同时发起请求到服务器获取最新列表。
页面使用骨架屏：意思是在首屏加载完成之前，通过渲染一些简单元素进行占位。骨架屏虽然不能提高首屏加载速度，但可以减少用户在首屏等待的急躁情绪。这点很有效，在很多成熟的网站都有大量应用。
使用 SSR 渲染：服务器性能一般都很好，那么可以先在服务器先把 vdom 计算完成后，再输出给前端，这样可以节约的时间为：计算量 / (服务器计算速度 - 客户端计算速度) 。第二个是服务器可以把首屏的 ajax 请求在服务端阶段就完成，这样可以省去和客户端通过 tcp 传输的时间。
引入http2.0：http2.0 对比 http1.1，最主要的提升是传输性能，特别是在接口小而多的时候。
选择先进的图片格式：使用 JPEG 2000，JPEG XR，and WebP 的图片格式来代替现有的 jpeg 和 png ，当页面图片较多时，这点作用非常明显。把部分大容量的图片从 BaseLine JPEG 切换成 Progressive JPEG （理解这两者的差别）也能缩小体积。
利用好 http 压缩：使用 http 压缩的效果非常明显。

【Day11】平时在项目开发中都做过哪些前端性能优化相关推荐

如何做Unity手游性能优化的
Unity性能优化参考: http://gameinstitute.qq.com/article/detail/39757 https://blog.uwa4d.com/archives/allino ...
腾讯是如何做Unity手游性能优化的
他山之石-腾讯是如何做Unity手游性能优化的本文转载自:http://www.taidous.com/thread-44045-1-1.html?_dsign=ba1258b9 俗话说,用户体验不 ...
Web前端性能优化，应该怎么做?
本文将分享一些前端性能优化的常用手段,包括减少请求次数.减小资源大小.各种缓存.预处理和长连接机制,以及代码方面的性能优化等方面. base64:尤其是在移动端,小图标可以base64(webpack ...
多迪php,多迪PHP项目经理深度解析：PHP应用性能优化指南！
原标题:多迪PHP项目经理深度解析:PHP应用性能优化指南! 程序员都喜欢最新的PHP 7,因为它使PHP成为执行最快的脚本语言之一.但是保持最佳性能不仅需要快速执行代码,更需要我们知道影响性能的问题 ...
超实用web前端开发工具推荐（web开发+前端性能优化+浏览器兼容性测试+……）
要说有哪些好用的前端开发软件和工具,我可有发言权哈~因为在学习的过程中积累了不少实用型前端开发工具.今天我就从浏览器兼容性测试工具.web开发工具.前端性能优化工具.大数据可视化工具这四个方向来和大家 ...
做前端性能优化，还不知道什么是Preload、Prefetch、Preconnect、Prerendering，你就out了？
做前端性能优化,还不知道什么是Preload.Prefetch.Preconnect? 今天,我们将探讨当前的资源提示和指令,这是提高网站或 Web 应用程序性能的另一种好方法.您可能听说过Prelo ...
【腾讯优测干货分享】使用多张图片做帧动画的性能优化
本文来自于Dev Club 开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57fc8cea302e4725036142f6 使用多张图片做帧动画的性能优 ...
java如何运用多帧图片_【腾讯优测干货分享】使用多张图片做帧动画的性能优化...
使用多张图片做帧动画的性能优化背景 QQ群的送礼物功能需要加载几十张图然后做帧动画,但是多张图片加载造成了非常大的性能开销,导致图片开始加载到真正播放动画的时间间隔比较长.所以需要研究一些优化方案提 ...
【腾讯优测干货分享】使用多张图片做帧动画的性能优化 1
本文来自于Dev Club 开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57fc8... 使用多张图片做帧动画的性能优化背景 QQ群的送礼物功能需要 ...

【Day11】平时在项目开发中都做过哪些前端性能优化

平时在项目开发中都做过哪些前端性能优化

一、体验优化

二、提升页面性能

三、首页加载优化（减少白屏时间）

【Day11】平时在项目开发中都做过哪些前端性能优化相关推荐

最新文章

热门文章