精华内容
下载资源
问答
  • 移动端白屏的解决方案--其实也就是性能优化方面
    2020-10-20 09:11:27

    白屏的基本原因可以归结为网速和静态资源

    1)css文件加载需要一些时间,在加载的过程中页面是空白的

    解决:可以考虑将css代码前置和内联

    2)首屏无实际的数据内容,等待异步加载数据,再渲染页面,导致白屏

    解决:首屏直接同步渲染html,后续的滚屏等操作再采用异步请求数据和渲染html

    3)首屏内联js的执行,会阻塞页面的渲染

    解决:尽量不在首屏html代码中放置内联脚本

    还有一些其他的解决办法:

    1)在服务器端,使用模板引擎渲染所有页面

    1、减少文件加载体积,如html压缩,js压缩

    2、加快js执行速度 比如常见的无限滚动的页面,可以使用js先渲染一个屏幕范围内的东西

    3、提供一些友好的交互,比如提供一些假的滚动条

    4、使用本地存储处理静态文件

    更多相关内容
  • 很多无线端都使用前端模板进行数据渲染,在糟糕的网速情况下,一进去页面,看到的不是白屏就是 loading,这就是白屏问题。 此问题发生的原因基本可以归结为网速、静态资源。 1、css文件加载需要一些时间,在加载...

    很多无线端都使用前端模板进行数据渲染,在糟糕的网速情况下,一进去页面,看到的不是白屏就是 loading,这就是白屏问题。

    此问题发生的原因基本可以归结为网速、静态资源。

     

    1、css文件加载需要一些时间,在加载的过程中页面是空白的。

    解决:可以考虑将css代码前置和内联。

    2、首屏无实际的数据内容,等待异步加载数据再渲染页面导致白屏。

    解决:在首屏直接同步渲染html,后续的滚屏等再采用异步请求数据和渲染html。

    3、首屏内联js的执行会阻塞页面的渲染。

    解决:尽量不在首屏html代码中放置内联脚本。

     

    还有一些其他的解决办法:

    根本原因是客户端渲染的无力,因此最简单的方法是在服务器端,使用模板引擎渲染所有页面。同时

    1、减少文件加载体积,如html压缩,js压缩

    2、加快js执行速度 比如常见的无限滚动的页面,可以使用js先渲染一个屏幕范围内的东西

    3、提供一些友好的交互,比如提供一些假的滚动条

    4、使用本地存储处理静态文件。

     

    参考:

    移动端白屏的解决与优化方案

    END

    展开全文
  • 主要介绍了Vue-cli3 项目在安卓低版本系统和 IE 上白屏问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 11)会出现白屏问题。 首先要知道的时候白屏问题应该是js报错 js运行中断 一些router进的页面也没发加载,而这些js大都是因为不支持es6语法而导致的。那知道怎么知道你的js是否报错了呢,因为我们开发调试的时候...

    最近的项目中遇到了有些低版本系统(如ios<11)会出现白屏问题。

    首先要知道的时候白屏问题应该是js报错 js运行中断 一些router进的页面也没发加载,而这些js大都是因为不支持es6语法而导致的。那知道怎么知道你的js是否报错了呢,因为我们开发调试的时候大都用Chrome,Firefox这样的浏览器,内核较为先进,不会因为不识别es6而报错。所以首先用你的微信pc客户端自带的浏览器,看是不是能打开,如果打不开大多数这个js问题,但是由于微信自带浏览器无法调试,所以看不到控制台报错。

    这时候你可以下载一个百度浏览器,他的版本是这样的。

    很多es6的问题到这里都会报错。

    检查错误可以用这个浏览器,但是我们要知道的是vue webpack已经用babel进行es6的转码了,但是还会出现es6的语法问题,说明es6还有部分没被转化为es5,导致这部分js未被转化的极大可能原因就是引入的插件所含有的es6.这时候先安装'es6-promise'和'babel-polyfill'。如果还没有没被解决,那么要从插件的原因找起,

    例如我在引用swiper4.0+时候一直会有dom7和ssr-window的报错问题,就是这两个的es6语法问题导致的,那么我可以swiper降为3.0加的

    npm install swiper@3.4.0 --save

    或者就用4.0的,但是要在webpack.base.config.js中配置

    {
            test: /\.js$/,
            loader: 'babel-loader',
            query: {
              presets: ['es2015']
            },
            include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client'),resolve('node_modules/swiper'),resolve('node_modules/dom7'),resolve('node_modules/ssr-window')]
          },

    主要是resolve('node_modules/dom7'),resolve('node_modules/ssr-window')这两个。

    这里只是引用个例子,主要说的是白屏问题大都是es6未被转化的问题,所再找错的时候要结合报错找的出问题的插件,做一些调整。移动端的浏览器内核较为先进了,但也不是都支持es6

    后来还是白屏  就通过vconsole来进行移动端调试  打印报了下面这个错

    vconsole使用介绍:https://www.jianshu.com/p/388e31a451ea 

    应该是项目中用了fetch导致的   解决方法:

    安装依赖"whatwg-fetch": "^1.0.0",

    然后在webpack.base.conf.js中改成:

    entry: {
      app: ["whatwg-fetch", "./src/main.js"]
    },

    终于计划通!

    参考https://www.cnblogs.com/Lough1992/articles/9755293.html

    展开全文
  • 低版本手机es6兼容问题,ie兼容问题,以及ios低版本页面白屏 引入babel-polyfill webpack.base.conf.js修改为 entry: { app: [‘babel-polyfill’, ‘./src/main.js’] } vue-cli项目config/index.js文件,...

    一、移动端白屏及兼容问题(仅只在微信公众号运行过,其他浏览器情况未知)

    1. ios8.x版本flex布局兼容问题
      需加上-webkit-前缀

    2. 低版本手机es6兼容问题,ie兼容问题,以及ios低版本页面白屏

    npm install --save-dev babel-polyfill
    
    // main.js中引入
    import "babel-polyfill";
    
    // webpack.base.conf.js文件中修改
    entry: {
      	app: ['babel-polyfill', './src/main.js']
    }
    
    1. vue-cli项目config/index.js文件,sourceMap导致ios9.x版本访问白屏,解决方法
    productionSourceMap: false
    
    1. npm安装依赖导致的白屏
      npm6.9.0下载包,打包项目后会导致ios9.x版本访问白屏
      使用npm6.4.1版本,再指向淘宝镜像,重新下载安装包,在build完美解决

    二、其他踩坑集锦

    1. ie浏览器、ios设备new Date('2020-05-20 20:20:20').getTime()日期时间戳获取NAN问题
      日期需要以 ‘/’ 符号拼接,如:2020-05-20 20:20:20 需改为 2020/05/20 20:20:20,再进行时间戳转换

    2. 前端对接网易七鱼客服踩坑:

    ysf('config', {
    	uid: ''	// (若没有uid,则传空字符串'', 若传null会导致七鱼获取访客用户信息异常)
    })
    
    1. 安装sass-loader后报错:TypeError: this.getOptions is not a function
      解决办法:卸载旧版本,安装符合的版本,经测试以下版本解决,其他版本可自行测试
      "node-sass": "^4.14.1"
      "sass-loader": "^8.0.2"
    2. ie浏览器 button子元素无法触发点击事件
      不使用button按钮,或将需要点击的子元素放button外
    3. ie浏览器使用new FileReader()下载blob文件报错:传递给系统调用的数据区域太小
            let blob = res;
            // ie blob文件下载
            if(navigator.msSaveOrOpenBlob) {
              navigator.msSaveBlob(new Blob([blob], { type: 'text/csv;charset=utf-8;' }), 'filename.xls')
            } else {
    	        const fileReader = new FileReader();
    	        try {
    	          fileReader.readAsDataURL(blob);
    	        } catch (err) {
    	        }
    	        // 读取文件成功
    	        fileReader.onload = (event) => {
    	          let a = document.createElement('a');
    	          let _fileName = 'filename.xls';
    	          a.download = _fileName;
    	          a.href = event.target.result;
    	          document.body.appendChild(a);
    	          a.click();
    	          document.body.removeChild(a);
    	        }
    	        // 读取完成(成功/失败)
    	        fileReader.onloadend = (event) => {
    	          console.log('onloadend')
    	        }
    		}
    

    三、实用工具合集
    10.华为云OBS文件上传文档 部分参数用法及demo比官网更细致

    展开全文
  • el-row中插入东西时,必须使用el-col进行包裹才可以。
  • vite 项目部分安卓机型白屏或报错

    千次阅读 2022-01-17 15:16:32
    vite打包的项目在部署安卓机型中(主要是蓝绿厂的)会直接报兼容性错误,主要原因是因为 <script type="module">在webview内核小于63的情况下无法识别 引入@vitejs/plugin-legacy也无法解决 ...
  • vue添加路由后页面渲染不出来,白屏原因:vue版本和vue-router版本不对 原因:vue版本和vue-router版本不对 我的vue是3.0的,然后install的vue-router用4以上的
  • 开始学习react,简单写了一个demo,react-redux,createBrowserHistory,自己测试了一下,毕竟用一个新的工具,兼容性问题是很重要的,发现在一些低版本的安卓浏览器白屏,查了一下,原来是babel的问题 Babel默认只...
  • 解决vue移动端项目pdf显示问题

    千次阅读 2020-12-18 15:32:05
    解决vue移动端项目pdf显示问题 import pdf from ‘vue-pdf-signature’ import CMapReaderFactory from ‘vue-pdf-signature/src/CMapReaderFactory.js’ components: {pdf}, create () { this.getPdfs() ...
  • ios中iframe页面出现白屏问题

    千次阅读 2019-03-22 09:54:00
    最近用ionic3开发的一个项目在ios中出现了白屏的问题 banner轮播图跳转网页 使用了iframe 但是却时不时的出现白屏现象 在android中一切正常 网上查资料发现 是因为ios不允许访问外部链接 需要进行配置 在config....
  • 骨架屏就是在页面未渲染完成的时候,先用一些简单的图形大致勾勒出页面的基本轮廓,给用户带来更好的体验。这篇文章主要介绍了vue 移动端注入骨架屏,需要的朋友可以参考下
  • 这段时间公司做pdf在线预览,用vue-pdf插件做了一个,在打包手机测试的时候遇到ios移动端打包白屏(android和pc端正常),开始认为是swpier插件问题,经过测试是veu-pdf插件的问题,现在vue-pdf打包会多出一个xxxxx....
  • $(document).bind("mobileinit", function() { if (navigator.userAgent.indexOf("Android") != -1) { $.mobile.defaultPageTransition = 'none'; $.mobile.defaultDialogTransition = 'n...
  • 如题,设置preload为meta后,pc端video可以加载出海报,移动端却不行
  • 关于移动端在ios白屏问题以及element-ui中表格的文字滚动消失问题 可以通过transform:translateZ(10),给父元素增加transform:perspective(10px) 解决此问题
  • 今天小编就为大家分享一篇解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue项目移动端 ios9.x 低版本白屏问题

    千次阅读 2020-05-12 15:36:30
    vue项目移动端 ios9.x 低版本白屏问题 作为一个问题小白,踩坑那都是常有之事,开发移动端是让我最头疼的事。这个白屏的问题也不是第一次遇到了,这次一定要记录一下,让自己长个记性,若是有不对的地方,欢迎各位...
  • 项目技术栈:基于Vue全家桶做的一个移动端类似WebApp的项目,使用到的第三方库有:mint-ui, echarts,momentjs。 项目痛点:白屏时间过长 一、白屏时间过长分析 通过访问线上环境,结合Chrome devtool
  • js报错分为两种:语法错误和运行错误1、js引擎在代码载入时进行语法分析,如果js写的不规范则语法分析通不过。这时候的错误称为语法错误2、语法分析通过了,js引擎会执行代码。执行期间发生的错误称为运行错误不同...
  • webview嵌套vue的移动端应用返回上一个页面会遮挡元素,白屏问题 最近开发的一个手机端导购应用出现了返回上一页面时会出现部分元素被遮挡,有时是整个页面就白屏的状态,但是你点击对应的位置他还是可以进行相应的...
  • 前言 新项目基本开发完成,开始真机调试。发现ios9.3的手机上项目是空白的????。 定位问题 开始一通搜,发现很多人说了原因就是es6模块没被解析成浏览器识别的代码。应该装插件编译下,那具体哪个插件或者文件导致的...
  • H5 移动端调试

    2021-03-15 10:07:23
    因为移动端操作系统分为iOS和Android两派,所以本文的调试技巧也会按照不同的系统来区分。寻找最合适高效的方式,才能让你事半功倍。 文章会列举目前适合移动端调试的多种方案,快来选择你的最佳实践吧! 二、...
  • 移动端性能监控方案

    2018-08-22 12:20:45
    随着移动互联网向纵深发展,用户变得越来越关心应用的体验,开发者必须关注应用性能所带来的用户流失问题。 据统计,有十种应用性能问题危害最大,分别为:连接超时、闪退、卡顿、崩溃、黑白屏、网络劫持、交互性能...
  • 数据量大时往往会卡顿,采用ajax分次加载,更好的用户体验
  • H5页面白屏

    千次阅读 2019-06-02 12:17:58
    然后出现白屏,暂时解决方案是移动端增加异常处理逻辑,允许用户主动刷新操作. 2.排查过程 (1)移动端开发人员代码review,后端接口开发人员拨测,验证OK (2)后端接口开发人员排查日志,无明显异常 (3)大部分用户APP正常...
  • 用户在打开应用时,白屏的时间也越来越长,带来了不好的使用体验,如何才能做到 当用户点击应用图标后,立即显示指定内容而不是白屏呢?解决方案大多数App在每次打开时都会弹出一个Splash页面,并在清单中为这个...
  • 低性能移动端 怎么去处理 首页白屏 问题 公司用的混合开发技术是cordova,所以速度是看整个页面在webview中的加载和渲染速度 公司采用的是板子性能比较差,Android版本也才只有4.0,每次打开应用真的是非常慢...
  • 首页白屏的引发的思考(一)

    千次阅读 2020-12-19 21:48:54
    最近在做项目的优化,除了整体的架构更改,我们发现在每次加载的时候,首页白屏的问题十分明显。为什么会出现白屏现在的前端框架, React、Vue、Angular 三大巨头已经占据了主导地位,市面上大多数前端应用也都是...
  • H5白屏问题

    千次阅读 2020-12-19 21:48:45
    前言前阵子弄了灰度环境,H5这边需要给灰度环境的接口加上Cookie,配置的期间遇到一些Cookie问题以及白屏在此记录下1、H5请求接口带不上Cookie解决方法:前端使用了 webpack 对项目进行打包,其中 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,162
精华内容 1,264
关键字:

移动端白屏