开发技能

检查体积较大的JavaScript资源包，将首次显示不需要的功能或库拆分为按需加载，并完善加载等待状态的显示。

• 寻找大型JavaScript资源包的拆分点
• 延后加载图表或富文本编辑器
• 检查各页面加载的代码

检查面包屑导航的HTML结构与当前位置标记，调整元素和ARIA属性，让屏幕阅读器使用者也能理解网站层级，并核对显示路径与结构化数据。

• 检查面包屑导航的屏幕阅读器支持
• 核查共用组件输出的HTML
• 比对结构化数据与显示路径

检查浏览器收到的HTML是否正确声明UTF-8，找出声明缺失或位置不当的问题并修正，帮助防止日文、多语言文本及特殊字符显示乱码。

• 排查日文或特殊字符乱码
• 发布前检查字符编码声明
• 检查共用模板的HTML输出

检查CSS样式覆盖冲突，用`@layer`明确样式优先顺序，协助整理分层结构，并审查对复杂选择器和`!important`的依赖。

• 排查CSS样式覆盖冲突
• 设计样式系统的优先顺序
• 逐步迁移以工具类为主的CSS

检查并修复标签未闭合、嵌套错误等HTML结构问题。结合实际生成的HTML和HTTP响应，查找可能影响页面显示及搜索引擎解析的问题。

• 检查标签未闭合和嵌套错误
• 排查HTML导致的显示错乱
• 检查面向搜索引擎的HTML结构

检查网页打开后立即可见的重要图片，结合文件大小、显示尺寸、延迟加载和优先级设置，找出影响主要内容显示的问题，并协助调整加载方式。

• 检查主视觉图片的加载优先级
• 检查首屏图片是否启用延迟加载
• 使用DevTools验证图片修改

检查生产环境JavaScript中遗留的console输出，支持删除、按环境禁用或替换为日志服务，并涵盖浏览器执行路径和修改后的验证方法。

• 发布前检查调试日志
• 区分开发和生产环境的日志
• 在构建时移除console输出

逐一列出JavaScript中的var声明及行号，根据是否需要重新赋值改用const或let，并检查变量作用域及相关浏览器运行行为。

• 按行号查找var声明
• 将var替换为const或let
• 检查变量的作用域

检查价格、数值和日期时间的显示方式，帮助改用符合语言及地区规则的Intl API，同时检查固定货币符号、分隔符、排序和备用区域设置。

• 调整面向多个地区的价格显示
• 替换手动编写的数值和日期格式
• 检查符合语言规则的排序

检查使用CSS变量的动画和过渡，通过@property定义值的类型、初始值与继承方式，为平滑变化和赋值类型验证提供所需信息。

• 让渐变动画平滑变化
• 检查使用CSS变量的视觉效果
• 设置设计令牌的类型与继承方式

查找CSS中分散或重复的颜色、间距和字号，将其整理为共用的CSS自定义属性，并结合主题切换和不同屏幕宽度下的显示效果提出修改建议。

• 整理重复的颜色和间距
• 为品牌调整整理CSS
• 审查深色模式使用的值

检查是否因CSS下载和解析而延迟页面首次显示，协助内嵌必要样式并推迟加载其余样式，同时核查不同屏幕宽度和交互状态下的实际布局。

• 排查延迟首次显示的CSS
• 区分首屏必需与可延后加载的CSS
• 检查preload和media加载方式

检查并修改卡片等组件的CSS，使其根据所在容器的宽度调整布局。通过审查依赖视口宽度的规则，帮助同一组件适应网格、侧栏和全宽区域。

• 在网格和侧栏中复用卡片
• 将组件媒体查询改为容器查询
• 检查不同容器宽度下的布局

检查工具提示中的补充信息能否传达给屏幕阅读器，核查无障碍名称及其与触发元素的关联，逐项指出问题，并提供修改方案和验证方法。

• 确认工具提示能否被朗读
• 检查触发元素与补充说明的关联
• 审查共用工具提示组件

检查浏览器在后退或前进时从内存恢复页面的机制，找出阻止恢复的事件处理及恢复后信息过期的原因，并协助修改相关逻辑。

• 排查后退或前进缓慢的原因
• 检查阻止缓存恢复的处理逻辑
• 修复恢复后仍显示旧信息的问题

检查复选框、单选按钮和开关供屏幕阅读器朗读的名称，找出缺失或含糊的标签，提出能说明选择或切换目的的标注方案，并说明验证方法。

• 检查复选框和单选按钮的标签
• 核对开关名称是否说明用途
• 修正缺失或含糊的无障碍名称

检查图片alt属性的缺失和含糊描述，根据装饰图片、链接图片、含文字图片及图表的用途调整替代文本，让屏幕阅读器用户也能理解图片含义或链接目标。

• 查找缺失或含糊的图片替代文本
• 区分装饰图片和信息图片
• 说明链接图片的目标页面

检查并修正折叠面板的按钮、开合状态属性、标题结构及最终输出的HTML，让用户能够通过键盘和屏幕阅读器使用内容。

• 检查折叠内容的键盘操作
• 通过朗读传达展开与收起状态
• 检查共用折叠面板组件

检查网页中的大型动画GIF，通过实际测量确认其对加载和资源消耗的影响，帮助转换为MP4或WebM，并改用适合自动循环播放的视频标签。

• 调查含有GIF的页面为何缓慢
• 将大型GIF转换为MP4或WebM
• 检查循环视频的播放属性

找出CSS动画中增加渲染负担的属性，建议改用transform和opacity，并检查不同屏幕宽度、交互状态下的显示及减少动态效果的设置。

• 检查卡顿的动画
• 修改改变位置或尺寸的动画
• 检查减少动态效果的设置

检查界面元素的角色是否支持所设置的ARIA属性，核对输出HTML和交互状态，指出不兼容的组合并指导删除或修正，帮助屏幕阅读器正确理解元素。

• 检查公共组件的ARIA属性
• 审查设计系统的无障碍支持
• 调查不符合预期的朗读

检查电量、存储容量等仪表是否具有无障碍名称，找出并补充缺失的标签，让屏幕阅读器能够说明数值的含义，并提供修改后的验证方法。

• 检查电量或容量仪表的标签
• 为仪表添加供屏幕阅读器使用的名称
• 检查共用界面组件中的仪表

检查对屏幕阅读器隐藏的区域内，是否仍有可通过键盘聚焦的链接、按钮或输入框，指出导致焦点位置不明的问题，并提供修改方案和验证方法。

• 检查隐藏区域中残留的交互元素
• 排查键盘导航时朗读中断的原因
• 审查通用界面组件的无障碍支持

检查网站图片及其分发设置，协助采用压缩效率较高的AVIF格式，同时检查图片尺寸与加载方式，并考虑为不支持AVIF的浏览器提供WebP或JPEG替代图片。

• 为网站照片引入AVIF格式
• 为不支持AVIF的浏览器提供替代图片
• 检查首屏图片尺寸与加载方式