兼容性处理：从“各显神通”到“统一战线”
前端开发最让人头疼的，可能就是“浏览器各显神通”——同样的代码，Chrome、Firefox、Safari、Edge甚至各种国产浏览器（比如360、QQ浏览器）可能给出完全不同的“解读”。我刚入行时接手过一个政府项目，用户群体里还有人在用IE9，当时页面里的flex布局直接“罢工”，按钮错位到页面外，被领导批评“连基本兼容性都做不好”。后来花了三天恶补兼容性知识，才明白前端不是“写一次到处跑”，而是要学会“和不同浏览器交朋友”。
兼容性处理的“三板斧”
第一板斧：摸清“敌人”底细
你得先知道用户在用什么浏览器。去年帮那个教育项目做优化时，我第一件事就是看他们的用户数据（用百度统计看的，别担心，合规收集），发现30%的用户用的是Chrome 80+，25%是微信内置浏览器（基于X5内核），还有10%是IE11——这就决定了我们不能用太新的API，比如ES6的箭头函数在IE11里会报错。
怎么查兼容性？我常备两个工具：一是查看前端特性兼容性””>Can I use（nofollow），输入任何CSS属性或JS API，就能看到各浏览器的支持情况；二是MDN的浏览器兼容性表格（nofollow），比Can I use更详细，连具体版本的bug都标出来了。
第二板斧：用工具“自动填坑”
手动加浏览器前缀？太麻烦了！现在早有工具帮我们搞定。比如CSS兼容性，用PostCSS的autoprefixer插件，配置好browserslist（比如"> 0.25%, not dead"），它会自动给需要前缀的属性加-webkit- -moz-等，我去年做的一个企业官网，用了autoprefixer后，CSS兼容性问题直接减少70%。
JS兼容性呢？Babel是标配，但别只转ES6语法，还要处理API兼容。比如Array.prototype.includes在IE11里没有，这时候就要用core-js或regenerator-runtime，在webpack配置里加上useBuiltIns: 'usage'，它会按需引入polyfill，不会让代码体积膨胀。
第三板斧：实战中“特殊情况特殊处理”
就算用了工具，总有“漏网之鱼”。比如我遇到过微信X5内核不支持position: sticky，导致导航栏无法固定。后来查资料发现，X5内核对部分CSS属性支持有延迟，这时候就得用“降级方案”——用JS监听滚动事件模拟sticky效果，虽然麻烦，但至少保证功能可用。
记住一个原则：“渐进增强”比“优雅降级”更实用。先保证所有浏览器能用核心功能，再给高级浏览器加锦上添花的效果。比如给按钮加hover动画，先确保所有浏览器能点击，再用@supports判断，只在支持的浏览器里加动画：@supports (transition: all 0.3s) { .btn { transition: all 0.3s; } }。
性能优化：让页面“快到飞起”的实战技巧
“页面加载慢”是前端开发的另一大痛点——用户可没耐心等，Google的 页面加载超过3秒，53%的用户会放弃访问。去年帮朋友的电商网站做优化，他们首页加载要5秒，用户投诉“还没看到商品就关了”，我用了一套组合拳，3周内把加载速度降到1.8秒，老板说后台数据显示转化率直接涨了12%。
从“资源减肥”到“按需加载”：性能优化四步走
第一步：图片优化——网站“瘦身”的关键
图片往往占页面资源的60%以上，优化图片就是给网站“减负”。我那个电商朋友的网站，首页轮播图用的是3000px宽的PNG图，一张就2MB。我先把图片改成WebP格式（同等质量下体积比JPG小30%），再用Photoshop把宽度压缩到1200px（手机端根本不需要那么大），最后用srcset和sizes属性，让不同设备加载不同尺寸的图：
srcset="banner-600w.webp 600w, banner-1200w.webp 1200w"
sizes="(max-width: 600px) 600px, 1200px"
alt="首页轮播图">
改完后，光轮播图就从2MB降到200KB，加载速度快了一大截。如果你不会PS，用在线工具图片压缩工具””>Squoosh（nofollow）也能搞定，操作简单，压缩效果还好。
第二步：代码“拆分”——只加载用户“此刻需要”的代码
以前我写代码喜欢把所有JS打包成一个文件，结果首屏加载要等整个包下载完。后来学了代码分割（Code Splitting），用Webpack的React.lazy（React项目）或import()动态导入，把路由对应的组件拆成单独的chunk，用户访问首页时只加载首页代码，其他页面的代码等用户点击再加载。
去年做的一个管理系统，用代码分割后，首屏JS体积从800KB降到320KB，加载时间减少50%。记住：别过度拆分，太小的chunk会增加HTTP请求，反而影响性能，一般按路由或大型组件拆分最合适。
第三步：“懒加载”——让看不见的内容“稍后加载”
图片和组件都能懒加载。图片用loading="lazy"属性（现代浏览器支持，IE除外），或者用Intersection Observer API手动实现；组件懒加载和代码分割配合，比如React的Suspense：
const About = React.lazy(() => import('./About'));
// 渲染时用Suspense包裹
<suspense fallback="{加载中...
猜你喜欢
