前端核心三件套

一、核心三件套

HTML5‌

语义化标签（<header>/<section>）

离线存储（localStorage/sessionStorage）‌

Canvas/SVG图形绘制能力

CSS3

Flex/Grid布局系统

动画（@keyframes/transition）

响应式设计（media queries）

JavaScript‌

ES6+特性（let/const、Promise、箭头函数）

DOM/BOM操作

异步编程（async/await）‌

二、Hybrid开发必备

WebView基础‌

Android需配置setJavaScriptEnabled(true)启用JS支持‌

资源加载方式（file:///android_asset/加载本地HTML）‌

通信机制‌

Native调用H5：webview.loadUrl("javascript:func()")（Android 4.4+推荐evaluateJavaScript）‌

H5调用Native：通过URL Scheme（jsbridge://method?params）或JSBridge注入‌

安全规范‌

Android 4.2以下避免使用addJavascriptInterface‌

HTTP链接需声明android:usesCleartextTraffic="true"‌

三、调试与优化

开发工具‌

Chrome DevTools远程调试WebView‌

Charles抓包分析混合请求

性能优化‌

减少DOM操作频率

图片懒加载/WebP格式

避免同步布局抖动‌

四、扩展能力

跨端方案‌

React Native/Vue Native的JSX语法‌

小程序双线程架构原理‌

工程化‌

Webpack构建优化（tree-shaking）

Babel转译兼容性处理

建议从纯H5开发入手，逐步掌握Hybrid交互协议（如JSBridge设计），再拓展到跨平台框架‌。

实际开发中需注意iOS/Android的WebView差异（如滚动事件处理）‌。