origin
The early 1990s, Turing Award winner Tim Berners-Lee created the one of the greatest inventions in the computer field - the World Wide Web, realized the first communication with the HTTP proxy server. He defined the three basic technologies of Web URI, HTTP and HTML: URI routing solution representation of the document and addressing; HTTP protocol to address transmission in the form of a document; HTML solve organizational form of the document. From the design principles that he thought should have to reduce the complexity of the document development and publish as much as possible, to establish a distributed system of freedom, openness and interoperability. Site deployment should be simple, efficient, and users do not need to download, only through an HTTP proxy software - browser, you can quickly get the desired resource. In this vision, Tim Berners-Lee in his NeXT computer (Steve Jobs founded) to set up the world's first Web server and Web browser, domain name http://info.cern.ch/ , continues to this day .
zzpic19728.jpg
<Figcaption style = "margin-top: 0.66667em; padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb (153, 153, 153);"> program members Mike </ figcaption>
war
Subsequently, as most people expected, the browser was involved in endless commercial wars, the first browser wars, browser war a second time, the third time the browser wars ....... In the interests of the trend, various insidious means endless: the operating system bundle version of the browser, the browser bundled with a search engine, the browser bundled portal *** viruses modify the home, rogue security software changes the home page, made "independent research and development "browser cheat subsidies ....... At the same time, competition has spawned a growing number of programmers varieties, front-end engineers, network engineers, PHP engineers, optimization engineers ......; competition has accelerated product improvement and change, things survival of the fittest, Mosaic, Netscape, IE browser have died , safe, beautiful, high-performance browser stand out; the competition has accelerated the iterative and technological progress, numerous layout engine, script interpreter engine came into being, KHTML, Webkit, Trident, Gecko, Blink, Presto ......, Chakra, Carakan , JavaScriptCore, SpiderMonkey, V8 ....... I have to say, there is no war, there is no competition, there is no prosperity and flourishing now the front circle.
<Figcaption style = "margin-top: 0.66667em; padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb (153, 153, 153);"> Browse It stands about an school </ figcaption>
revolution
然而，事情并非这么顺利，竞争与迭代带来了很多兼容性遗留问题。新型浏览器为了表示它们完全支持旧浏览器提供的特性，在 UA 标志上动手脚，伪装成目标浏览器，并增加自己的独特标志。浏览器厂商为了提升市场份额，以差异化为准则不断改进产品，提升竞争力，却没有一套统一的标准来约束基础技术架构。为此，以 Tim Berners-Lee 为首的人在 1994 年创建了非营利组织 W3C，作为中立机构，致力于 Web 标准化的制定，指导浏览器正确地工作，推动技术稳定有序地发展。但是，历史总是在曲折中前进，其中有一段时间 W3C 甚至剑走偏锋，意图放弃 HTML 转而推广 XHTML，受到厂商和用户的一致反对。因此，由 Opera、Mozilla 基金会、苹果这些浏览器厂商成成了 WHATWG 工作组，继续编写和扩展 HTML 标准。直至今天，W3C 和 WHATWG 两个机构同时在运作。WHATWG 制定的标准称为 Living Standard，W3C 制定的标准成为 Recommendation；WHATWG 只负责跟进最新的标准，W3C 会对历史版本标准进行归档；WHATWG 制定的标准更加激进，W3C 只提供成熟、稳定且大部分已经被浏览器实现的标准；WHATWG 社区更加活跃，W3C 会复制粘贴他们的成果。另外，即使有标准的制定和约束，但并非强制性要求，浏览器厂商可以根据自己的情况选择性支持其中之一。
<figcaption style="margin-top: 0.66667em; padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">W3C/WHATWG 拳打脚踢</figcaption>
危机
唯物辩证法指出，一切存在的事物都由既相互对立、又相互统一的一对矛盾组合而成：标准制定者与浏览器开发者、浏览器开发者与 Web 开发者、Web 开发者与 Web 用户群体。标准制定者抱怨浏览器开发者不按照他们所制定的标准来实现，后者抱怨前者太过偏激、草率；Web 开发者抱怨浏览器开发者解析执行代码效率过低，后者抱怨前者调用姿势错误；Web 用户群体抱怨 Web 开发者写的界面太丑、交互不合理、BUG 太多，后者抱怨前者用户行为诡异、不按常理出牌。虽然说矛盾推动了技术的发展，但同时也带来了更大的危机和冲突。浏览器各种功能和特性的差异化给 Web 开发者带来了极大的困扰与痛苦，不得不采取各种 hack 手段、兼容手段，让代码在任一浏览器内无差错执行。开源社区也涌现了大量的解决方案，致力于抹平浏览器之间的差异。core-js 基于 ES3 的语法提供 ES5、ES2015+ 的特性 Polyfill；Autoprefixer 基于 caniuse-db 来决定是否添加浏览器私有样式前缀；Babel 基于 compat-table 来编译高阶语法到低阶语法；Browserslist 基于 BrowserStack 来统计市场份额以及提供浏览器产品列表。即使如此，仍存在一些不可抗力因素，使得 Web 开发者没有办法弥合或彻底消除这些差异。比如，Service Worker、Web Worker、WebAssembly、Web Bluetooth、Proxy、Grid Layout、<dialog> Element、CSS Houdini 等这些特性，我们没有办法通过上诉方式解决。
<figcaption style="margin-top: 0.66667em; padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">世界末日？</figcaption>
净化
痛点并不是完全无法解决。我们的诉求是需要一种手段来解决产品差异化带来的问题，一种手段是兼容低版本浏览器；另一种手段是只适配高版本浏览器，并且告知用户应该升级他们的浏览器，才能正常使用我们的服务。无论使用哪种手段，我们都应该要去避免这种情况：页面加载后一片空白或者点击某个按钮完全没有响应，页面布局错位、页面脚本执行错误，然而用户并不知道我们的网站不兼容他们的浏览器。为了解决这个问题，我们可以想到有很多方案，一种简单的方案是使用条件注释，比如 <!–[if lt IE 9]>...<![endif]–>；一种方案是基于特性的检测，检查全局对象 window 是否存在某个对应属性；另一种更好的方案是使用 UA 判断，在页面运行期间检测当前代理是否满足开发者的要求，遗憾的事实是社区中并没有一个很好的通用方案来实现这个目标。因此，我们按照后者的设想，致力于提供一个工具，并集成于现有的前端工具链中，来达到目标。
<figcaption style="margin-top: 0.66667em; padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">“这次可能真的成了!”</figcaption>
诞生
Obsolete Webpack Plugin is the author in his spare time tool developed to detect the user's browser supports website code. The method is very simple, when the page is in the Idle state, the developer detection UA meets a preset target browser. If the pairing fails, execute the script, the default template into the DOM tree to remind users that their browser does not support, you should upgrade or download a new browser, avoiding blank perplexed situation. Tools difficult to get started, configuration complexity is low, our community based on the most common and widely dependent on the underlying library Browserslist as the default input, seamless integration into the current front-end tool chain, so I finally decided to choose Webpack plug-in as a starting point, when you package additional ES3 compatible generate a script syntax, combined with HTML Webpack Plugin injected into the HTML together.
The wheel of history rolls on, finally, I wish all Web developers have a pleasant development experience, allowing users to use better technology affects the browser, rather than allowing users to hinder the progress of technology.
9eff325416be933216924134f29095d.jpg