js 首屏时间_js 首屏第二屏_首屏加载 js - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

首屏渲染时间的计算

，为此，需要开发一套新的算法，尽可能准确的对 “首屏渲染时间” 进行估算。...（Iphone6），所以这个页面的首屏渲染时间指的是黄色区域里面内容渲染所需要的时间。...万一5s之后首屏才渲染完成呢？本人觉得首屏渲染时间如果超过5s，可以认为首屏渲染失败了，不在本文的讨论范围之内。...最终返回的 result ，就是我们想要的首屏dom结构渲染完成耗时啦。首屏dom结构渲染时间并不等于首屏渲染时间，当首屏中有图片时，往往图片加载完成之后，用户才能看到完整的页面。...，如果其加载完成时间比dom结构渲染完成时间晚，则认为其是首屏渲染的最后一步，然后以此逻辑遍历所有图片，更新首屏渲染完成时间。

4.6K5 2

【性能】计算首屏白屏时间

= endTime - startTime 首屏时间首屏时间是指，在不滚动屏幕下的前提下，用户看到完整第一屏内容花费的时间首屏内容完全加载完成，才叫首屏，而不是出现内容，或者部分元素没有展示首屏时间一般在...5秒以内是优秀，10秒以内可接受，10s 以后根本不能忍现在呢，我们并没有一个明确的API来直接得到首屏时间那我们到底要怎么得到首屏时间？...我们已经可以获取页面开始加载的时间，和白屏时间一样现在只要我们找到这个首屏线，然后首屏线附近获取一个时间，这样首屏时间 = firstScreen - performance.timing.navigationStart...，那么就可以使用这种办法毕竟这种办法是最为简单的，然后就大概给自己一个简单的参考值 2统计首屏最慢图片加载时间一般来说，首屏内容加载最慢的就是图片资源所以，可以把首屏内加载最慢的图片的时间，当做首屏时间...首先，我们就要拿到首屏内所有的图片，然后遍历他们，逐个监听图片标签的 onload 事件，并收集到他们的加载时间最后比较得到加载时间的最大值然后这么计算首屏时间 = 加载最慢的首屏图片时间- performance.timing.navigationStart

3.8K1 1

您找到你想要的搜索结果了吗？

是的

没有找到

Web 性能优化-首屏和白屏时间

什么是首屏和白屏时间？白屏时间是指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间。首屏时间是指浏览器从响应用户输入网络地址，到首屏内容渲染完成的时间。...影响首屏时间的因素：白屏时间，资源下载执行时间。...计算首屏时间常用的方法有： (1) 首屏模块标签标记法由于浏览器解析 HTML 是按照顺序解析的，当解析到某个元素的时候，你觉得首屏完成了，就在此元素后面加入 script 计算首屏完成时间。 <!...我们只需要监听首屏内所有的图片的 onload 事件，获取图片 onload 时间最大值，并用这个最大值减去 navigationStart 即可获得近似的首屏时间。 <!...domContentLoadedEventEnd: DOM 解析完成后，网页内资源加载完成的时间（如 JS 脚本加载执行完毕）。

2.8K2 1

关于骨架屏与首屏渲染

--vue-ssr-outlet--> // main.js new Vue({ router, store, render: h => h(App) })....我们的vue挂载到了#app上面的这个渲染时间不是我们要解决目的所在，只是因为网络问题数据迟迟没到所以造成页面不完整，所以需要骨架屏。不知道看到这里的看官对这个方案有没有什么好的解决办法。...-->Skeleton.vue 然后讲下如何控制它的显示与隐藏达到最好的一个首屏展示效果。 4、首屏渲染以我们项目中的首页的为例，一共有从上到下一共四个区域：轮播图、金刚区、精选会场、推荐列表。...: 'Home', component: () => import(/* webpackPreload: true */ '@/views/home') } ] 最后我们把接口返回数据的时间...5、小结综上所述，目前我能想到的骨架屏解决方案就是这样的了，mall项目中也是这样写的，麻烦的地方就是需要骨架屏的页面都需要自己去定位然后写下骨架屏，不够自动化，但是我觉得也还好吧，其实一个项目中几个主要的页面走下骨架屏就行了

1.1K2 0

关于首屏时间采集自动化的解决方案

关于首屏首屏时间是指从转向该页面到屏幕中该页面所有内容都可见时的时间。...因此在首屏时间的计算中，我们是以最终首屏图片的加载时间为节点计算的。...首屏计算原则1 首屏计算模块不应该耦合业务线一般而言，首屏计算作为一个抽离出的js脚本单独引用，这个模块尽量不暴露API给开发者使用，所有的采集端任务都由该模块完成。...因此首屏时间计算模块必须知道首屏的DOM结构渲染完毕的时间节点，在这个节点时刻进行计算首屏范围内的图片加载时间。可是如何获取首屏DOM结构渲染完毕的时间节点呢？这就需要业务开发人员制定。...MVVM开发模式下，首屏时间的计算已经耦合了业务代码，虽然可以在保证首屏时间的准确性，但却给开发者带来了一些可观判断逻辑，而这些判断往往会困扰新入职的同志们，因此我们的目标之一就是解决需要手动打点进行首屏时间计算的现状

3K8 0

Vue webpack 压缩打包上线首屏加载时间过长优化方案

Vue 上线优化方案 #1 为什么要引入外部CDN 最近博客上线,但是在首次加载的时候,需要消耗很多时间,大概在50秒左右,就是说第一页登录页面,就需要用户等待50秒(服务器是最低配置也是一个原因),看了一下...network,发现有两个文件加载的时间特别长,一个是vendor.js,一个是app.js,打包的时候,这两个文件也提示文件过大 ?...最终,结合网上的前辈们的解答,首屏加载时间过长重要有以下几点: 图片,登录页面(打开网站的第一个页面)静态图片过多也会在首屏中加载出来,消耗时间 Vue代码里面Router没有使用懒加载使用npm安装第三方库...根据以上三点,具体优化步骤如下 : #2.1 登录页面(打开网站的第一个页面)图片主要的处理方式就是减小图片的大小我这里直接把登录页面的背景图片全部去掉,这样子直接可以省很多时间 #2.2 Router...懒加载 webpack默认将所有js源代码打包成一个js文件，导致JS包会变得非常大，影响页面首次加载速度按需加载能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件的js

1.8K3 0

腾讯前端首屏优化案例

下面是对腾讯前端团队优化手Q一个页面案例的总结优化目标页面：手Q群成员分布的页面左面是首屏，右面是下拉后到底部这个页面中，可以划分成四个部份：活跃群成员、男女比例、省市分布、年龄将前三个部份归入首屏渲染时间...，为主要优化目标优化过程（1）活跃群成员头像的懒加载，初始状态使用默认头像快速显示（2）使用内联js 之前，js都放入外部文件，为了避免阻塞，放到页面底部加载 js之中有获取核心数据的逻辑...这种方式下，需要等待js文件加载完成，然后再发起请求获取数据优化后，把获取核心数据的代码提取出来，放入head部分中，这样就可以提前执行获取数据的动作，减少了一个JS加载的往返时间（3）使用内联...css 与内联js的思路相同之前，也是使用css外部文件优化后，把首屏需要的css内联到head内注意：html+内联js css 时要注意整体的大小，最好不要超过14K，这样可以最优网络传输...（4）次屏逻辑延后处理，减少阻塞这个优化思路简洁实用有效，性能提升20%左右

1.1K10 0

单页应用首屏问题

2、按需引入，这个应该是所有都知道的，我这边测试了一下一些小的js影响也就几KB，UI库影响就很大了。...我全局引入elementUI，打包出来之后首次加载的chunk-vendors.js和去掉之后的chunk-vendors.js大小将近2M。...3、服务端渲染（ssr），以前一直以为服务端渲染只是为了seo，后来才知道解决首屏问题，这才是最大的优化。...其实也很好理解，一般浏览器渲染是请求回来之后再通过js渲染页面，而服务端渲染是请求回来直接就是页面。...另外，我对ssr也是感触不大，想想，还是觉得为了seo可以去选择，或者真的要那种对首屏优化要到毫秒级的才需要。

1.5K2 0

博客首屏性能优化探索

问题： main.js 没有压缩，虽然加上注释也就只有 42 行代码，体积 1.3K jquery 压缩后的代码体积 86K lightbox.js 9.3K，首屏也是加载的文章图片没有懒加载原始静态资源大小...优化方案 main.js 压缩后 281B 首屏 JQ 会用到，可以引用公共CDN的路径，这样的好处是首次访问的用户有概率可以命中该版本的 JQ ，从而走本地缓存，同时也可以降低我的服务器带宽压力鉴于博客的群体访问采用的浏览器版本不低...，因此移除 lazyload.js，直接使用原生的的 lazyload 属性。...结果隔了一天再看统计数据，发现首屏访问速度并没有多少提升，从资源统计数据上来看，依旧存在静态资源访问耗时较长的问题。...还有一种优化思路就是利用语言、框架、依赖、服务器、http1.1 ->2 等周边，通过版本提升来试图提高性能，或者替换性能更优服务来降低首屏耗时。

3342 0

Hippy首屏渲染优化小结

，另外view的创建耗时也是一笔不小的开销，此前前端侧虽然可以通过一些常规手段去减少首屏的节点创建，以此减少js与native的通信耗时达到降低首帧耗时的目的，但实际上在用户侧呈现出来最终画面在时间点上并没有提前...Hippy模块名 js版本号 js版本加载总次数首帧平均耗时ms 1000ms打开率(%) 加载js耗时ms 创建view耗时ms 引擎初始化耗时ms vMission 1.20883.1 33,930...解决方法是将首屏生成的节点id全都x100，或者使用个小trick将他们符号取反即可，另外为了防止首屏与实际生成节点的样式出现覆盖，我们还在节点数组最外层加了层包裹，如下所示： { "id": -...何时销毁首屏节点销毁的时机执行太早容易出现白屏闪屏，执行太晚又容易阻塞用户可操作的时间，事实上在调试过程中两者都有遇到过，比较自动化的解决方式是客户端检测到页面不再发生变化后自动将首屏的 View 给移除掉...，这里可能会出现首屏节点创建完了但页面实际并未完全渲染完毕，这就会导致闪屏的现象，这里的优化方式(TODO)可以是通过检测回调的触发次数来判断页面节点发生变化的程度，以此作为移除首屏节点的时机标注。

1.8K3 0

Vue CLI 首屏优化技巧

在首屏会把这十几个路由文件，都一口气下载了所以我们要关闭这个功能，在 vue.config.js中设置参考官网的做法： ?...设置完毕后，首屏就只会加载当前页面路由的组件了 element-ui按需加载 ?...首屏加载资源198k，加载时间1s，相比原来速度提升了90% 后记：css是否要拆分 vuecli 3和 vuecli2.x还有一个区别是 vuecli 3会默认开启一个 css分离插件 ExtractTextPlugin...每一个模块的 css文件都会分离出来，整整13个 css文件，而我们的首页就请求了4个，花费了不少的资源请求时间我们可以在 vue.config.js中关闭它 css: { // 是否使用...打包出来的文件中，直接就没有了 css文件夹取而代之的是整合起来的一个 js文件，负责在一开始就注入所有的样式首屏加载文件数减少，但体积变大，最终测下来速度没有太大差异所以，是否要css拆分就见仁见智

8001 0

Vue首屏性能优化组件

Vue首屏性能优化组件简单实现一个Vue首屏性能优化组件，现代化浏览器提供了很多新接口，在不考虑IE兼容性的情况下，这些接口可以很大程度上减少编写代码的工作量以及做一些性能优化方面的事情，当然为了考虑...IE我们也可以在封装组件的时候为其兜底，本文的首屏性能优化组件主要是使用IntersectionObserver以及requestIdleCallback两个接口。...描述先考虑首屏场景，当做一个主要为展示用的首屏时，通常会加载较多的资源例如图片等，如果我们不想在用户打开时就加载所有资源，而是希望用户滚动到相关位置时再加载组件，此时就可以选择IntersectionObserver...time:可见性发生变化的时间，是一个高精度时间戳，单位为毫秒。 target:被观察的目标元素，是一个DOM节点对象。...使用npm run dev运行之后可以在Console中看到这四个懒加载组件created创建的顺序，其中A的observer懒加载是需要等其加载页面渲染完成之后，判断在可视区，才进行加载，首屏使能够直接看到的

8842 0

vue-cli首屏优化技巧

在首屏会把这十几个路由文件，都一口气下载了所以我们要关闭这个功能，在 vue.config.js中设置参考官网的做法： ?...设置完毕后，首屏就只会加载当前页面路由的组件了 element-ui按需加载 ?...首屏加载资源198k，加载时间1s，相比原来速度提升了90% 后记：css是否要拆分 vuecli 3和 vuecli2.x还有一个区别是 vuecli 3会默认开启一个 css分离插件 ExtractTextPlugin...每一个模块的 css文件都会分离出来，整整13个 css文件，而我们的首页就请求了4个，花费了不少的资源请求时间我们可以在 vue.config.js中关闭它 css: { // 是否使用...打包出来的文件中，直接就没有了 css文件夹取而代之的是整合起来的一个 js文件，负责在一开始就注入所有的样式首屏加载文件数减少，但体积变大，最终测下来速度没有太大差异所以，是否要css拆分就见仁见智

9741 0

js截屏以及three.js场景截屏

来来来，说正事在手机端截屏完全不需要前端动什么脑子，但是在网页上截屏就很头疼了，我这里介绍两种情形，针对普遍和某一特殊功能需求 1、js截屏插件html2canvas.js 这个插件真的很好用，而且GitHub... js: html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild...(canvas) }); 2、js原生代码截屏如果你只是要截取canvas里面的内容，那就很简单了。...因为我是用在three.js这个3d项目的场景里面，所以没用过这个库的朋友可能没遇到过bug。那就是截屏出来的图片是空白的，场景scene后期渲染的比如灯光，加载的模型都没有截图截下来。...antialias: true, alpha: true, preserveDrawingBuffer :true }) 第二种方法就是在截图之前先渲染一下场景和相机，就不会实时刷新屏幕，导致我们截屏下来的是空白了

8.6K2 0

性能优化三部曲之二——通用纯前端优化首屏时间

背景：对构建的改造已经完成，目前构建的能力可以较为灵活地支撑进一步的优化希望进一步减少首屏时间，将首屏时间控制在2秒以内页面情况：优化之前，并没有上报首屏时间，页面加载时间约为2.4秒。...将css放在head标签内，为了避免阻塞将js放在底部。因此页面渲染完成后，还需要等待js的加载，js拉取数据以及js的渲染。这便大大地减慢了首屏及加载时间。...根据上述的模型，我们可以将首屏优先模式总结为三个原则，一是首屏数据拉取逻辑置于顶部，二是首屏渲染css及js逻辑优先内联HTML，三是次屏逻辑延后处理和执行。...**原则一：**首屏数据拉取逻辑置于顶部，是为了数据能够第一时间返回，相比起将数据拉取逻辑放在外部资源会少了一个JS资源加载的往返时间。...**原则二：**首屏渲染css及js逻辑优先内联HTML，这是为了当HTML文档返回时CSS和JS能够立即执行。但要注意的是HTML文档最好不要超过14kb。

2.3K9 0

Q 前端首屏加载优化记录

结论：html解析过程中，存在非首屏需要的资源进行加载，并形成阻塞，导致关键渲染路径过长，从而影响页面的加载性能优化方案导致页面加载慢的问题基本上已经定位出来，那么接下来需要针对用户的部署环境，做针对性的优化...那么我们改变一下思路，是不是可以采用分段式渲染的方式，将首屏的打开速度再提升一个档次。...既然如此，我们能不能进一步减少首屏的代码体积，将依赖后端数据渲染的内容进行懒加载，这样就能既减少首屏所需要的代码量，也可以让懒加载的代码和数据请求同时进行。进一步优化首屏速度呢。...而且整个首页高度依赖后端进行渲染，在无法提供SSR服务的前提下，而且也需要依赖js运行时获取接口数据才能正常渲染，首页中的首屏加载代码携带这些内容组件的代码将毫无意义，所以决定将红框中的组件代码全部进行懒加载处理...二期优化方案主要是对于首屏所需要的代码优先加载，对于页面中与接口数据高度依赖的模块，统一采用懒加载的方式，可以让用户更快的看到页面的呈现。

9542 0

【前端监控】单页应用首屏测速

首屏时间计算的一个优化点 1、网络原因导致 img 加载超过既定3s，从而首屏时间不准确 1、更新资源以及计算的时间基点在我们记录DOM 渲染时间的时候，使用 performance.now ，而...这部分然后spa 计算得到的首屏时间中，加上这部分就会得到一个比较完善的首屏时间但是我认为这里并不是强制要加上的因为直接访问和spa切换访问，本来动作就不一样，时间基点不一样，所以没有公共部分是合理的...但是实际上还是仍然有这部分需求，想要首屏时间尽量在同一比较线上，所以需要支持自定义，通过一个参数去决定是否需要加上这部分 7、img 加载超过3s，导致首屏计算不准确在之前的首屏计算中，我们会设置一个定时器...，3s 或者5s，为了保证 img 加载完毕，然后再计算首屏时间。...这样首屏时间就是错误的对此，主要有两种想法 1、超过3s 或者5s，如果存在 img 元素，但是 img 没有加载完毕，那么就认为首屏时间是 3s 或者 5s。

1.7K3 0

前端优化：首屏加载速度的实践

，那么如何提升网页的首屏加载速度，成为了前端开发者必须面对的问题。...本文将从多图片懒加载、避免用户多次点击请求以及骨架屏原理等方面，简单分享一下前端优化首屏加载速度的策略优化。欢迎大家在评论区留言交流。...这样可以在保证用户体验的前提下，有效减少首屏加载时间。...避免用户多次点击请求还有一种情况在前端开发中经常遇到，那就是在网页中有些功能可能需要用户进行多次点击或输入操作才能触发，但是如果这些操作会导致额外的网络请求或数据处理，那么就会增加首屏加载的时间，为了避免这种情况...我个人觉得前端优化首屏加载速度需要从多个方面入手，借助通过采用多图片的懒加载、避免用户多次点击请求以及使用骨架屏等技术手段，可以有效提升网页的首屏加载速度提升用户体验，但是也需要注意在优化过程中保持代码的清晰和可维护性

2124 1

微信小程序首屏耗时优化

首屏耗时与用户设备、所在网络环境、程序代码有很大关系。线上环境有2/3的运气成分。 2. 理论上相同地域访问 https 比访问 ip 慢，但小程序要求必须使用 https。 3....小程序启动时由微信加载代码包，与服务域名无关，进入页面后才会发起首次网络请求，某些用户环境出现 ERR_CONNECTION_RESET，导致上报的 API 接口及首屏耗时因网络不通畅爆表。...首屏优化分析：提高网页的性能一般要包括优化加载的速度和程序执行的流畅度；而加载速度又可以优化服务端响应的时间（包括代码包的下载时间，网络请求接口的响应时间，互联网的图片及字体等资源文件）和页面自身加载和渲染的时间...亲测使用骨架屏只会让人感觉页面非白屏了，但会增加首屏的时间。业务逻辑 1. 所有新用户（首次访问）最初进入小程序时，页面和 data 中的数据都是一样的。...优化效果：如下图腾讯云前端性能监控显示大部分地域首屏耗时在 0-0.5s 之间： [RUM 首屏耗时截图] [某测速网站 DCDN 截图] 上述首屏耗时优化效果最终评估平台为：腾讯云前端性能监控

2.1K3 0

Vite 的首屏性能为什么不好？

Vite 给人一种又快又慢的感觉，快主要体现在 DevServer 的启动和热更新上，但随之带来的问题是，首屏性能不好以及页面加载时间长的问题。那为什么 Vite 的首屏性能不是怎么好呢？...可以粗略的得出一个结论： • 总时间 = Vite Server 启动时间 + 首屏时间 • 首屏时间 = Max（所有静态资源请求处理时间，依赖预构建时间） Vite Server 启动时间严格来说...，Server 启动时间，不算在首屏性能中，不过也值得我们拿出来研究一下。...这也是 Vite Server 启动快的原因，但这同时也会带来更长的首屏时间。项目规模的变大，对首屏时间的影响？...，使用的模块越多，需要构建的模块就越多，时间就越长因此，项目规模越大，首屏时间就会越慢。

1K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭