如果一个前端页面中可能引入多个独立的组件，这些独立的组件与页面的技术栈无关，如一个使用 React、Vue 开发的页面引入了一个原生的 Web 组件，此时这些独立组件的共享缓存就是一个值得关注的问题。
按照常规的思路，页面如果要引入 A 和 B 两个组件，两个组件都依赖了相同的模块 @lib，如果希望将模块 @lib 缓存共享，那么一般的做法是将共享模块单独提供一个 JS 包，无论是 A 或 B 的包在加载前都先加载好共享缓存包，此时就会存在三个包，对应着三个独立的请求。对于移动 App 来说，原本是两个组件包两个请求，但此时请求数的增加意味着由于为了实现缓存共享而降低了可用性。
在 JavaScript 程序的开发中，经常会用到一些频繁触发的 DOM 事件，如 mousemove、resize，还有不是那么常用的鼠标滚轮事件：mousewheel (在 Firefox 中，滚轮事件为 DOMMouseScroll)。
浏览器为了确保这些事件能够及时响应，触发的频率会比较高，具体的触发频率各浏览器虽然有出入，但出入不大。很多时候在需要注重性能的场景下使用这些事件会想各种办法对事件的触发频率进行优化，下面说说我的一些优化方法。
拖拽( Drag )是很常见的一个功能，在浏览器还没实现原生的拖拽之前，通过 mousedown、mousemove、mouseup 3种事件类型就可以模拟出拖拽效果来，当然这里不谈如何去实现一个拖拽功能。
mousemove 事件在拖拽的应用中既要确保拖拽的流畅度，又要确保拖拽时的性能，如何保持两者的平衡呢？
Pinterest 当时的成功，在国内掀起了一股瀑布流的潮流，但很多国内的网站仅仅只学会了使用瀑布流的布局方式，却没有看到 Pinterest 成功背后的模式。页面的布局方式仅仅是一个壳，瀑布流的布局方式也最多算是一个漂亮的壳。如果没有实质性的内容，光有壳就只能让用户图个新鲜。就好比帅哥美女仅仅是外表漂亮，而没有内涵和气质一样。
瀑布流展现的内容通常是扁平化、琐碎的东西，首先吸引人的应该是图片，如果瀑布流中文字过多，只会给人很杂乱的感觉，所以瀑布流更适合单纯的图片浏览。
最近公司的项目–360图片的美女秀场，就用到了瀑布流的布局方式，这种纯粹的看美女图片的页面用瀑布流还是挺合适的。
以前并未开发过瀑布流布局的网站，第一个想到的实现方式就是多列浮动，从表面上看这种方式要简单。
但是，目前主流的瀑布流布局都是采用定位的方式，对每个单元格计算定位值，如下图：
从制定计划，到前后端的开发，最后到测试以及上线，历时4个月，5173首页前端性能优化项目终于顺利上线，并达到了预期的性能优化目标。这次的项目并不是改版，而是原来首页的设计和功能不变，只做重构和优化。虽然项目名叫前端的性能优化，但也并不仅仅是前端单方面的工作，要想彻底的把优化做好，就需要前后端的通力配合。
老首页应该是09年上线的，首页也是各部门争夺资源的地方，大家都想在首页有一席之地，各部门在首页都有各自的小豆腐块，如果有新项目的上线，大多是打补丁的方式，并且唯一的规范就是能保证功能正常运行，至于性能方面，那是很遥远的事。苦逼的是开发人员，每次有首页的修改都是担惊受怕的，怕改了这个那个又出问题，历史原因造成的问题越来越多。
最先看不下去的应该是前端人员，因为首页在不断的修修补补中，性能已经差到前端人员觉得很没面子的地步了。但是看不下去也仅仅是看不下去，没法采取实质性的措施来改善，因为这牵涉到各部门的利益，也如上面说的，优化不仅仅在于前端，于是前端人员也只能向上面反映问题。到了今年，终于领导也看不下去了，某领导在海外访问我司的818和5173首页，对比起来前者首页很快(插播一句，818首页前端开发人员也正是我^_^)，后者首页很慢，差别较大。于是在领导重视的推动下，5173首页的前端性能优化项目才经过批准，开发人员终于可以放手大胆的折腾了。
很多第三方的广告系统都是使用document.write来加载广告，如下面的一个javascript的广告链接。
<script type="text/javascript" src="http://gg.5173.com/adpolestar/5173/ ;ap=2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC;ct=js;pu=5173;/?"></script>
这个javascript请求返回的是这样的一段代码：
document.write( "<a href='http://gg.5173.com/adpolestar/wayl/;" + "ad=6FF3F844_33E6_86EE_3B96_D94C1CF1AEC4;ap=2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC;" + "pu=5173;/?http://www.7bao.com/g/xlsbz/index' target='_blank'><img src='" + "http://html.5173cdn.com/market/yunyinga/xly132.gif' " + "border='0' width="132px" height="58px" /></a>" );
这种看似有点二的加载方式，但是你却没办法改造它，因为它本身就是第三方的。并且代码都添加了统计的功能，上面的javascript的广告链接每请求一次都会统计一次，生成的代码也有点击统计的功能，也就是说必须以这种方式来进行加载。
document.write是在页面渲染的时候同步进行的，必须要等javascript代码下载好并且document.write执行完后才接着渲染后面的内容，如果广告比较多的话，就会导致页面阻塞，尤其是在页面的首屏插好几个图片尺寸比较大的这种广告，那么阻塞情况就相当明显和严重，会让用户觉得你这个网页很慢。
