JS小案例

芜湖芜湖

于 2022-08-28 20:17:30 发布

阅读量151

点赞数

文章标签： javascript servlet 前端

本文链接：https://blog.csdn.net/tonysxiaobao/article/details/126573736

版权

本文探讨了JavaScript在前端性能的重要性，包括代码大小对下载速度的影响，JavaScript在浏览器中的解释过程，以及通过DOM API进行交互时可能导致的性能问题。文章列举了积分递增、按钮转变、活动倒计时等小案例，并分享了学习心得，指出在开发大型Web应用时，如Gmail和Yahoo! Mail，JavaScript性能优化的必要性。

摘要由CSDN通过智能技术生成

1、积分递增小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
    </style>
</head>
<body>
    <p id="qw">刷了<span id="er"> 1</span>积分</p>
    <ul></ul>
    <script>
        var qw = document.querySelector('qw');
        var ul = document.querySelector('ul');
        var num = 1;
        setInterval(time, 10000);
        function time() {
            var date = new Date().toLocaleString();
            var li = document.createElement('li');

            li.innerText = "时间" + date + '' + 1 + "积分";
            ul.appendChild(li);
            er.innerText = num;
            num++;
            document.getE
        }
    </script>
</body>

</html>

2、按钮转变小案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    <style type="text/css">
        a{
            width: 100px;
            height: 25px;
            font-size: 12px;
            display: block;
            text-decoration: none;
            color:white;
            text-align: center;
            line-height: 25px;
           background: blue;
            
        }
    </style>
        <script>
            window.onload= function(){
                var olink=document.getElementById("link");
                var count=0;
                var num = 0;
                olink.onclick = function(){
                    count = count +1;
                    if(count%2==0){
                        olink.style.backgroundColor="blue";
                    num+=1;
                    olink.innerHTML= num
                    }else{
                        olink.style.backgroundColor="red";
                    }
                }
            }
        </script>
    </head>
    <body>
           <a href="#" id="link" javascript:void(0)></a>
    </body>
</html>

3、活动倒计时小案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
</head>

<body>
    <p>活动截止时间：2022-08-28 23:00：00</p>
    <p>还剩：<span id="day">0</span>天<span id="hour">0</span>小时<span id="min">0</span>分<span id="second">0</span>秒</p>
    <script>
        var endTime = new Date("2022-08-28 23:00:00").getTime();



        var dayObj = document.getElementById("day");
        var hourObj = document.getElementById("hour");
        var minObj = document.getElementById("min");
        var secondObj = document.getElementById("second");

        setInterval(function () {
            var nowTime = new Date().getTime();
            var differTime = endTime - nowTime;
            // console.log("------");
            var day = Math.floor(differTime / 1000 / 60 / 60 / 24);
            var hour = Math.floor(differTime / 1000 / 60 / 60 % 24);
            var min = Math.floor(differTime / 1000 / 60 % 60);
            var second = Math.floor(differTime / 1000 % 60);

            dayObj.innerText = day;
            hourObj.innerText = hour;
            minObj.innerText = min;
            secondObj.innerText = second;


        }, 1000);
    </script>
</body>

</html>

4、学习心得

性能对任何编程语言或系统来说都是一个很重要的问题，对JavaScript来说更是如此。

　　JavaScript代码是从服务器原封不动地发送到客户端的，代码越大，下载所需的时间和带宽越多。

　　JavaScript在浏览器中解释，而不是编译好的，与其他语言有着一定的区别。

　　JavaScript代码通过DOM API修改HTML页面来与用户交互。对JavaScript开发人员来说，这是功能强大的高级模型，但对DOM所做的每个简单修改都将导致浏览器的页面渲染引擎执行一系列复杂的操作。对DOM看似细微的修改常常导致需要占用比预期的多得多的CPU周期。

　　诸如Gmail和基于Ajax的Yahoo! Mail（编写本书时仍处于测试阶段）等Web应用程序都对JavaScript性能提出了挑战。它们在最新的计算机中可能运行顺畅，但在较旧的计算机中可能反应迟钝，而在这些旧计算机中运行相应的桌面应用程序没有任何问题。