document.readyState:判断文档是否加载完成.firefox不支持. 这个属性是只读的,传回值有以下的可能: 0-UNINITIALIZED:XML 对象被产生,但没有任何文件被加载.1-LOADING:加载程序进行中,但文件尚未开始解析.2-LOADED:部分的文件已经加载且进行解析,但对象模型尚未生效.3-INTERACTIVE:仅对已加载的部分文件有效,在此情况下,对象模型是有效但只读的.4-COMPLETED:文件已完全加载,代表加载成功. document.onread

众所周知,在项目中如果在资源加载请求还未完成的时候,由于阻塞机制,会出现首页白屏的问题,产生很差的用户体验.本文以react为例,提供一个解决方法. 解决原理:使用 onreadystatechange 去监听 readyState,在资源加载完成之前加载一个只有框架的静态页面,页面不请求数据.当数据请求完成之后再将路由切换到真实的首页. 废话不多说,上代码: main.js import React from 'react' import ReactDom from 'react-dom' i

react 首屏加载优化,原本是在入口HTML文件中加载loading动画,但是部署在测试环境上的时候一直无法显示loading的部分,也是奇怪了,我们测试环境的部署一直跟本地的都不太一样,内外网的转发多次,总感觉会丢掉一些文件. 本次采取的优化方法就是,按需加载,首先需要下载依赖,yarn add react-loadable, index.js页面代码如下: import React from 'react'; import ReactDOM from 'react-dom'; import

Performance — 前端性能监控利器   最近在写一个监控脚本,终于有机会接触到了这一块,整理后写下了本文.Performance是一个做前端性能监控离不开的API,最好在页面完全加载完成之后再使用,因为很多值必须在页面完全加载之后才能得到.最简单的办法是在window.onload事件中读取各种数据. 属性 timing (PerformanceTiming) 从输入url到用户可以使用页面的全过程时间统计,会返回一个PerformanceTiming对象,单位均为毫秒 按触发顺序排列

转载bang大神文章,原文<移动 H5 首屏秒开优化方案探讨>,此文仅仅用做自学与分享! 随着移动设备性能不断增强,web 页面的性能体验逐渐变得可以接受,又因为 web 开发模式的诸多好处(跨平台,动态更新,减体积,无限扩展),APP 客户端里出现越来越多内嵌 web 页面(为了配上当前流行的说法,以下把所有网页都称为 H5 页面,虽然可能跟 H5 没关系),很多 APP 把一些功能模块改成用 H5 实现. 虽然说 H5 页面性能变好了,但如果没针对性地做一些优化,体验还是很糟糕的,主要两部

Vue首屏性能优化组件 简单实现一个Vue首屏性能优化组件,现代化浏览器提供了很多新接口,在不考虑IE兼容性的情况下,这些接口可以很大程度上减少编写代码的工作量以及做一些性能优化方面的事情,当然为了考虑IE我们也可以在封装组件的时候为其兜底,本文的首屏性能优化组件主要是使用IntersectionObserver以及requestIdleCallback两个接口. 描述 先考虑首屏场景,当做一个主要为展示用的首屏时,通常会加载较多的资源例如图片等,如果我们不想在用户打开时就加载所有资源,而是希望

问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长.特别在移动端,单页面应用的首屏加载优化更是绕不开的话题.下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步. 我的项目vue-cli3构建的,vue+vue-router+vuex,UI框架选用 element-ui,ajax方案选用 axios,服务器使用Nginx.用到的这些技术都是现在用的比较广泛的,看到这篇文章,我估计你和我用的技术应该差不多. 第一步:webpack-bundle-analyzer 分析 首页

如何在页面加载完成后再去做某事?什么方法可以判断当前页面加载已完成?document.readyState 判断页面是否加载完成?javascript提供了document.readyState=="complete"方法来解决当前页面加载判断的问题. <script type="text/javascript">   function initView(){         if (document.readyState=="complete

背景: 使用vue + iview搭建的一个后台管理系统,路由已经用了懒加载,加载登陆页面,居然还是需要18S左右,刚到一个新公司,项目经理很委婉的说,看看能不能优化了一下.然后就开始了网上一大堆'vue首屏加载'的搜索... 经过初步优化,终于加载从开始的15S多到现在的不到4S,且看一步一步来... 性能测试工具: Pingdom https://tools.pingdom.com/ 优化具体做法: 项目可能因情况而定,未做优化之前,我的加载情况是这样的: 很显然:加载时间最耗时的是背景图片

获取Bing每日壁纸用作首屏大图 Bing 搜索每天都会更换一张精美的图片作为壁纸,除了特殊时候不太好看外(比如春节那几天),没多大问题.移动端还有上每日故事,与图片现配.现在我的博客首屏图片就是Bing每日壁纸,有没有感觉B格满满^_^.本文将介绍如何把Bing每日壁纸和故事扒到自己博客. 获取API接口 首先我们进入Bing首页,会发现自动转到中国版.不过这没关系,中国版更符合国情,速度也比国际版快一些. 通过抓包,可以发现http://www.bing.com/HPImageArchive

Vue项目部署上线后经常会发现首屏加载的速度特别慢:那么有那写能做的简单优化呢 一.路由的懒加载 路由懒加载也就是 把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件. 结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载. 在router中,我们平时是这样引入组件的: import Foo from './Foo.vue' 文档中指出,如下定义一个能够被 Webpack 自动代码分割的异步组件 const Foo = () => imp

点击上方"前端自习课"关注,学习起来~,所以接下来还会介绍一些它们在优化上的异同 的话,先安装插件 cnpm intall webpack-bundle-analyzer –save-dev 然后在 vue.config.js中对 webpack进行配置 再运行 npm run build --report 会在浏览器打开一个项目打包的情况图,便于直观地比较各个 bundle文件的大小 可以看到 项目中所有的依赖,所有的路由,都被打包进了同一个文件中 另外,在浏览器中,也可以通过 co

前言 之前用 ,所以接下来还会介绍一些它们在优化上的异同 分析 vuecli 2.x自带了分析工具只要运行 npm run build --report 如果是 vuecli 3的话,先安装插件 cnpm intall webpack-bundle-analyzer –save-dev 然后在 vue.config.js中对 webpack进行配置 chainWebpack: (config) => { /* 添加分析工具*/ if (process.env.NODE_ENV === 'prod

前言 现在已经是vue-cli3.x    webpack4.x 的时代了,但是网上很多拆包配置还是一些比较低版本的. 本文主要是分享自己的拆包踩坑经验. 主要是用了webpack4 的 splitChunks 来进行拆包的配置以及在配置中的一些踩坑. 首屏加载的优化主要在于两个方面,一个是减小包的总体积,二是由于把依赖打包进去太大而要进行拆包处理,提高首屏的加载速度. 一.减小包体积 主要在于压缩和去掉无用的代码 压缩可以用webpack的一些插件,服务端gzip压缩 去掉无用代码有 生产环境

Argus 腾讯质量开发平台,官网链接:https://wetest.qq.com/product/argus 主要针对性:H5的游戏性能测试 主要介绍: 独家首屏时间统计: 告别人工掐秒 自动统计首屏加载耗时 细化至每个跳转页面 专利FPS算法: 专利FPS算法更科学地统计H5游戏帧率信息 真实反映衡量游戏流畅度 基础性能数据: 提供FPS.CPU.PSS.流量等性能指标 一次搞定基础数据 自主便捷测试: 测试手机无需ROOT 支持Android全系统 自主测试,场景不受限 支持设备类型 1.

对于单页应用,要在一个页面上为用户提供产品的所有功能,在这个页面加载的时候,首先要加载大量的静态资源,这个加载时间相对比较长.所以我们需要做一些相应的优化,减少响应时间,尽快把首屏显示出来. 1.压缩代码 无论是否为单页应用,代码的压缩都是要做的. 对于vue-cli生成的项目,在Webpack配置文件中使用了UglifyJsPlugin进行代码的压缩: //webpack.prod.conf.jsplugins: [ ...... new UglifyJsPlugin({ uglifyOpti

图片: var img = document.createElement('img') img.src = window.URL.createObjectURL(fileObj.file) // 加载图片成功 img.onload = function() { var canvas = document.createElement('canvas') var context = canvas.getContext('2d') // 清除画布 canvas.width = size canvas.

基于 SSR 的预渲染首屏直出方案 Create React Doc 是一个使用 React 的 markdown 文档站点生成工具.此前在 Create React Doc 中引入了预渲染技术来预先生成对应路由的静态页面,以使基于其搭建的文档站点能享用到 SEO(Search Engine Optimization) 同时加快了首屏访问加载. 新的挑战 Create React Doc 使用预渲染技术获取各页面路由对应的 DOM 结构以生成对应的 HTML 文件,并将静态文件存放于 gh-pa

Nuxt.js(二.解决首屏速度与SEO) 1.普通的Vue SPA初始化加载速度很慢 在传统的web应用中,当用户请求一个页面时,服务器直接返回一个html文件,浏览器直接渲染出来.但是,在vue应用中,这个过程则可能比您所希望的要慢,特别是在网速较慢的情况下.它的步骤如下: 当用户初始请求任何的页面时,服务端都会返回引索页index.html 第二步浏览器需要下载vue相关的Javascript文件 vue引擎初始化并运行 vue路由到相应的页面并加载相关的组件 执行组件内的javascri

1.首屏时间概念 首屏时间是指用户打开一个网站时,直到浏览器首页面内容渲染完成的时间. 2.白屏时间概念 白屏时间即是,浏览器开始显示内容的时间,所以我们一般认为解析完<head>的时刻,或者开始渲染<body>标签就是该页面白屏结束的时间. 3.计算首屏时间和白屏时间 1)首屏时间计算(在body标签后写js代码) new Date.getTime() - performance.timing.navigationStart 2)白屏时间计算 在<head>标签前面加