旧项目转HTML5流程全解析【采撷】

学习文章要努力，但是不要急！今天的这篇文章《旧项目清HTML5流程详解【采撷】》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

安全清理HTML5旧代码需先识别验证再替换，不可直接删除注释脚本；须检查实际使用的HTML5元素及属性、polyfill依赖、内联脚本中的Web API调用，并通过多浏览器回归测试确保功能完整。

HTML5 项目中如何安全清理旧代码和冗余资源

直接删 index.html 里注释掉的 IE6 兼容脚本？不行。旧 HTML5 项目往往混着条件注释、废弃的 document.write、过时的 polyfill（比如 html5shiv）、已下线的 CDN 链接，还有被遗忘的 data-* 属性或自定义事件监听器。清理不是删除，是识别 + 验证 + 替换。

先查清哪些 HTML5 特性实际被用到了

盲目移除 或 相关逻辑，可能让某个报表页白屏。必须确认当前 DOM 中真实存在的 HTML5 元素及其依赖：

• 打开浏览器 DevTools → Elements 面板，搜索
  、

  、 等语义化标签，看是否仅作结构装饰，还是被 JS 选中（如 document.querySelector('time[data-updated]')）
• 全局搜索项目源码中的 querySelector、getElementById，检查是否引用了 HTML5 新增属性（如 dataset、contentEditable）
• 运行

  console.log([...document.querySelectorAll('[data-],[contenteditable],[draggable]')])

  ，快速定位仍在起作用的 HTML5 属性节点

polyfill 和兼容层怎么判断还能不能删

很多旧项目在 里硬塞了 html5shiv.js、respond.js、甚至整段 if (!window.addEventListener) 判断。是否可删，取决于你的真实支持范围：

• 如果项目已明确放弃 IE9 及以下（查看 browserlist 或统计后台 UA），html5shiv 和 respond.js 可全量移除
• 检查 package.json 中 browserslist 字段，若含 ie 11，则需保留 core-js/stable 中针对 Promise、Array.from 的垫片，但可删掉 fetch 的 polyfill（IE11 原生不支持，但若项目没用 fetch 就别留）
• 搜索 require('es6-promise') 或 import 'whatwg-fetch'，只删那些对应功能从未被调用的引入

script 标签里的内联逻辑最容易漏掉

旧项目常把初始化逻辑写在 HTML 底部