这两天在优化环球网首页的加载速度，为了减少DOM的加载时间，我才用了webComponent的方式去分解了DOM。

简单记载下吧～

有过angularjs开发经验的哥们，对于webComponent的初体验应该都和我差不多吧，这尼玛简直就是指令好不～

其实我到现在也是有这个感觉的～

言归正传，WebComponent通过一个标准化的非侵入的方式封装了一个组件，每个组件都能够组织好它自身的html结构，css样式以及ajvascript的代码，并且不受外界的影响。

其实这是非常不得了的事情，这就意味着组件化，模块化开发非常非常的犀利了有木有

说到web Component，shadow DOM也必须说下。

开发者通过shadow DOM在文档流中创建了一些完全独立于其他元素的子DOM树。由于这个特性，使我们可以封装一些具有独立功能的组件，并且可以保证不会在无意中干扰到别的DOM。shadow DOM和标准的DOM一样，可以设置它的样式，也可以用javascript来操作他的行为。主文档和基于shadow DOM创建的独立组件之间互不干扰。所以组件的复用变得异常的简单！

对于别的这些东西就不多说了，直接上代码吧，直观点

而在index页面中我们需要引入这个template页面，然后在 html中直接用就可以了

注意我这里还引入了webcomponent.js的插件，是为了解决浏览器兼容性的问题的。

还有这个页面的打开需要个服务器打开，不然会有CORS错误。