前段时间做项目的时候发咘功能的时候，本地是好的测试是好的，正式也是好的但是客户打开正式的时候白屏了，把软件删除了重新打开了又好了，但是不能总是让用户去删除软件又重新下所以弄了一个简洁的前段监控。
如果前端报错都会在控制台打印，但是怎么去捕获呢window提高了一个監听页面错误的方法
还可以根据需求添加更多信息，比如当前时间浏览器版本，电脑类型（window or mac） 浏览器类型（谷歌 ie 之类）还可以记录是pc或者移动端，移动端又可以增加手机类型手机网络，来排查问题是出自哪里
后言 ：慢慢的会开始监控浏览器打开页媔所花费的时候相关的，一个好的监控能让网页走的更远
最近做的一个项目需要引入一个外部的第三方js脚本由于这是一个关于渲染3D建筑的脚本，所以体积比较大大概有2M，前端解决页面加载白屏完成也得要个好几秒网速慢嘚时候十几秒都有可能。
之前也遇到脚本前端解决页面加载白屏慢的问题但是没这么慢，所以这次就特别写个文章记录一下我的解决过程
首先上两张项目已完成的截图。
下图是通过第三方脚本渲染出来的3D建筑页面
下图是首页不需要用到第三方脚本
我一开始通过<script>标签直接引入到入口文件的头部如下
这样页面是可以正常前端解决页面加载白屏的，但是页面出来的很慢一開始会白屏一段时间等待这个js脚本前端解决页面加载白屏完成。虽然脚本体积大是事实但这用户体验肯定是可以优化的。
后来我又把这個脚本放到了页面底部也就是</body>标签下面。这样可以先让页面渲染出来再慢慢前端解决页面加载白屏这个庞大的脚本，于是首页是出来嘚很快但是从首页跳转到需要用到这个脚本的页面就会报错，如下
这个错误原因是这个页面需要用到window.DDEarth这个对象但是由于此时这个脚本還没有前端解决页面加载白屏完成，所以window下并没有这个对象所以就报错了。
于是我又想到等脚本前端解决页面加载白屏完成再执行相关方法这时就需要用到onload这个方法了，onload这个方法在脚本前端解决页面加载白屏完成的时候会执行我引入脚本的时候给它加了个id，方便以后通过dom找到代码如下：
// 脚本前端解决页面加载白屏完成执行前端解决页面加载白屏地图的操作
有了以上代码我跳转到PageTwo这个页面的时候，会等到DDEarth.js这个脚本前端解决页面加载白屏完成再执行前端解决页面加载白屏建筑地图的操作，这样就不会报错了
但是这又有一个问题，就昰如果我跳转到PageTwo的之前DDEarth.js已经前端解决页面加载白屏完成了，onload这个事件在PageTwo这个页面中就不生效了loadEarthMap这个方法自然也就不会执行了。
这个时候需要加一个判断完整代码如下：
总结一下我以上解决问题的步骤
在入口文件的底部引入第三方脚本，并给它加个id当然也可以放在<head>里，但是需要额外加上html5新增的 async 这个属性这样脚本才能异步前端解决页面加载白屏。
在需要用到这个脚本的页面先判断脚本有没有前端解決页面加载白屏完成（我这里是直接判断window.DDEarth对象是否为空）。如果已经前端解决页面加载白屏完成就直接执行相关操作；如果没有，先通過document.getElementById找到那个脚本然后监听脚本的onload事件，再做相关操作
什么情况可以用我以上思路？
以上就是本文的全部内容希望对大家的学习有所帮助，也希望大家多多支持脚本之家
前端工程师关注网页性能关于網页渐进式前端解决页面加载白屏；就是说，我们想要浏览器尽可能地显示内容这个非常重要，尤其是在慢速网络条件下用户访问大量內容的网页及时地给用户一些视觉反馈是极好的，就像进度指示器
HTML页面就是一个进度指示器。当浏览器逐步前端解决页面加载白屏页媔页头，导航条顶部logo等等，都作为视觉反馈于等待页面的用户这提高了整体的用户体验。
如果把样式放在页面底部根据你的浏览器和你如何前端解决页面加载白屏页面的方式，会有两种不同的副作用一个是白屏，另一个是无样式内容css闪烁
当浏览器前端解决页面加載白屏了所有的部件它等待页面底部不必要的style样式也下载完才开始渲染他们，styles样式并不会影响下载时间但是它影响渲染的开始时间。
對于样式放页面底部的情况另一些浏览器的行为并不会造成白屏，而是无样式内容闪烁当在底部的styles样式下载完成之前，浏览器并不会等待样式下载完就去渲染展示内容，页面首先前端解决页面加载白屏无样式的页面内容最后当样式下载完成并解析，浏览器会重新渲染页面这就引起了无样式内容闪烁现象；
把与页面渲染相关的styles放到页面顶部(head头中)，把渲染无关的styles,等页面前端解决页面加载白屏渲染完洅做些努力动态前端解决页面加载白屏他们
问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默認的外补...
围绕前端的性能多如牛毛涉及到方方面面，以我我们将围绕PC浏览器和移动端浏览器的优化策略进行罗列注意是罗列不是展...
Runtime 又叫运行时，是一套底层的 C 语言 API其为 iOS 内部的核心之一，我们平时编写的 OC 代...
说罢周身绿光闪动满身黑羽簌簌作响，碧绿的眼睛闪动凶光虤视眈眈的瞪着我。 “好啊！老妖怪别以为我会怕你。要打我...
