JS学习

JS代码优化

1.减少属性查找,可以理解为减少链式调用.

var query = window.location.href.substring(window.location.href.indexOf("?"));
修改为
var url = window.location.href; 
var query = url.substring(url.indexOf("?"));

2.尽量减少循环

如果有可能从最大值向最小值循环
如果循环次数是可预见的,那么就展开循环

3.避免双重解释,这里是指setTimeout内部使用字符串,

setTimeout("alert('Hello world!')", 500);
修改为
setTimeout(
    alert('Hello world!')
, 500);

4.最小化语句

4.1 多个变量声明

var count = 5; --很浪费
var color = "blue"; 
var values = [1,2,3];
修改为
var count = 5,
    color = "blue", 
    values = [1,2,3];

4.2 插入迭代值

4.3 使用数组和对象字面量

var values = [123, 456, 789];
var person = {
    name : "Nicholas", 
    age : 29, 
    sayName : function(){ 
    alert(this.name); 
} 
尽量避免person.nikename = 'abc';创建对象属性

5.优化DOM交互

5.1,减少页面更新次数

特别是插入元素,如果需要循环插入,那么就先创建好需要插入的元素然后统一插入.特别是appendChild();

5.2 使用 innerHTML ,如果插入的元素较大,使用innerHTML效率更高一些.

var list = document.getElementById("myList"),
    html = "",
    i;
for (i = 0; i < 10; i++) {
    html += "<li>Item " + i + "</li>";
}
list.innerHTML = html;

5.3 使用事件代理

5.4 减少对HTMLCollection的访问.他的开销太大了

判断页面是否在和用户交互

ChatGPT其实都可以搜索到，但是为了防止它抽风所以记录一下。

使用监听

document.addEventListener("visibilitychange", function () {
        if (document.visibilityState === 'visible') {
            console.log("visibilitychange-页面可见");
        } else {
            console.log("visibilitychange-页面不可见");
        }
    });

使用dom属性

document.hidden

• 定义: 返回一个布尔值，表示当前文档是否处于隐藏状态。
• 支持: 所有现代浏览器（Chrome、Firefox、Safari、Edge等）。

2. document.msHidden

• 定义: 这是一个专门为 Internet Explorer 提供的属性，用于指示页面是否可见。
• 支持: 仅在较旧版本的 Internet Explorer 中有效。

3. document.webkitHidden

• 定义: 这是一个为 Safari 浏览器提供的属性，用于检测页面的可见性。
• 支持: 主要在早期版本的 WebKit 浏览器中使用。

     if (document.hidden || document.msHidden || document.webKitHidden) {
            console.log("页面隐藏了");
        } else {
            console.log("页面未隐藏");
        }

获取位置信息

• 需要注意的是使用 HTTPS: 大多数现代浏览器要求在 HTTPS 环境下才能使用 Geolocation API。如果您的网站是通过 HTTP 提供的，请将其迁移到 HTTPS。

 function getLocation() {
        console.log("getLocation");

        if ("geolocation" in navigator) {
            // 获取当前位置
            navigator.geolocation.getCurrentPosition(
                function (position) {
                    console.log('???????');

                    // 成功回调：处理获取到的位置
                    const latitude = position.coords.latitude;  // 纬度
                    const longitude = position.coords.longitude; // 经度
                    console.log(`纬度: ${latitude}, 经度: ${longitude}`);
                },
                function (error) {
                    // 失败回调：处理错误
                    switch (error.code) {
                        case error.PERMISSION_DENIED:
                            console.error("用户拒绝了位置请求。");
                            break;
                        case error.POSITION_UNAVAILABLE:
                            console.error("位置信息不可用。");
                            break;
                        case error.TIMEOUT:
                            console.error("请求超时。");
                            break;
                        case error.UNKNOWN_ERROR:
                            console.error("发生了未知错误。");
                            break;
                    }
                },
                {
                    timeout: 10000 // 设置超时为10秒
                }
            );
        } else {
            console.error("浏览器不支持 Geolocation API。");
        }
    }