开发技能

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

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

依据Front-End Checklist的386条规则检查前端代码或公开页面，涵盖无障碍、性能和SEO等方面，整理有依据的问题及具体修正方法。

• 发布前检查页面
• 审查表单与交互组件代码
• 检查性能和安全性

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

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

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

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

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

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

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

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

检查键盘Tab导航顺序是否与页面视觉顺序一致，定位HTML元素排序问题，并协助修正对话框打开、关闭时的焦点移动和返回行为。

• 检查页面的Tab导航顺序
• 确认对话框开关时的焦点行为
• 调整HTML元素顺序与tabindex用法

检查主要图片、重要字体和CSS的加载优先级，通过fetchpriority属性调整资源获取顺序，让显示所需的资源更早加载。

• 改善主要图片的显示速度
• 检查屏幕外图片造成的加载竞争
• 确认字体和CSS预加载的优先级

检查浏览器标签页、书签和手机主屏幕使用的网站图标，协助生成适合不同设备的格式与尺寸，并核对HTML声明及PWA配置。

• 准备标签页和书签图标
• 配置手机主屏幕图标
• 核对PWA图标配置

检查列表或表格中重复绑定的事件处理，将其集中到共同父元素，通过事件委托支持后续新增元素的操作，并减少单独注册的监听器。

• 修复动态新增项目的操作响应
• 合并表格各行的重复监听器
• 检查点击目标的判断方式

检查拖放界面能否通过键盘和屏幕阅读器操作，以浏览器实际生成的HTML为依据，完善替代操作方式，以及向辅助技术传达操作状态的播报机制。

• 检查拖放的键盘替代操作
• 检查屏幕阅读器的状态播报
• 检查实际生成的HTML

检查文件选择控件和拖放区域，协助改善标签、文件格式与大小限制说明，以及进度和错误通知，并确认用户能否通过屏幕阅读器和键盘完成上传。

• 检查上传控件的标签与说明
• 检查拖放操作的替代方式
• 改善进度和错误的语音播报

检查JavaScript的代码导入与导出方式，协助从CommonJS迁移到import/export，同时检查浏览器执行路径，并说明修改后的验证方法。

• 将require()转换为import
• 迁移module.exports
• 检查浏览器中的模块加载

检查图片及其说明文字的 HTML 结构，用 figure 和 figcaption 正确关联，并检查是否与替代文本重复，使屏幕阅读器能清楚表达图片与说明的关系。

• 检查带说明文字的图片 HTML
• 检查图片说明与替代文本是否重复
• 改善屏幕阅读器中的图片说明

检查图片文件名，将含义不明的名称整理为能描述内容的小写字母、连字符名称，并更新相关引用，方便图片搜索和素材管理。

• 检查商品图片的文件名
• 统一图片库的命名方式
• 批量重命名图片并更新引用

检查表示术语与说明的HTML结构，协助将单独使用的dt、dd元素归入dl，并提供验证方法，确认屏幕阅读器等辅助技术能识别两者的关系。

• 检查术语表的HTML结构
• 审查并列展示名称和值的结构
• 修复未包含在dl中的dt和dd

检查阿拉伯语等从右向左书写的页面及文字方向混合的帖子，协助修正HTML方向设置，并检查显示顺序、屏幕阅读器朗读顺序和界面布局。

• 检查阿拉伯语和希伯来语页面
• 处理文字方向混合的姓名与帖子
• 检查导航和图标的左右镜像

检查图片的宽高设置，查找图片加载时文字或按钮移位的原因。根据图片原始宽高比提出属性与响应式CSS修改建议，并展示修改前后的HTML。

• 排查图片加载时的页面移位
• 查找缺少宽高属性的图片
• 在不同屏幕宽度下保持图片比例

检查网页字体的加载方式，查找文字暂时不可见、渲染延迟和布局偏移的问题。依据测量结果，协助调整备用字体显示、重要字体预加载和字体格式。

• 查找加载时文字不可见的原因
• 检查字体切换引起的布局偏移
• 设置备用字体显示与预加载

检查原始 HTML 响应，找出开头缺失或过时的 HTML5 文档类型声明、语法错误及声明前的多余字符，协助修改，使浏览器以标准模式显示页面。

• 检查原始 HTML 响应的文档类型声明
• 替换旧的 HTML4 或 XHTML 声明
• 清除文档类型声明前的多余字符

检查键盘操作时标示当前选中位置的焦点样式，找出轮廓线消失、被裁切或位置偏移的问题，并指出相关CSS，协助修改为清晰可见的样式。

• 确认键盘操作时的选中位置
• 检查移除轮廓线的CSS
• 修正焦点框裁切或位置偏移

检查弹窗开关、页面切换和内容动态更新时，键盘焦点是否正确移动与返回，找出用户丢失操作位置的原因，并协助改进动态界面的键盘操作。

• 检查弹窗开关时的焦点移动
• 确认单页应用切换后的操作位置
• 改善动态更新时的键盘操作

从CSS检查手机文字的可读性，找出过小文字和固定字号，提出相对单位修改建议，并确认浏览器字体设置及200%缩放下的内容和控件是否完整。

• 检查移动端字号
• 将px字号改为相对单位
• 检查200%缩放下的布局

查找网页重复加载的JavaScript库及其多个版本，通过实测确认影响，再统一依赖版本、移除不必要的加载，并检查外部脚本带入的依赖。

• 排查页面加载缓慢的原因
• 检查依赖库是否重复
• 核查外部脚本带入的依赖