体验优化

最新推荐文章于 2025-06-13 23:50:55 发布

原创最新推荐文章于 2025-06-13 23:50:55 发布 · 1.1w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #js #css #javascript

理论/基础专栏收录该内容

27 篇文章

订阅专栏

本文探讨了如何通过HTML的input属性优化输入体验，包括使用Inputmode设置数字键盘，Pattern进行正则验证，以及autocomplete开启自动补全。对于img元素，强调了预先设置宽高以避免布局变动，利用alt属性和伪元素处理加载失败，以及srcset实现响应式图片加载。同时，介绍了节流和防抖技术在JavaScript中优化性能的应用。

input

label 标签

这个就不用多说了,让用户的点击获取正确的焦点
Inputmode

这个属性很多时候被忽略了,其实做好了可以很大改善用户体验
- 添加输入模式: numeric
- 数字键盘: number
- tel、email、decimal、url、search和none 等等
Pattern

可接收一个正则,以期得到正确的输入
autocomplete

自动补全表单可选择username, email, new-password, current-password,one-time-code,对浏览器和密码管理器查找登录表单有很好的启发式作用

img

由于是替换元素,在请求到资源后,尺寸的变化会对页面其他元素进行挤压,要先设置宽高属性

可以用这个属性和伪元素对加载失败进行优化

srcset

用于浏览器根据宽、高和像素密度来加载相应的图片资源,度描述w 像素密度描述x，多个资源之间用逗号分隔

<img srcset="/big.jpg 1440w, /middle.jpg 800w, /small.jpg 200x">

节流

定时器在的时候不做操作,一定时间后清除定时器,执行真正的函数

let timer = null;
function throttle(func, wait = 1000) {
	return function (...args) {
		if (!timer) {
			func(...args);
			timer = setTimeout(() => {
				timer = null;
			}, wait);
		}
	}
}

防抖

定时器时间到了之后执行真正的函数,若在规定时间内再次触发则重置定时器

function debounce(func, wait = 1000) {
	let timer = null;
	return function (...args) {
		timer ? timer = null :
			timer = setTimeout(() => {
				func(...args);
			}, wait);
	}
}