Example:
<html>
// your code right here
...
...
<body onLoad="init()">
// your code right here
...
...
</body>
<html>
[导读]
HTML页面中直接使用onLoad()来绑定方法，保证：
页面元素加载完成后才开始执行方法，避免selector获得的元素为null
但是，页面运行效果在chrome中显示正常，没有出错，但页面上传至服务器后再访问，页面显示为空，没有出现该出现的元素，为何为出现这种情况？
[关键词]
onLoad, 页面资源加载，浏览器兼容性
[提问]
- 明明本地chrome测试正常无误，服务器上传后访问失效
- Javascript新的语法支持与浏览器兼容性
[正文]
1. Bug分析
页面元素没有出现，问题归结到onload函数，没有正确执行。而onload正确执行的前提是页面元素全部加载完成后才会执行，而且：
页面从上至下加载，直到onload处，这之间都有可能
Jianshu.png
2. Bug排查
-
服务端
- 检查服务器上资源，发现包括图片在内的都是静态资源，没有网络请求。
- ajax的获取接口没有异常
-
客户端
打印log，客户端代码排查发现有一个函数的执行不正常，虽然进入函数内部执行，不过遇到了这个function example () { for (let i = 0; i < arr.length; i++) { // Ⅰ // code here var _id = `item${arr[index].id}` // Ⅱ // code here } }发现两处I, II在加载是挡住了（没有执行）
- I. 用for循环中使用了let声明变量
- II. 使用了模板字符串
-
结论
ES6的语法不支持
3. Bug解决
变量声明使用var，模板字符串使用字符串拼接代替
function example () {
for (var i = 0; i < arr.length; i++) { // Ⅰ
// code here
var _id = 'item' + arr[index].id // Ⅱ
// code here
}
}
再次上传服务器，正常
浏览器的兼容性问题我经常只会考虑到css，没有考虑到js这一层语法是否支持，受教了
END
