开发技能

找出TypeScript中绕过类型检查的any，协助改用unknown、泛型或外部数据验证，并说明各使用位置所需的类型检查与修改。

• 修复ESLint中与any有关的警告
• 审查外部API数据的类型安全
• 检查向调用方传播any的函数

检查并实现数据获取或提交过程中的等待提示，通过骨架占位、加载动画和屏幕阅读器状态提示传达进度，同时检查加载完成时的布局偏移，并测量实际性能瓶颈。

• 为数据获取添加等待提示
• 在操作执行期间显示进度
• 检查加载状态的屏幕阅读器支持

检查文字相同却指向不同页面的链接，协助统一目标地址或修改链接文字，让读者及屏幕阅读器用户更容易判断每个链接的去向。

• 核对相同链接文字的目标地址
• 改善屏幕阅读器朗读的链接文字
• 检查共用组件中的链接

检查网站图片的分发方式，帮助配置CDN的自动格式转换和尺寸调整，并核查文件大小、显示尺寸、加载方式及对首屏显示的影响。

• 确认图片是否通过CDN分发
• 自动调整图片尺寸并转换格式
• 检查图片加载对首屏显示的影响

统计页面加载时的HTTP请求，结合实测查找延迟原因，识别可减少的网络请求，并提出合并文件、集中图标或内嵌首屏所需资源等改进建议。

• 调查页面首屏显示缓慢的原因
• 检查图片和CSS的多余请求
• 评估文件合并与图标集中方案

检查网页中的iframe和frame是否具有能说明嵌入内容的标题，找出缺失、空白或描述不足之处，协助修改，让屏幕阅读器用户更容易识别内容。

• 检查嵌入广告和社交媒体组件的标题
• 查找iframe缺失或为空的title
• 通过屏幕阅读器确认框架能否被识别

查找直接修改JavaScript对象或数组的代码，将其改为创建副本后更新的形式，帮助梳理共享状态的变化，让数据修改更容易追踪。

• 查找对共享对象的直接修改
• 调整push或splice更新方式
• 审查客户端状态更新

检查表单错误和必填状态能否被辅助技术识别，改善输入框与说明、错误消息的关联及选项分组，并根据表单提交方式审查实现。

• 让屏幕阅读器能够传达输入错误
• 检查必填字段和选项分组
• 审查 React 表单的输入验证

检查HTML中发现较晚的重要字体、图片和脚本，审视资源预加载及外部域名预连接设置，并核查最终交给浏览器的标记，协助选择合适的资源提示。

• 检查重要字体和图片的预加载
• 核查外部域名的预连接
• 审查输出HTML中的资源提示

检查长页面和仪表盘中屏幕外的高开销组件，将其改为接近可视区域时加载，并预留布局空间，平衡首次显示负担与滚动等待时间。

• 延迟加载仪表盘底部图表
• 检查长落地页的加载方式
• 提前加载嵌入内容和相关商品

检查网页图片，在尽量减少可见画质变化的同时降低文件大小。综合审查压缩、格式、显示尺寸、加载方式和分发配置，并整理适用的工具与自动化方案。

• 查找网页中体积较大的图片
• 为照片和图形选择压缩方式
• 在构建时自动压缩图片

检查遮挡正文的弹窗和模态框，核查移动端阅读、关闭操作及键盘焦点管理，帮助改善搜索可见性与无障碍访问体验。

• 检查移动端广告弹窗
• 确认模态框能否通过键盘关闭
• 检查对话框开关时的焦点

协助使用ESLint检测JavaScript语法错误与编码规范违规，配置规则并接入编辑器和CI/CD自动检查，修复错误和警告，并结合浏览器行为审查代码。

• 为JavaScript项目引入ESLint
• 统一团队编码规范
• 在编辑器和CI/CD中自动检查

检查网页图片的格式、文件大小、显示尺寸及加载方式，按严重程度报告问题并提供修改后的 HTML，处理不同屏幕宽度的图片选择、延迟加载和布局偏移。

• 检查慢速页面的图片大小和格式
• 为手机和电脑提供不同尺寸图片
• 防止图片加载时发生布局偏移

检查根据子元素状态或输入内容改变父元素外观的逻辑，协助将JavaScript类名切换改为CSS的:has()规则，并说明如何表达相应条件。

• 将类名切换逻辑移到CSS
• 根据输入状态设置表单样式
• 根据子元素是否存在设置父元素样式

检查图像输入按钮的HTML，找出缺失或为空的替代文本，协助修改alt属性，让屏幕阅读器能够说明搜索、提交等按钮操作的目的。

• 检查图像输入按钮的替代文本
• 完善搜索和提交按钮的说明
• 审查共用图像按钮组件

通过INP衡量点击等操作到页面更新之间的延迟，查找响应缓慢的原因，并依据测量结果协助优化事件处理、拆分长任务或将繁重计算移至web workers。

• 排查点击等操作后的响应延迟
• 依据测量结果优化事件处理与长任务
• 评估将繁重计算移至web workers

按用途检查网站图片文件大小，列出超标图片与压缩目标，区分容量问题和显示尺寸不匹配，并协助调整压缩、格式及不同设备的图片分发。

• 列出超标图片及压缩目标
• 检查 CMS 中管理的图片
• 减小首屏主图与缩略图文件

检查并修正表单输入框的HTML `type`和`autocomplete`属性，使其符合输入内容，改善手机键盘显示和浏览器自动填充。

• 检查现有表单的输入属性
• 调整手机上的邮箱和电话输入
• 配置浏览器自动填充

检查生产环境中发布的JavaScript是否经过压缩，审查构建配置和未使用代码的移除方式，帮助缩小文件体积、减轻加载负担，并说明修改后的浏览器验证方法。

• 检查生产环境的JavaScript压缩
• 缩小发布文件的体积
• 审查未使用代码的移除

检查网页HTML中的元素是否符合内容的实际作用，指出哪些通用div应替换为语义元素，帮助屏幕阅读器用户浏览页面，并支持搜索引擎理解页面结构。

• 重新检查以div为主的页面结构
• 检查模板和通用组件输出的HTML
• 改善屏幕阅读器的页面导航结构

检查网页标题的层级跳跃、内容不符等问题，并按正文结构整理HTML标题，让屏幕阅读器用户更容易理解页面结构并在各部分之间导航。

• 检查页面标题层级
• 改善屏幕阅读器标题导航
• 检查设计系统中的标题

检查HTTPS网站中遗留的HTTP链接及图片、脚本等资源地址，按内部链接、外部链接和资源分类统计，确认目标是否支持HTTPS后协助修正。

• 迁移到HTTPS时检查链接
• 查找直接写入代码的HTTP地址
• 检查图片和脚本的引用地址

检查网页的标题层级，修正级别跳跃和结构不一致的问题，帮助屏幕阅读器用户按标题浏览内容，并说明如何使用无障碍工具验证修改。

• 检查页面标题顺序
• 确认共用组件的标题结构
• 整理供屏幕阅读器使用的标题列表