开发技能

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

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

Review and implement dark mode using CSS variables and the user's operating system preference. Check fixed colors, contrast, responsive layouts, and interaction states, with guidance for adding a manual theme switch that remembers the user's choice.

中文简介正在准备中。当前显示英语简介。

• Match site colors to the operating system's dark mode
• Find fixed colors that break the dark theme
• Add a manual theme switch that remembers the user's choice

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

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

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

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

检查图片加载失败时的页面显示，帮助实现备用图片或有意义的占位内容，同时检查错误日志、加载中的显示方式，并说明如何验证修改结果。

• 完善失效图片链接的备用显示
• 检查图片加载中的占位内容
• 使用日志和DevTools排查图片错误

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

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

检查JavaScript异步操作和React界面的错误处理，找出未捕获或被忽略的错误，并指导补充异常捕获、调查所需日志和界面错误处理。

• 检查异步操作的错误处理
• 为React界面补充错误处理
• 改进用于排查原因的日志

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

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

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

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

检查自定义HTML元素和Web Components，整理屏幕阅读器所需的角色与名称、键盘操作、焦点管理及表单集成方面的缺项和修正建议。

• 检查自定义组件的屏幕阅读器支持
• 检查菜单的键盘操作
• 检查自定义输入框的表单集成

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

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

检查直接写在HTML中的样式和页面内嵌CSS，判断哪些应保留为例外，协助整理到外部样式表，并检查不同屏幕宽度及交互状态下的显示。

• 检查HTML中的样式
• 将内嵌CSS整理到外部文件
• 判断首屏CSS和动态值的例外

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

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

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

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

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

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

检查独立页面组件的CSS，建议用contain限制布局重新计算与重绘范围，并核对不同屏幕宽度和交互状态的显示效果，判断适合应用的位置。

• 检查包含大量独立组件的页面
• 跳过屏幕外列表项的渲染
• 确认不同屏幕宽度下的显示效果

提取页面初始显示所需的 CSS，直接嵌入 HTML，并将其余样式改为异步加载。同时检查不同屏幕宽度和交互状态下的布局，以改善页面初始显示。

• 检查拖慢初始显示的 CSS
• 提取首屏所需的 CSS
• 异步加载可延后的 CSS

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

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

通过测量排查拖慢页面首次显示的资源请求依赖，找出必须依次等待的加载环节，并考虑内嵌关键CSS或预加载必要文件，缩短网络等待链。

• 排查页面首次显示缓慢的原因
• 检查资源请求之间的依赖
• 评估内嵌关键CSS与预加载

检查CSS文件大小及加载方式，通过性能测量找出拖慢页面显示的样式表，并通过压缩、删除未使用的样式或按页面拆分文件来减少不必要的CSS。

• 排查页面首次显示缓慢的原因
• 查找体积过大的CSS文件
• 删除未使用的样式并压缩CSS

检查生产环境中 CSS 的压缩情况与构建设置，考虑删除多余空白和注释以缩小文件，并在提出修改前确认不同屏幕宽度和交互状态下的显示。

• 检查生产环境 CSS 的压缩情况
• 在构建流程中加入压缩
• 审查 PostCSS 输出

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

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

检查切换图片或内容的轮播组件，协助修正自动播放的暂停操作、键盘导航、屏幕阅读器通知，以及对减少动态效果偏好的支持。

• 检查自动轮播的暂停操作
• 确认仅用键盘即可操作
• 检查幻灯片切换的朗读通知

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

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