开发技能

检查网页应用是否支持PWA安装，找出HTTPS、配置文件和图标方面的缺项，同时核对离线响应与启动地址设置。

• 检查PWA安装支持情况
• 添加安装提示前核对配置
• 检查图标尺寸与格式

检查JavaScript读取API响应或存储数据时的JSON处理，补充无效输入的异常处理，并在使用解析结果前验证数据结构，避免后续处理出错。

• 检查API响应的JSON解析
• 处理localStorage中的损坏数据
• 访问属性前验证数据结构

协助将屏幕外的图片、视频、iframe及大型组件推迟到需要时再加载，减轻初始显示负担，并结合实际测量和页面位置确定应修改的部分。

• 调查页面初始显示缓慢的原因
• 延迟加载首屏以下的图片
• 推迟加载屏幕外的视频和大型组件

检查JavaScript中的手写循环，将适合的部分改为数组或对象的标准方法，让数据转换、筛选和汇总的意图更清楚，并结合浏览器中的实际行为验证修改。

• 整理手写循环
• 明确数据转换、筛选与汇总的意图
• 检查对象转换与深拷贝

检查CSS类名中的含义不清和命名不一致问题，按表示组件、内部元素及状态的BEM格式整理，并核对不同屏幕宽度和交互状态下的实际显示。

• 检查CSS类名的命名差异
• 将组件类名统一为BEM格式
• 区分工具类与JavaScript专用类

检查HTML语言声明，找出缺失、空值或与正文不符的设置并修正，同时核查多语言段落，完善屏幕阅读器朗读和浏览器翻译所用的语言信息。

• 确认整个页面的语言声明
• 为多语言内容标记语言切换
• 检查影响屏幕阅读器发音的设置

检查现代浏览器收到的JavaScript是否含有不必要的旧格式代码和兼容代码，实测其性能负担，并协助调整分发方式与构建设置。

• 排查页面加载缓慢
• 检查不必要的兼容代码
• 调整面向现代浏览器的构建设置

检查网页导航的HTML结构，通过nav元素、识别标签和跳过重复菜单的链接，让屏幕阅读器用户更容易找到目标区域并直接跳转。

• 检查主导航和页脚导航的易用性
• 区分页面中的多个导航区域
• 检查共用组件输出的HTML

检查模态对话框的键盘操作和屏幕阅读器支持，核对对话框角色、标题关联、焦点循环、Escape关闭及关闭后的焦点返回，并指出问题与修复后的验证方法。

• 检查模态对话框的键盘操作
• 核对打开和关闭时的焦点移动
• 检查标题及屏幕阅读器标签

检查 JavaScript 库的旧版本、已知漏洞和多余体积，通过实际测量确认性能问题，再评估更新到安全版本或替换为轻量库的方案。

• 检查依赖库的已知漏洞
• 调查页面加载缓慢的原因
• 评估更轻量的替代库

检查包含大量行或卡片的界面，评估仅渲染可见区域的虚拟化方案，在保留操作体验和无障碍访问能力的同时，帮助降低渲染负担。

• 排查管理后台表格卡顿
• 调整长搜索结果的显示方式
• 降低信息流的渲染负担

检查HTML列表项与父元素的关系，协助修正列表嵌套和ARIA设置，让屏幕阅读器识别列表类型与项目数量，并检查导航及用于样式布局的列表标记。

• 检查拆分在多个组件中的列表结构
• 修正导航列表的嵌套
• 检查自定义列表的父级角色

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

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

检查TypeScript数组和对象的索引访问，核查并启用相关编译设置，为可能未定义的值添加检查，减少因遗漏缺失值而导致的运行时错误。

• 检查TypeScript安全设置
• 审查数据处理中的数组访问
• 排查意外的未定义值错误

检查网页能否仅用键盘操作，核对Tab移动顺序、隐藏元素是否获得焦点，以及是否存在无法离开的区域，并指出具体元素、修正方法和验证方式。

• 检查Tab能否到达所有交互元素
• 让焦点顺序符合页面布局
• 将隐藏元素移出Tab顺序

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

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

检查JavaScript页面跳转，通过实际测量确认加载延迟，指出存在问题的文件或请求，并帮助评估改用服务器端301或302跳转。

• 调查页面跳转造成的延迟
• 审查window.location跳转逻辑
• 评估改用服务器端跳转

检查表示页面主要区域的HTML元素及其标签，帮助改善页面结构，让屏幕阅读器用户更容易跳转到正文或导航，并能区分同类区域。

• 检查屏幕阅读器的页内导航
• 将通用容器改为语义化元素
• 检查多个导航区域的标签

检查 JavaScript 文件压缩后的体积和加载负担，通过代码拆分、移除未使用代码及审查依赖，改善页面显示和操作延迟，并以实际测量确认问题。

• 找出压缩后超过200KB的文件
• 调查页面可操作前的等待时间
• 通过代码拆分缩减体积

检查JavaScript事件监听器、定时器及过时的网络请求等，调查并修复网页应用持续使用时内存占用不断增长的问题。

• 调查长时间使用后的内存增长
• 检查组件销毁时的清理工作
• 停止切换页面后多余的网络请求

检查 CSS 的间距、边框与定位，将固定左右或上下方向的设置改为随文字流向变化的逻辑属性，支持从右向左书写的语言及竖排布局。

• 适配阿拉伯语或希伯来语布局
• 替换 CSS 中固定左右方向的间距
• 检查竖排文字布局

检查页面HTML，找出误放在body内或head外的元数据标签，按名称或属性识别问题，并帮助将标签移入head或修正脚本的插入位置。

• 检查CMS插件变更后的标签位置
• 调查JavaScript向body插入标签的情况
• 检查robots和OG等标签的位置

检查链接文字在脱离上下文时能否说明目标位置，改进含糊措辞和供屏幕阅读器使用的名称。同时检查键盘操作，以及下载链接的文件格式与大小说明。

• 修改含糊不清的链接文字
• 检查屏幕阅读器读出的链接名称
• 确认下载链接的文件信息

检查网页首屏图片是否因延迟加载而推迟显示，通过实际测量确认其对主要内容显示时间的影响，并指导移除延迟加载属性或调整加载优先级。

• 检查主图的加载设置
• 调查影响LCP的图片显示延迟
• 调整首屏图片的加载属性