前端核心三件套
一、核心三件套
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差异（如滚动事件处理）。
