{"id":1001,"date":"2017-05-25T13:38:11","date_gmt":"2017-05-25T05:38:11","guid":{"rendered":"http:\/\/feizhaojun.com\/?p=1001"},"modified":"2020-11-03T18:47:24","modified_gmt":"2020-11-03T10:47:24","slug":"%e5%89%8d%e7%ab%af%e7%9f%a5%e8%af%86%e4%bd%93%e7%b3%bb","status":"publish","type":"post","link":"https:\/\/feizhaojun.com\/?p=1001","title":{"rendered":"\u524d\u7aef\u6280\u80fd\u56fe\u8c31"},"content":{"rendered":"<ul>\n<li><a href=\"https:\/\/mp.weixin.qq.com\/s\/TzanIfsuKW7Ez2t8Qs1Caw\">2019 \u5e74 Web \u5f00\u53d1\u6280\u672f\u6307\u5357\u548c\u8d8b\u52bf<\/a> <a href=\"https:\/\/segmentfault.com\/a\/1190000017483325\">\u5907\u7528\u5730\u5740<\/a><\/li>\n<\/ul>\n<pre><code>\u524d\u7aef\u57fa\u7840\n\u251c HTML\n\u2502 \u251c \u6807\u51c6\u3001\u8bed\u4e49\u5316\n\u2502 \u251c iframe\u3001form(\u8868\u5355)\n\u2502 \u251c Media(\u5a92\u4f53)\n\u2502 \u2502 \u251c WebRTC\n\u2502 \u2502 \u2514 AudioContext\n\u2502 \u251c [history &amp; hash](https:\/\/www.cnblogs.com\/tugenhua0707\/p\/10859214.html)\n\u2502 \u251c Canvas\n\u2502 \u2502 \u251c \u7ed8\u56fe D3\/Three.js\n\u2502 \u2502 \u2514 \u6e38\u620f\n\u2502 \u251c SVG\n\u2502 \u251c WebGL\n\u2502 \u251c \u901a\u4fe1\n\u2502 \u2502 \u251c Server-sent events\n\u2502 \u2502 \u2514 Web Sockets\n\u2502 \u251c \u672c\u5730\u5b58\u50a8\n\u2502 \u2502 \u2514 localStorage &amp; cookie websql indexedDB\n\u2502 \u251c [\u79bb\u7ebf\u5b58\u50a8 applicationCatch(\u5373\u5c06\u5e9f\u6b62) ](https:\/\/www.cnblogs.com\/wuzhiquan\/p\/4844258.html)\n\u2502 \u251c Web Workers\n\u2502 \u251c MathML &amp; latex\n\u2502 \u2514 SEO\n\u2502 \n\u251c CSS\n\u2502 \u251c \u9009\u62e9\u5668\u4f18\u5148\u7ea7\n\u2502 \u251c \u6a21\u5757\u5316\u3001\u53ef\u4f38\u7f29\n\u2502 \u251c CSS \u9884\u5904\u7406\u5668 \u2605\n\u2502 \u2502 \u251c Sass \u2714\n\u2502 \u2502 \u251c PostCSS\n\u2502 \u2502 \u251c Stylus\n\u2502 \u2502 \u2514 Less \u2714\n\u2502 \u251c CSS \u65b9\u6cd5\uff1aBEM, SMACSS, OOCSS\n\u2502 \u251c \u76d2\u5b50\u6a21\u578b\u3001Flex\n\u2502 \u251c \u6d6e\u52a8\u3001\u5b9a\u4f4d\n\u2502 \u251c \u73b0\u4ee3CSS\uff1aFlex\u3001Grid\n\u2502 \u251c Sprite(\u96ea\u78a7\u56fe)\n\u2502 \u251c iconfont(\u5b57\u4f53\u56fe\u6807)\n\u2502 \u251c \u91cd\u7ed8\u548c\u56de\u6d41\n\u2502 \u2514 \u8fc7\u6e21\u3001\u52a8\u753b\n\u2502\n\u2514 JavaScript\n   \u251c \u57fa\u7840\n   \u2502 \u251c \u6570\u636e\u7c7b\u578b\u3001\u57fa\u7840\u8bed\u6cd5\n   \u2502 \u251c \u4f5c\u7528\u57df\u3001\u539f\u578b\u94fe\u3001this\n   \u2502 \u251c \u9762\u5411\u5bf9\u8c61\u3001\u6784\u9020\u51fd\u6570\n   \u2502 \u251c \u95ed\u5305\n   \u2502 \u251c Event \u4e8b\u4ef6\n   \u2502 \u2514 \u5355\u7ebf\u7a0b\u3001\u5f02\u6b65\u961f\u5217\u5217\uff08\u5de5\u4f5c\u7ebf\u7a0b\uff09\n   \u2502   \u2514 AJAX\u3001\u5b9a\u65f6\u3001\u4e8b\u4ef6\u56de\u8c03\n   \u251c ES6\/ES7 \u2605\n   \u2502 \u2514 \u6269\u5c55\u3001\u65b0\u7279\u6027\n   \u251c [Node](https:\/\/www.liaoxuefeng.com\/wiki\/1022910821149312\/1023025235359040) \u2605\n   \u2502 \u251c Web\u6846\u67b6\n   \u2502 \u2502 \u251c Express\u3001Koa\n   \u2502 \u2502 \u2514 [Egg](https:\/\/eggjs.org\/zh-cn\/core\/cluster-and-ipc.html) \u2605\n   \u2502 \u251c pm2\n   \u2502 \u251c [Cluster](https:\/\/cnodejs.org\/topic\/56e84480833b7c8a0492e20c)\n   \u2502 \u251c [Node Redis](https:\/\/github.com\/NodeRedis\/node-redis)\n   \u2502 \u251c [Node\u4f7f\u7528Redis](https:\/\/zhuanlan.zhihu.com\/p\/96762107)\n   \u2502 \u251c Puppeteer \u2605\n   \u2502 \u2514 \u6587\u4ef6\u64cd\u4f5c\uff0c\u52a0\u5bc6 asar\n   \u251c Deno\n   \u2514 Web API\n     \u251c Notification \u901a\u77e5\n     \u251c Storage \u5b58\u50a8(localStorage\/sessionStorage)\n     \u251c XMLHttpRequest\n     \u251c Service Worker \u2605\n     \u251c DOM \u6587\u6863\u5bf9\u8c61\u6a21\u578b\n     \u2514 BOM \u6d4f\u89c8\u5668\u5bf9\u8c61\u6a21\u578b\n\n\u6846\u67b6\u3001\u5e93\u3001\u5f15\u64ce\n\u251c \u7efc\u5408\u6846\u67b6 Framework\n\u2502 \u251c Vue \u53ca\u751f\u6001 \u2605\n\u2502 \u251c React \u53ca\u751f\u6001 \u2605\n\u2502 \u2502 \u2514 React + Typescript + Mobx \u2714\n\u2502 \u251c Angular\n\u2502 \u251c Umi\n\u2502 \u251c Ant Design\n\u2502 \u2502 \u2514 Ant Design Pro \u2714\n\u2502 \u2514 Ember\n\u251c \u6a21\u677f\u6846\u67b6 UI Framework\n\u2502 \u251c Mint UI\u3001VUX\u3001Vant Weapp(\u6709\u8d5e)\n\u2502 \u251c Fast\n\u2502 \u251c Fluent UI\n\u2502 \u251c Material Design\n\u2502 \u2514 Element\n\u251c \u670d\u52a1\u5668\u7aef\u6e32\u67d3 SSR\n\u2502 \u2514 Next\u3001Nuxt\n\u251c \u5176\u4ed6\u6846\u67b6\n\u2502 \u251c GatsbyJS\u3001Hugo\u3001Hexo\u3001Cosmic\u3001DatoCMS\u3001Contentful\u3001ghost\n\u2502 \u251c KISSY \u2717\n\u2502 \u251c dva\n\u2502 \u251c [Zero Sever](https:\/\/zeroserver.io)\n\u2502 \u2514 Preact \u2717\n\u251c \u6269\u5c55\u5e93 Library\n\u2502 \u251c TypeScript \u2605\n\u2502 \u251c CoffeScript\n\u2502 \u251c jQuery\u3001zepto \u2714\n\u2502 \u251c Immutable\n\u2502 \u251c Lodash\n\u2502 \u251c \u2514 _.debounce\n\u2502 \u2514 moment\n\u2514 \u6a21\u677f\u5f15\u64ce Templating Engine\n  \u2514 hogan.js(twitter)\u3001nunjucks\n\n\u8de8\u7ec8\u7aef\n\u251c \u79fb\u52a8\u7aef\n\u2502 \u251c H5\u573a\u666f\u52a8\u753b\n\u2502 \u251c webview\uff08\u5fae\u4fe1\u3001Native\uff09\n\u2502 \u251c [Flutter](https:\/\/flutter.dev\/docs\/get-started\/install\/macos) \u2605\n\u2502 \u2502 \u251c Fuchsia\n\u2502 \u2502 \u2514 Dart\n\u2502 \u251c \u5fae\u4fe1\u751f\u6001\n\u2502 \u2502 \u251c \u5c0f\u7a0b\u5e8f\n\u2502 \u2502 \u251c \u5fae\u4fe1\u767b\u5f55\u3001JSSDK\n\u2502 \u2502 \u2514 \u5fae\u4fe1\u652f\u4ed8\n\u2502 \u251c uni-app \u2605\n\u2502 \u2514 \u5176\u5b83\u591a\u7aef\u6846\u67b6 React Native\u3001Weex\u3001Rax\u3001Ionic\u3001Cordova\u3001Dcloud\u3001Instant\u3001WeX5\u3001uniapp\u3001Taro\u3001WePY\u3001mpvue\u3001kbone\u3001Mpx\u3001Chameleon\u3001megalo\u3001OKAM\u3001remax\n\u2514 \u684c\u9762\u7aef\n  \u251c https:\/\/github.com\/kusti8\/proton-native\n  \u251c [Electron](https:\/\/www.cnblogs.com\/tugenhua0707\/p\/11080473.html https:\/\/www.cnblogs.com\/tugenhua0707\/p\/11070243.html) \u2605 \u2714\n  \u2514 NW.js\n\n\u5de5\u5177\n\u251c Task &amp; Build \u6784\u5efa\u5de5\u5177\n\u2502 \u251c \u5305\u7ba1\u7406 npm\u3001Bower\u3001Yarn - https:\/\/yarn.bootcss.com\/docs\/migrating-from-npm.html\n\u2502 \u251c \u81ea\u52a8\u5316 &amp; \u811a\u624b\u67b6\n\u2502 \u2502 \u251c [\u5b9e\u73b0\u4e00\u4e2a\u811a\u624b\u67b6](https:\/\/segmentfault.com\/a\/1190000015222967)\n\u2502 \u2502 \u251c [gulp](http:\/\/javascript.ruanyifeng.com\/tool\/gulp.html)\n\u2502 \u2502 \u2514 grunt\n\u2502 \u2514 \u6a21\u5757\u5316\n\u2502   \u251c [webpack](https:\/\/www.cnblogs.com\/tugenhua0707\/p\/9384953.html) \u2605\n\u2502   \u251c Rollup \u2605\n\u2502   \u251c FIS3\n\u2502   \u2514 Parcel\n\u251c \u7f16\u8bd1\n\u2502 \u2514 Babel\n\u251c \u4ee3\u7801\u8ddf\u8e2a\n\u2502 \u2514 Sentry\n\u251c Linter(\u4ee3\u7801\u68c0\u67e5)\n\u2502 \u2514 TSLint, ESLint ...\n\u251c Unit testing(\u5355\u5143\u6d4b\u8bd5)\n\u2502 \u2514 Karma, jasmine, Mocah, Jest ...\n\u251c E2E testing - https:\/\/juejin.im\/entry\/589d6f072f301e0069bda275\n\u2502 \u2514 Cypress, Nightwatch, Spectron ...\n\u251c \u8c03\u8bd5\u5de5\u5177\n\u2502 \u251c WebView \u8c03\u8bd5\n\u2502 \u251c Chrome Dev Tool\n\u2502 \u2514 Charles\u3001Fiddleer\n\u251c IDE\n\u2502 \u2514 WebStorm\u3001Sublime Text\u3001VSCode\u3001Atom\u3001HBuilder\n\u251c \u7248\u672c\u63a7\u5236 - https:\/\/semver.org\/lang\/zh-CN\n\u2502 \u2514 Git\u3001SVN\n\u2514 \u5207\u56fe\n  \u251c UI \u534f\u4f5c\u5de5\u5177: \u84dd\u6e56\n  \u2514 PS\u3001Sketch\n\n\u5176\u4ed6\n\u251c \u6027\u80fd\u4f18\u5316\n\u2502 \u2514 [Lighthouse](https:\/\/github.com\/GoogleChrome\/lighthouse) \u2605\n\u2502   \u2514 Lighthouse\u96c6\u6210CI\uff1ahttps:\/\/github.com\/GoogleChromeLabs\/lighthousebot \u8fd8\u6709https:\/\/github.com\/GoogleChrome\/lighthouse-ci\n\u251c [graphQL](https:\/\/graphql.cn\/learn\/) \u2605\n\u251c PhantomJS\n\u251c [JWT](https:\/\/www.cnblogs.com\/tugenhua0707\/p\/10089894.html) \u2714\n\u251c \u6d4f\u89c8\u5668\n\u2502 \u251c Extension\n\u2502 \u251c \u6d4f\u89c8\u5668\u517c\u5bb9\n\u2502 \u251c \u9875\u9762\u6e32\u67d3\u673a\u5236\n\u2502 \u251c \u6d4f\u89c8\u5668\u7f13\u5b58\u673a\u5236\n\u2502 \u2514 \u8def\u7531\n\u251c PWA \u2605\n\u2514 XSS \u2714\n\n\u8ba1\u7b97\u673a\/\u7f51\u7edc\u57fa\u7840\n\u251c \u57fa\u7840\u79d1\u5b66\n\u2502 \u251c 1. \u79bb\u6563\u6570\u5b66\n\u2502 \u251c 2. \u6570\u5b57\u7535\u8def\n\u2502 \u251c 3. \u4f53\u7cfb\u7ed3\u6784\n\u2502 \u251c 4. \u6570\u636e\u7ed3\u6784\/\u7b97\u6cd5\n\u2502 \u2514 5. \u7f16\u8bd1\u539f\u7406\u5b66\n\u251c Server \u7aef\u7f16\u7a0b\n\u2502 \u251c Java\n\u2502 \u2502 \u251c [Halo](https:\/\/halo.run)\n\u2502 \u2502 \u2514 [spring boot](http:\/\/blog.didispace.com\/spring-boot-learning-2x\/) \u2605\n\u2502 \u251c PHP\n\u2502 \u2502 \u2514 Laravel \u2714\n\u2502 \u2514 [Python](https:\/\/bop.mol.uno) \u2605\n\u2502   \u251c asyncio\n\u2502   \u2514 Django\n\u251c \u7b97\u6cd5\u77e5\u8bc6 \u2605\n\u2502 \u2514 \u5e38\u89c1\u7684\u6570\u636e\u7ed3\u6784\u3001\u5e38\u89c1\u7684\u7b97\u6cd5\u3001\u590d\u6742\u5ea6\u3001\u7b97\u6cd5\u601d\u7ef4\u3001\u9ad8\u7ea7\u6570\u636e\u7ed3\u6784\n\u251c [\u8bbe\u8ba1\u6a21\u5f0f](https:\/\/www.runoob.com\/design-pattern\/design-pattern-tutorial.html) \u2605\n\u251c \u6570\u636e\u5e93\n\u2502 \u251c MySQL\n\u2502 \u2514 \u7f13\u5b58\u7cfb\u7edf\n\u2502   \u251c Redis \u2605\n\u2502   \u2514 memcached\n\u251c \u7f51\u7edc\u539f\u7406\u3001\u8f6f\u4ef6\u5de5\u7a0b\n\u251c \u7f51\u7edc\u77e5\u8bc6\n\u2502 \u2514 \u7f51\u7edc\u77e5\u8bc6\n\u2502   \u2514 header\u3001cookie\u3001CORS\u3001Cache\u3001Method\u3001\u72b6\u6001\u7801\n\u251c \u64cd\u4f5c\u7cfb\u7edf\n\u2502   \u2514 [Linux](https:\/\/www.runoob.com\/linux\/linux-tutorial.html)\n\u2502   \u2514 [Shell](https:\/\/www.runoob.com\/linux\/linux-shell.html)\n\u2514 \u8fd0\u7ef4\u77e5\u8bc6\n  \u251c \u81ea\u52a8\u90e8\u7f72 DevOps\u3001CI(\u6301\u7eed\u96c6\u6210)\n  \u2502 \u251c jenkins\n  \u2502 \u251c Travis CI\n  \u2502 \u251c Appveyor\n  \u2502 \u2514 Vercel\u3001Netlify\u3001[Surge](https:\/\/surge.sh)\n  \u251c \u81ea\u52a8\u5316\n  \u2502 \u251c Ansible\n  \u2502 \u2514 [spug](https:\/\/www.spug.dev)\n  \u251c \u6027\u80fd APM\n  \u2502 \u2514 Dapper\u3001Pinpoint\u3001SkyWalking\u3001Zipkin\n  \u251c \u96c6\u7fa4\u3001\u5206\u5e03\u5f0f\n  \u2502 \u2514 Zookeeper\u3001Kafka\u3001Hadoop\u3001ELK\n  \u251c [docker](https:\/\/www.runoob.com\/docker\/docker-tutorial.html)\n  \u2514 Nginx\u3001Apache\u3001Tomcat\u3001CDN\u3001jenkins\u3001\u8d1f\u8f7d\u5747\u8861\n<\/code><\/pre>\n<p>\u524d\u7aef\u7a0b\u5e8f\u5458\u6280\u672f\u65b9\u5411<\/p>\n<p>\u524d\u7aef\u6280\u672f \u2192<br \/>\n\u540e\u7aef\u6280\u672f \u2192<br \/>\n\u670d\u52a1\u5668\u6280\u672f \u2192<br \/>\n\u7f51\u7edc\u6280\u672f \u2192<br \/>\n\u64cd\u4f5c\u7cfb\u7edf<\/p>\n","protected":false},"excerpt":{"rendered":"<p>2019 \u5e74 Web \u5f00\u53d1\u6280\u672f\u6307\u5357\u548c\u8d8b\u52bf \u5907\u7528\u5730\u5740 \u524d\u7aef\u57fa\u7840 \u251c HTML \u2502 \u251c \u6807\u51c6\u3001\u8bed\u4e49\u5316 \u2502 \u251c iframe\u3001&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-1001","post","type-post","status-publish","format-standard","hentry","category-fe"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/feizhaojun.com\/index.php?rest_route=\/wp\/v2\/posts\/1001","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/feizhaojun.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/feizhaojun.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/feizhaojun.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/feizhaojun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1001"}],"version-history":[{"count":17,"href":"https:\/\/feizhaojun.com\/index.php?rest_route=\/wp\/v2\/posts\/1001\/revisions"}],"predecessor-version":[{"id":2917,"href":"https:\/\/feizhaojun.com\/index.php?rest_route=\/wp\/v2\/posts\/1001\/revisions\/2917"}],"wp:attachment":[{"href":"https:\/\/feizhaojun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/feizhaojun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/feizhaojun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}