- 综合排序
- 最热优先
- 最新优先
- 来自专栏腾讯大讲堂的专栏
Hippy首屏渲染优化小结
作者：boxizeng，腾讯高级工程师 |导语 近期在做Hippy首屏节点提前渲染的优化，实现过程中查阅了SDK中相关的源码，对底层实现的理解更深了一步，编写此文小结一番。 解决方法是将首屏生成的节点id全都x100，或者使用个小trick将他们符号取反即可，另外为了防止首屏与实际生成节点的样式出现覆盖，我们还在节点数组最外层加了层包裹，如下所示： { "id": - 何时销毁 首屏节点销毁的时机执行太早容易出现白屏闪屏，执行太晚又容易阻塞用户可操作的时间，事实上在调试过程中两者都有遇到过，比较自动化的解决方式是客户端检测到页面不再发生变化后自动将首屏的 View 给移除掉 ，这里可能会出现首屏节点创建完了但页面实际并未完全渲染完毕，这就会导致闪屏的现象，这里的优化方式(TODO)可以是通过检测回调的触发次数来判断页面节点发生变化的程度，以此作为移除首屏节点的时机标注。 03 效果展示 为了方便看到首屏效果，视频区分了首屏节点和业务实际产生的节点，这里实际上节省的是jsbundle的加载耗时，从本地炸鸡数据表现来看等待时长减少了约100ms，目前还处于Demo阶段，待节点数据运行打包与解析整个流程打通后
2.1K30发布于 2020-12-10 - 来自专栏性能与架构
腾讯前端首屏优化案例
下面是对腾讯前端团队优化手Q一个页面案例的总结 优化目标页面：手Q群成员分布的页面 左面是首屏，右面是下拉后到底部 这个页面中，可以划分成四个部份：活跃群成员、男女比例、省市分布、年龄 将前三个部份归入首屏渲染时间 ，为主要优化目标 优化过程 （1）活跃群成员头像的懒加载，初始状态使用默认头像快速显示 （2）使用内联js 之前，js都放入外部文件，为了避免阻塞，放到页面底部加载 js之中有获取核心数据的逻辑 这种方式下，需要等待js文件加载完成，然后再发起请求获取数据 优化后，把获取核心数据的代码提取出来，放入head部分中，这样就可以提前执行获取数据的动作，减少了一个JS加载的往返时间 （3）使用内联 css 与内联js的思路相同 之前，也是使用css外部文件 优化后，把首屏需要的css内联到head内 注意：html+内联js css 时要注意整体的大小，最好不要超过14K，这样可以最优网络传输 （4）次屏逻辑延后处理，减少阻塞 这个优化思路简洁 实用 有效，性能提升20%左右
1.3K100发布于 2018-04-03 - 来自专栏Article
博客首屏性能优化探索
问题： main.js 没有压缩，虽然加上注释也就只有 42 行代码，体积 1.3K jquery 压缩后的代码体积 86K lightbox.js 9.3K，首屏也是加载的 文章图片没有懒加载 原始静态资源大小 优化方案 main.js 压缩后 281B 首屏 JQ 会用到，可以引用公共CDN的路径，这样的好处是首次访问的用户有概率可以命中该版本的 JQ ，从而走本地缓存，同时也可以降低我的服务器带宽压力 鉴于博客的群体访问采用的浏览器版本不低 结果 隔了一天再看统计数据，发现首屏访问速度并没有多少提升，从资源统计数据上来看，依旧存在静态资源访问耗时较长的问题。 这里没有使用 CDN 直接优化，因为这是外物，不能因为优化而优化，在没有找到优化点之前去一顿操作非明智之举。 还有一种优化思路就是利用语言、框架、依赖、服务器、http1.1 ->2 等周边，通过版本提升来试图提高性能，或者替换性能更优服务来降低首屏耗时。
51620编辑于 2022-06-27 - 来自专栏code秘密花园
Vue CLI 首屏优化技巧
首屏页面整整加载了 9s 光加载那个大文件就花了 8s 这必须得做个优化了，没有用户能忍受 9s的白屏而不关闭页面的 过程中，我还顺便把项目从 vuecli 2.x迁移到了 vuecli 3，所以接下来还会介绍一些它们在优化上的异同 在首屏会把这十几个路由文件，都一口气下载了 所以我们要关闭这个功能，在 vue.config.js中设置 参考官网的做法： ? 设置完毕后，首屏就只会加载当前页面路由的组件了 element-ui按需加载 ? 首屏需要加载的依赖包，其中 element-ui整整占了 568k 原本的引进方式引进了整个包： import ElementUI from 'element-ui'Vue.use(ElementUI) 打包出来的文件中，直接就没有了 css文件夹 取而代之的是整合起来的一个 js文件，负责在一开始就注入所有的样式 首屏加载文件数减少，但体积变大，最终测下来速度没有太大差异 所以，是否要css拆分就见仁见智
92410发布于 2019-12-02 - 来自专栏Czy‘s Blog
Vue首屏性能优化组件
Vue首屏性能优化组件 简单实现一个Vue首屏性能优化组件，现代化浏览器提供了很多新接口，在不考虑IE兼容性的情况下，这些接口可以很大程度上减少编写代码的工作量以及做一些性能优化方面的事情，当然为了考虑 IE我们也可以在封装组件的时候为其兜底，本文的首屏性能优化组件主要是使用IntersectionObserver以及requestIdleCallback两个接口。 描述 先考虑首屏场景，当做一个主要为展示用的首屏时，通常会加载较多的资源例如图片等，如果我们不想在用户打开时就加载所有资源，而是希望用户滚动到相关位置时再加载组件，此时就可以选择IntersectionObserver 使用npm run dev运行之后可以在Console中看到这四个懒加载组件created创建的顺序，其中A的observer懒加载是需要等其加载页面渲染完成之后，判断在可视区，才进行加载，首屏使能够直接看到的
1.2K20发布于 2021-11-11 - 来自专栏前端迷
vue-cli首屏优化技巧
首屏页面整整加载了 9s 光加载那个大文件就花了 8s 这必须得做个优化了，没有用户能忍受 9s的白屏而不关闭页面的 过程中，我还顺便把项目从 vuecli 2.x迁移到了 vuecli 3，所以接下来还会介绍一些它们在优化上的异同 在首屏会把这十几个路由文件，都一口气下载了 所以我们要关闭这个功能，在 vue.config.js中设置 参考官网的做法： ? 设置完毕后，首屏就只会加载当前页面路由的组件了 element-ui按需加载 ? 首屏需要加载的依赖包，其中 element-ui整整占了 568k 原本的引进方式引进了整个包： import ElementUI from 'element-ui'Vue.use(ElementUI) 打包出来的文件中，直接就没有了 css文件夹 取而代之的是整合起来的一个 js文件，负责在一开始就注入所有的样式 首屏加载文件数减少，但体积变大，最终测下来速度没有太大差异 所以，是否要css拆分就见仁见智
1.1K10发布于 2019-11-14 - 来自专栏乱码李
Web 性能优化-首屏和白屏时间
什么是首屏和白屏时间？ 白屏时间是指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间。 首屏时间是指浏览器从响应用户输入网络地址，到首屏内容渲染完成的时间。 影响首屏时间的因素：白屏时间，资源下载执行时间。 关于首屏时间是否包含图片加载网上有不同的说法，个人认为，只要首屏中的图片加载完成，即是首屏完成，不在首屏中的图片可以不考虑。 计算首屏时间常用的方法有： (1) 首屏模块标签标记法 由于浏览器解析 HTML 是按照顺序解析的，当解析到某个元素的时候，你觉得首屏完成了，就在此元素后面加入 script 计算首屏完成时间。 <! -- 首屏不可见内容 -->
</body> </html> (2) 统计首屏内加载最慢的图片/iframe 通常首屏内容中加载最慢的就是图片或者 iframe3.5K22发布于 2021-11-26 - 来自专栏小前端看世界
Q 前端首屏加载优化记录
结论：html解析过程中，存在非首屏需要的资源进行加载，并形成阻塞，导致关键渲染路径过长，从而影响页面的加载性能 优化方案 导致页面加载慢的问题基本上已经定位出来，那么接下来需要针对用户的部署环境，做针对性的优化 还是想再优化一下。经过思考和复盘，一期的优化总体来说属于比较通用的优化，但是感觉还是能继续优化一下的。那么我们改变一下思路，是不是可以采用分段式渲染的方式，将首屏的打开速度再提升一个档次。 既然如此，我们能不能进一步减少首屏的代码体积，将依赖后端数据渲染的内容进行懒加载，这样就能既减少首屏所需要的代码量，也可以让懒加载的代码和数据请求同时进行。进一步优化首屏速度呢。 而且整个首页高度依赖后端进行渲染，在无法提供SSR服务的前提下，而且也需要依赖js运行时获取接口数据才能正常渲染，首页中的首屏加载代码携带这些内容组件的代码将毫无意义，所以决定将红框中的组件代码全部进行懒加载处理 二期优化方案主要是对于首屏所需要的代码优先加载，对于页面中与接口数据高度依赖的模块，统一采用懒加载的方式，可以让用户更快的看到页面的呈现。
1.2K20编辑于 2022-09-26 - 来自专栏三掌柜的技术空间
前端优化：首屏加载速度的实践
目录前言多图片的懒加载避免用户多次点击请求骨架屏原理结束语前言随着互联网技术的飞速发展，前端网页逐渐取代了传统客户端成为用户获取信息、进行交互的重要渠道，但是网页也有常见的弊端，比如网页首屏加载速度的快慢直接影响着用户体验 ，那么如何提升网页的首屏加载速度，成为了前端开发者必须面对的问题。 本文将从多图片懒加载、避免用户多次点击请求以及骨架屏原理等方面，简单分享一下前端优化首屏加载速度的策略优化。欢迎大家在评论区留言交流。 这样可以在保证用户体验的前提下，有效减少首屏加载时间。 我个人觉得前端优化首屏加载速度需要从多个方面入手，借助通过采用多图片的懒加载、避免用户多次点击请求以及使用骨架屏等技术手段，可以有效提升网页的首屏加载速度提升用户体验，但是也需要注意在优化过程中保持代码的清晰和可维护性
65741编辑于 2024-06-24 - 来自专栏腾讯云可观测专栏
微信小程序首屏耗时优化
首屏耗时与用户设备、所在网络环境、程序代码有很大关系。线上环境有2/3的运气成分。 2. 理论上相同地域访问 https 比访问 ip 慢，但小程序要求必须使用 https。 3. 小程序启动时由微信加载代码包，与服务域名无关，进入页面后才会发起首次网络请求，某些用户环境出现 ERR_CONNECTION_RESET，导致上报的 API 接口及首屏耗时因网络不通畅爆表。 首屏优化分析 ： 提高网页的性能一般要包括优化加载的速度和程序执行的流畅度；而加载速度又可以优化服务端响应的时间（包括代码包的下载时间，网络请求接口的响应时间，互联网的图片及字体等资源文件）和页面自身加载和渲染的时间 优化的部分 css 样式的选择器。 8. 将网络请求从 onReady 提前到 onLoad 。 9. 亲测使用骨架屏只会让人感觉页面非白屏了，但会增加首屏的时间。 业务逻辑 1. 优化效果 ： 如下图腾讯云前端性能监控显示大部分地域首屏耗时在 0-0.5s 之间： [RUM 首屏耗时截图] [某测速网站 DCDN 截图] 上述首屏耗时优化效果最终评估平台为：腾讯云前端性能监控
2.7K30编辑于 2022-01-26 - 来自专栏前端|
【腾讯云前端性能优化大赛】前端首屏性能优化
这次，就以我的个人博客为例子，从最开始的荒芜状态，向业界网站性能标准“秒开”做一次系统性的性能优化。 以下为初始数据，数据来源使用腾讯云RUM性能监控。 } 3 、异步加载，按需引入 对于我们的网站来说，用户刚进来看到的页面，往往是不需要加载全部资源的，当用户浏览其它页面的时候，才会用到那些资源，自然这些资源我们就可以把他们的加载往后放一放，优先加载首屏需要的资源 [image-20211227144006470.png] 5、离线缓存（Service Worker） 5.1、简介 除了上述说的手段，减小资源体积，提高资源传输速度之外，我们还可以有一些优化方式，那就是缓存 6、结尾 经过好几天的优化，在没有上终极首屏优化方案（SSR）之前，网站已经达到了一个还不错的速度： [image-20211223153335103.png] 这里的数据都只是取得首页的数据，不同页面打开的速度可能会有些差别 后续还可以使用SSR方案进行进一步的优化，不过这个方案需要项目整体重构，一时半会儿搞不出来。
2.2K41编辑于 2021-12-27 - 来自专栏向治洪
关于React Native 安卓首屏白屏优化
优化分析 通过工具分析，问题主要在下面的代码上， ReactRootView mReactRootView = createRootView(); mReactRootView.startReactApplication getMainComponentName(), getLaunchOptions()); setContentView(mReactRootView); } 知道了产生问题的原因，我们就知道怎么着手优化了
1.9K80发布于 2018-02-05 - 来自专栏前端有的玩
Vue首屏加载速度优化，提升80%以上
在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。 若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首屏的体验。 单页应用会随着项目越大，导致首屏加载速度很慢，针对目前所暴露出来的问题，有以下几种优化方案可以参考： 有针对性的优化方案 一、对于第三方js库的优化，分离打包 生产环境是内网的话，就把资源放内网 详细见vue官网 最终优化后的效果如下图：vendor.js文件从1M以上优化到256K左右，体积减少接近80%，排除服务器影响的因素，界面渲染速度基本都在1s左右，达到秒开效果，比之前快 结语：前端性能优化至关重要，以后有遇到更好的其他方案会继续补充进来。你也可以在评论区留言探讨，有错误不足的地方欢迎大佬指出。
2K20发布于 2021-07-27 - 来自专栏Web技术学苑
埋点统计优化，首屏加载速度提升
统计代码会影响业务首屏加载吗？ 同步引入方式，当然会，我的业务代码还没加载，首屏就加载一大段统计的jsdk,在移动端页面打开要求比较高的苛刻条件下，首屏优化，你可以在埋点统计上做些优化，那么页面加载会有一个很大的提升，本文是一篇笔者关于埋点优化的笔记 ，所以在之前采用异步，定时器方式，首屏加载会有显著提升。 会等异步标识的async下载完后立马执行，然后再执行defer的脚本，具体可以参考以前写的一篇文章你真的了解esModule吗 总结 统计脚本，我们可以使用定时器+insertBefore方式可以大大提高首屏的加载速度 ，这也给我们了一些启发，首屏加载，非业务代码，比如埋点统计可以使用该方案做一点小优化加快首屏加载速度 如果使用insertBefore方式，非常不建议同步方式insertBefore,这种方式还不如同步加载统计脚本
1.3K20编辑于 2022-12-21 - 来自专栏腾讯云可观测专栏
【前端性能优化大赛精选文章】-首屏优化耗时实战
5.去除首屏不需要的依赖 可以看到，首屏大文件是 elementUI，elementUI 采用部分引入，故最后只有 48kb。 [点击查看大图] 6.其他优化 压缩图片，推荐工具：https://tinypng.com/。 路由懒加载：需要在 router 里配置，这样触发某条路由，再去加载对应的资源，减少首屏压力。 优化后端接口：首屏的接口如果有特别耗时的，那么就需要去优化后端了，比如本文对首页的热点数据使用了 Redis 缓存，速度更快。 榜中的最好成绩是 CDN 比较快的时候，首屏优化耗时：146ms，平时大部分稳定在 200-400 ms，还是取决于 CDN 网速和到服务器的距离。 [点击查看大图] 上述首屏耗时优化效果最终评估平台为：腾讯云前端性能监控。点击文末「阅读原文」了解腾讯云前端性能监控。
85620编辑于 2022-01-26 - 来自专栏前端优化
【腾讯云前端性能优化大赛】前端首屏性能优化实战
在现在的网络环境下，用户访问网页时，如果首屏在3S以内是可以接受的，但是如果首屏在10S以上，绝大部分用户都不会继续等待，这样就会导致用户的流失,对于个人或者企业来说都是不可接受的，所以首屏优化已经成为网页必不可少的一部分 以下优化针对Vue 2.X框架进行 优化方法： (1)路由懒加载 由于Vue是单页面应用，在首次加载的时候就会加载所有的资源，资源过于多就会导致下载速度慢，直接影响了页面的首屏时间，网络较差时会导致很久打不开页面 (8)图片优化 经过测试，带有数张图片和文本的页面明显比纯文本的页面加载速度要慢，所以当图片比较大或者数量比较多时，请求需要的时间也就长了，我们第一步可以进行图片的大小优化，在不影响图片的清晰度的前提下 (9)预解析DNS 解析时间过长也会影响网页的首屏时间，预解析的实现： <meta name="viewport" content="width=device-width,initial-scale=
1.9K180编辑于 2021-12-30 - 来自专栏全栈程序员必看
vue双向绑定原理 面试_vue首屏加载优化
vue.js采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
29130编辑于 2022-11-02 - }> <HeavyImage /> </Suspense> ); } 效果： 图片总体积减少 40% 首屏请求数减少 35% 4.来自专栏AI工具系列
React项目首屏加载优化，CodeBuddy使用心得
一、问题描述 在上个月的一个React项目中，航道部门的用户反馈页面加载缓慢，尤其是首屏体验极差。 通过 Lighthouse性能测试发现下面问题： 首屏加载时间高达 6.1 秒 性能评分仅 58 分（满分 100） 主要失分项：资源加载效率（32/100）、压缩优化（50/100） 项目使用的技术栈 考虑到我们目前的用户需要，领导提出下面的要求： 首屏加载时间 ≤ 3 秒 Lighthouse 性能评分 ≥ 80 分 优化周期控制在 4小时内 三、问题诊断 1. CodeBuddy 方案： 为了优化 React 项目的首屏加载性能，可以通过 Webpack 5 的代码分割功能将大型 JS 文件拆分为更小的模块 // webpack.config.js module.exports
38120编辑于 2025-09-26
关于骨架屏与首屏渲染
为了提升下用户体验，讲下项目中这个骨架屏的处理吧。 项目相关：vue-mall 1、骨架屏 骨架屏就是可以由原来的在尚未加载前转圈圈变成先给用户展示出页面的大致结构，这样可以让用户有个更好的体验感。 -->Skeleton.vue 然后讲下如何控制它的显示与隐藏达到最好的一个首屏展示效果。 4、首屏渲染 以我们项目中的首页的为例，一共有从上到下一共四个区域：轮播图、金刚区、精选会场、推荐列表。 5、小结 综上所述，目前我能想到的骨架屏解决方案就是这样的了，mall项目中也是这样写的，麻烦的地方就是需要骨架屏的页面都需要自己去定位然后写下骨架屏，不够自动化，但是我觉得也还好吧，其实一个项目中几个主要的页面走下骨架屏就行了 ，并不需要每个页面都骨架屏。
【腾讯云前端性能优化大赛】亚军方案-前端首屏优化实践
–Steve Souders ---- 大家好，前端性能优化是一个非常重要的问题，首屏时间长短，直接影响到用户的体验与留存。本文介绍一下优化过程的心路和历程。最终从2000ms优化到148ms。 [引入cdn] 4.将图片打包上传至七牛云 有些图片实在是过大，影响了资源加载的时间，故将其打包上传至七牛云或者阿里云oss对象存储中，这样页面中用不到图片的时候，就不加载，减轻了首屏资源加载的压力。 5.去除首屏不需要的依赖 可以看到，首屏大文件是elementUI，elementUI采用部分引入，故最后只有48kb，其实是lodash，但排查发现，全局只使用了一次lodash，故不在app.js中全局引入 [去除lodash后] 6.其他 压缩图片，推荐工具：https://tinypng.com/ 路由懒加载：需要在router里配置，这样触发某条路由，再去加载对应的资源，减少首屏压力 优化后端接口：首屏的接口如果有特别耗时的 目前网站经过一系列优化后，速度不如巅峰时期了，我也改不回去了...... [非常曲折的优化过程]
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号