ESP32网页控制一 使用JS减少代码加速响应速度

        ESP32由于其具备WIFI还有可以使用http协议，所以很多配置还有控制功能都可以通过网页来实现的，例如直接控制ESP32的PWM输出或GPIO电平。

        上述情况通常都会应用到很多个HTML元素组件在网页之中，如果通过在代码中使用HTML字符串加C混编的方式参考以下示例。

        首先每一次访问都需要去重复生成字符串操作浪费时钟周期，同时每一次的生成都会携带大量重复数据给浏览器增加传输时间，如何优化这一部分代码减少传输的数据量就非常重要。

        JavaScript就能够实现对网页的动态刷新，并且现在的主流浏览器都采用Chrome内核几乎不需要考虑JS代码的匹配问题。下面一段代码就是通过JS实现对HTMl元素的动态生成示例。

      上述示例代码由三部分构成CSS样式、Body中的HTML元素、JS代码，下面着重针对JS代码部分进行讲解。

        上述代码的核心思想就是将常用到的代码编写成简短的方法便于调用和节省代码中的字符数量。

        上述代码定义了页面中包含元素所属的名字以及所用到的变量以及颜色，便于JS循环。

            上述代码则在页面加载时是动态生成18个通道显示条实现对通道数据的显示并且对每一个通道条的ID进行命名方便后期通过Ajax修改显示数据。

             最终效果展示。

    下一篇介绍如何使用AJAX实现数据的刷新和获取。