-
HTML5的NetworkInformationAPI可检测网络状态，通过navigator.onLine获取设备联网状态，结合online/offline事件监听网络变化，并利用navigator.connection获取连接类型、带宽和延迟等信息，实现根据网络状况调整资源加载、优化用户体验的功能，需注意浏览器兼容性并做好降级处理。
-
生成器通过function定义，可暂停和恢复执行，yield实现中断与返回；异步生成器结合asyncfunction和forawait...of，支持异步数据流处理；在Redux-Saga中用于管理副作用，实现同步语法写异步逻辑；自定义异步迭代器适用于事件流等场景。
-
Async/Await是JavaScript异步编程的终极方案，它基于Promise并以同步语法简化异步逻辑，通过await暂停执行、async函数返回Promise，使代码更直观；其优势在于：1.消除回调地狱，实现扁平化结构；2.支持try...catch错误处理，提升可读性与维护性；3.兼容同步控制流如循环与条件判断；4.调试体验更接近同步代码，堆栈清晰；5.简化并行操作管理。尽管依赖Promise底层机制，但Async/Await让异步代码在风格与逻辑上彻底摆脱“异步感”，成为现代JS开发的标准实践
-
正确使用color属性和transition实现文字颜色平滑过渡，关键是在默认状态设置transition:color，并确保hover时仅改变color值；若使用background-clip:text则需改为监听background的transition；通过will-change优化性能并避免display变化干扰动画触发。
-
HTML实现图片懒加载最直接且现代的方式是使用loading="lazy"属性；2.该属性通过浏览器原生机制延迟加载非视口内的图片，提升性能、节省带宽；3.兼容性良好，主流浏览器均支持，不支持时自动降级为正常加载；4.可结合WebP/AVIF格式、响应式图片、CDN分发和预加载等策略进一步优化图片加载体验。
-
使用flex-grow与mediaqueries可创建响应式工具栏：首先设置toolbar{display:flex}，通过flex-grow:1让内容区自动填充空间，按钮保持固定；在小屏幕下，用@media(max-width:768px)隐藏非必要元素或改为垂直布局，实现适配。
-
使用transform和transition实现高效位移动画。1.用translate()函数对元素进行平移；2.通过transition属性添加平滑过渡效果；3.结合:hover触发交互动画；4.可叠加rotate等变换。该方法性能优于修改margin或left，推荐优先使用。
-
flex-basis结合百分比可实现响应式布局，其值相对于父容器主轴尺寸计算，常与flex-grow和flex-shrink配合使用；通过设置flex:00百分比可精确控制元素尺寸，实现等分布局，并在不同屏幕下结合媒体查询调整列数。
-
在HTML中创建多级下拉导航菜单可以通过HTML、CSS和JavaScript实现用户体验流畅且代码简洁。1)使用HTML的<nav>和<ul>标签构建菜单结构，2)利用CSS控制菜单的显示和隐藏，3)通过JavaScript动态调整菜单位置以避免超出视口，4)使用CSS3的transform属性优化性能，5)采用BEM命名规范提升代码可维护性，这样可以确保菜单的可访问性、性能和响应式设计。
-
使用background-image和-webkit-background-clip:text将渐变背景裁剪为文字形状，配合-webkit-text-fill-color:transparent实现文字渐变效果，支持线性、径向和锥形渐变，建议添加color降级方案以提升兼容性。
-
flex-grow用于设置flex子元素的扩展比例，值为无单位数字，默认0；当容器有剩余空间时，子元素按flex-grow数值比例分配空间，如item1设为1、item2设为2，则二者按1:2比例分配，实现自适应布局。
-
在构建包含多个独立计算模块的网页应用时，使用重复的CSS类名来获取输入值可能导致数据混淆，因为jQuery的$('.class').val()方法默认只获取第一个匹配元素的值。本文将深入探讨此问题，并提供通过为每个计算模块的输入字段分配唯一类名来确保准确数据绑定的解决方案，从而实现各计算器模块的独立正确运行。
-
盒模型中line-height决定文本垂直空间，影响容器高度与对齐。①line-height大于font-size时，多余空间均分上下，形成自然留白；②块级元素内容高度由line-height主导，非font-size；③行内元素高度由line-height决定，height无效；④多个行内元素共存时，取最大line-height确定行框高；⑤单行文本垂直居中可设line-height等于容器高；⑥多行文本需结合padding、margin或flex布局控制整体高度。掌握此关系可提升UI对齐精度。
-
使用width属性结合不同单位可灵活设置元素宽度。固定单位如px、cm、in用于精确控制；相对单位如%、vw、em、rem适应响应式布局；auto、fit-content等值实现自动调整；配合box-sizing可控制宽包含范围，提升布局精度。
-
RSA非对称加密通过公钥加密、私钥解密保障前端敏感数据传输安全，前端使用JSEncrypt库加密数据，后端用Node.jscrypto模块解密。
