"\u003cp\u003e说明ie浏览器不支持Promise，可搜索关键字 polyfill，引入以下库即可\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e\u003ca href=\"https://cdn.polyfill.io/v2/polyfill.min.js?features=es6\"\u003ehttps://cdn.polyfill.io/v2/polyfill.min.js?features=es6\u003c/a\u003e\u003c/p\u003e\u003c/blockquote\u003e\n\u003cp\u003e官方文档： \u003ca href=\"https://cdn.polyfill.io/v2/docs/\"\u003ehttps://cdn.polyfill.io/v2/docs/\u003c/a\u003e\n参考： \u003ca href=\"https://www.cnblogs.com/XHappyness/p/7919610.html\"\u003ehttps://www.cnblogs.com/XHappyness/p/7919610.html\u003c/a\u003e\n参考： \u003ca href=\"https://www.jianshu.com/p/2888a8e204e8\"\u003ehttps://www.jianshu.com/p/2888a8e204e8\u003c/a\u003e\u003c/p\u003e"

"\u003cp\u003e有时候我们需要根据自己的需要对 weui默认的颜色进行修改，如果在每个单面里修改的过过于麻烦，我们可以使用一个less配置文件来实现对默认配置进行重置。\u003c/p\u003e\n\u003cp\u003e修改 webpack.base.conf.js 文件，找到\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003emodule.exports = vuxLoader.merge(webpackConfig, {\n plugins: [\u0026#39;vux-ui\u0026#39;, \u0026#39;progress-bar\u0026#39;, \u0026#39;duplicate-style\u0026#39;, ]\n})\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e修改如下：\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003emodule.exports = vuxLoader.merge(webpackConfig, {\n plugins: [\u0026#39;vux-ui\u0026#39;, \u0026#39;progress-bar\u0026#39;, \u0026#39;duplicate-style\u0026#39;, {\n name: \u0026#39;less-theme\u0026#39;,\n path: \u0026#39;src/theme.less\u0026#39;\n }]\n})\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e然后在项目的 src 目录里创建文件 theme.less， …\u003c/p\u003e"

"\u003cp\u003e利用@media screen可以适应不同屏幕大小，做出相应的界面调整；\u003c/p\u003e\n\u003cp\u003e在css中@media (min-width: 768px)表示最小是768也就是\u0026gt;=768；\u003c/p\u003e\n\u003cp\u003e@media (min-width: 768px){ //\u0026gt;=768的设备 }\u003c/p\u003e\n\u003cp\u003e@media (min-width: 992px){ //\u0026gt;=992的设备 }\u003c/p\u003e\n\u003cp\u003e@media (min-width: 1200){ //\u0026gt;=1200的设备 }\u003c/p\u003e\n\u003cp\u003e注意下顺序，如果你把@media (min-width: 768px)写在了下面那么很悲剧，\u003c/p\u003e\n\u003cp\u003e@media (min-width: 1200){ //\u0026gt;=1200的设备 }@media (min-width: 992px){ //\u0026gt;=992的设备 }@media (min-width: 768px){ //\u0026gt;=768的设备 }因为如果是1440,由于1440\u0026gt;768那么你的1200就会失效。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e所以我们用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e@media …\u003c/p\u003e"

"\u003cp\u003e有时间我们要实现动态修改URL地址，同时更新部分页面内容，但不刷新整个页面，这种情况下用就需要用到一些pjax技术了。\u003c/p\u003e\n\u003cp\u003ewindow.history.replaceState 和 window.history.pushState 类似，不同之处在于replaceState不会在window.history里新增历史记录点，其效果类似于window.location.replace(url)，都是不会在历史记录点里新增一个记录点的。当你为了响应用户的某些操作，而要更新当前历史记录条目的状态对象或URL时，使用replaceState()方法会特别合适, 两者的参数是完全一样的。\u003c/p\u003e\n\u003cp\u003ewindow.history.replaceState(state, title , url) // “页面标题”目前浏览器暂不支持\u003c/p\u003e\n\u003cp\u003estate：一个与指定网址相关的状态对象{}，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。\u003c/p\u003e\n\u003cp\u003etitle：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。\u003c/p\u003e\n\u003cp\u003eurl：新的网址，必须与当前页面处在同一个域。浏览器的地址栏 …\u003c/p\u003e"

"\u003cpre tabindex=\"0\"\u003e\u003ccode\u003e$(function () {\n var chart = new Highcharts.Chart({\n chart: {\n renderTo: \u0026#39;container\u0026#39;\n },\n lang｛\n printChart:\u0026#34;打印图表\u0026#34;,\n downloadJPEG: \u0026#34;下载JPEG 图片\u0026#34;\n downloadPDF: \u0026#34;下载PDF文档\u0026#34;\n downloadPNG: \u0026#34;下载PNG 图片\u0026#34;\n downloadSVG: \u0026#34;下载SVG 矢量图\u0026#34;\n exportButtonTitle: \u0026#34;导出图片\u0026#34;\n ｝，\n .....\n })\n})\n\u003c/code\u003e\u003c/pre\u003e"

"\u003cp\u003e在学习vue前，建立先了解一下 webpack \u003ca href=\"https://fakefish.github.io/react-webpack-cookbook/index.html\"\u003ehttps://fakefish.github.io/react-webpack-cookbook/index.html\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e官方网站（中文版）： \u003ca href=\"http://cn.vuejs.org/\"\u003ehttp://cn.vuejs.org/\u003c/a\u003e\n构建大型应用使用组件 Vue-router: \u003ca href=\"https://github.com/vuejs/vue-router\"\u003ehttps://github.com/vuejs/vue-router\u003c/a\u003e\n网络通讯插件Vue-resource： \u003ca href=\"https://github.com/vuejs/vue-resource\"\u003ehttps://github.com/vuejs/vue-resource\u003c/a\u003e\n单元测试karma： \u003ca href=\"http://karma-runner.github.io/0.12/index.html\"\u003ehttp://karma-runner.github.io/0.12/index.html\u003c/a\u003e \u003ca href=\"https://cn.vuejs.org/\"\u003ehttps://cn.vuejs.org/\u003c/a\u003e \u003ca href=\"https://cn.vuejs.org/v2/api/\"\u003ehttps://cn.vuejs.org/v2/api/\u003c/a\u003e \u003ca href=\"https://router.vuejs.org/zh-cn/\"\u003ehttps://router.vuejs.org/zh-cn/\u003c/a\u003e \u003ca href=\"https://vuex.vuejs.org\"\u003ehttps://vuex.vuejs.org\u003c/a\u003e \u003ca href=\"https://vue-loader.vuejs.org/zh-cn/\"\u003ehttps://vue-loader.vuejs.org/zh-cn/\u003c/a\u003e \u003ca href=\"https://ssr.vuejs.org\"\u003ehttps://ssr.vuejs.org …\u003c/a\u003e\u003c/p\u003e"

"\u003cp\u003ejQuery.extend和jQuery.fn.extend的区别，其实从这两个办法本身也就可以看出来。很多地方说的也不详细。这里详细说说之间的区别.\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e我们先把jQuery看成了一个类，这样好理解一些。\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003ejQuery.extend()，是扩展的jQuery这个类。\u003c/p\u003e\n\u003cp\u003e假设我们把jQuery这个类看成是人类，能吃饭能喝水能跑能跳，现在我们用jQuery.extend这个方法给这个类拓展一个能唱歌的技能。这样的话，不论是男人，女人，xx人…..等能继承这个技能（方法）了。\u003c/p\u003e\n\u003cp\u003e可以如下图这样写着：\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"http://blog.haohtml.com/wp-content/uploads/2016/02/jquery-1.png\"\u003e\u003cimg src=\"https://blogstatic.haohtml.com//uploads/2023/09/jquery-1.png\" alt=\"jquery-1\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003col start=\"2\"\u003e\n\u003cli\u003e然后：$.liu();这样就能打印出来”liu“这个字符串\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003e代码在下面：\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"http://blog.haohtml.com/wp-content/uploads/2016/02/jquery-2.png\"\u003e\u003cimg src=\"https://blogstatic.haohtml.com//uploads/2023/09/jquery-2.png\" alt=\"jquery-2\"\u003e\u003c/a\u003e 3. 这说明啥啊，这说明.liu()变成了jQuery这个类本身的方法（object）嘛。他现在能”唱歌“了。但是吧，这个能力啊，只有代表全人类的 jQuery 这个类本身，才能用啊。你个人想用，你张三李四王五麻六，你个小草民能代表全人类嘛？\u003c/p\u003e\n\u003cp\u003e所以啊，这个扩展也就是所谓的静态方法。只跟这个 类 本身有关。跟你具体的实例化对象是没关系滴。\u003c/p\u003e\n\u003cp\u003e我们再看看jQuery.fn.extend()这个方法。\u003c/p\u003e\n\u003cp\u003e从字面理解嘛，这个拓展 …\u003c/p\u003e"

"\u003cp\u003e\u003cstrong\u003e一、垃圾回收的必要性\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e下面这段话引自《JavaScript权威指南（第四版）》\u003c/p\u003e\n\u003cp\u003e_　　由于字符串、对象和数组没有固定大小，所有当他们的大小已知时，才能对他们进行动态的存储分配。JavaScript程序每次创建字符串、数组或对象时，解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存，最终都要释放这些内存以便他们能够被再用，否则，JavaScript的解释器将会消耗完系统中所有可用的内存，造成系统崩溃。_\u003c/p\u003e\n\u003cp\u003e这段话解释了为什么需要系统需要垃圾回收，JS不像C/C++，他有自己的一套垃圾回收机制（Garbage Collection）。JavaScript的解释器可以检测到何时程序不再使用一个对象了，当他确定了一个对象是无用的时候，他就知道不再需要这个对象，可以把它所占用的内存释放掉了。例如：\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003evar a = \u0026#34;before\u0026#34;;\nvar b = \u0026#34;override a\u0026#34;;\nvar a = b; //重写a\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e这段代码运行之后，“before”这个字符串失去了引用（之前是被a引用），系统检测到这个事实之后，就会释放该字符串的存储空间以便这些空间可以被再利 …\u003c/p\u003e"

"\u003cp\u003e\u003ca href=\"http://flowtype.org/\"\u003ehttp://flowtype.org/\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e对于flow的介绍可以参考： \u003ca href=\"http://blog.jobbole.com/80364/\"\u003ehttp://blog.jobbole.com/80364/\u003c/a\u003e\u003c/p\u003e"

"\u003cp\u003eReact 入门实例教程: \u003ca href=\"http://www.ruanyifeng.com/blog/2015/03/react.html\"\u003ehttp://www.ruanyifeng.com/blog/2015/03/react.html\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eReact 入门实例教程实例： \u003ca href=\"https://github.com/ruanyf/react-demos\"\u003ehttps://github.com/ruanyf/react-demos\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eReact+Babal+WebPack: \u003ca href=\"https://github.com/ruanyf/react-babel-webpack-boilerplate\"\u003ehttps://github.com/ruanyf/react-babel-webpack-boilerplate\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eReact Router 使用教程: \u003ca href=\"http://www.ruanyifeng.com/blog/2016/05/react_router.html\"\u003ehttp://www.ruanyifeng.com/blog/2016/05/react_router.html\u003c/a\u003e \u003ca href=\"https://github.com/reactjs/react-router\"\u003ehttps://github.com/reactjs/react-router\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eReact学习资料： \u003ca href=\"http://www.infoq.com/cn/react1/\"\u003ehttp://www.infoq.com/cn/react1/\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eReact中CSS样式模块： \u003ca href=\"https://css-modules.github.io/webpack-demo/\"\u003ehttps://css-modules.github.io/webpack-demo/\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e深入浅出React（一）：React的设计哲学 – 简单之美 \u003ca href=\"http://www.infoq.com/cn/articles/react-art-of-simplity\"\u003ehttp://www.infoq.com/cn/articles/react-art-of-simplity …\u003c/a\u003e\u003c/p\u003e"

"\u003cp\u003e当你在写react的时候报了类似于这样子的错：\u003cstrong\u003eEach child in an array or iterator should have a unique “key” prop.Check the render method of \u003ccode\u003exxxx\u003c/code\u003e. See \u003ca href=\"https://fb.me/react-warning-keys\"\u003ehttps://fb.me/react-warning-keys\u003c/a\u003e for more information.\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e原因是这样子的：\u003cstrong\u003eReact can’t know that your array is static, so you get the warning. The most practical thing to do here is to write something like.\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e解决办法只要在循环的每个子项添加一个key就行了，代码如下：\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003evar names = [\u0026#39;Alice\u0026#39;, \u0026#39;Emily\u0026#39;, \u0026#39;Kate\u0026#39;];\n\nReactDOM.render(\n \u0026lt;div\u0026gt;\n {\n names.map(function (name, …\u003c/code\u003e\u003c/pre\u003e"

"\u003cp\u003ejquery插件开发文档：\u003c/p\u003e\n\u003cp\u003e以下为一简单的实例：\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003echajia.js:\u003c/strong\u003e\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-js\" data-lang=\"js\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e(\u003cspan style=\"color:#66d9ef\"\u003efunction\u003c/span\u003e(\u003cspan style=\"color:#a6e22e\"\u003e$\u003c/span\u003e) {\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e//录入框点击事件\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e\u003c/span\u003e\u003cspan style=\"color:#a6e22e\"\u003e$\u003c/span\u003e.\u003cspan style=\"color:#a6e22e\"\u003efn\u003c/span\u003e.\u003cspan style=\"color:#a6e22e\"\u003ealertWhileClick\u003c/span\u003e \u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e \u003cspan style=\"color:#66d9ef\"\u003efunction\u003c/span\u003e() {\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003e$\u003c/span\u003e(\u003cspan style=\"color:#66d9ef\"\u003ethis\u003c/span\u003e).\u003cspan style=\"color:#a6e22e\"\u003eclick\u003c/span\u003e(\u003cspan style=\"color:#66d9ef\"\u003efunction\u003c/span\u003e(){\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003ewindow.\u003cspan style=\"color:#a6e22e\"\u003econsole\u003c/span\u003e.\u003cspan style=\"color:#a6e22e\"\u003elog\u003c/span\u003e(\u003cspan style=\"color:#960050;background-color:#1e0010\"\u003e‘\u003c/span\u003e\u003cspan style=\"color:#a6e22e\"\u003eexecute\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003eclick\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003eevent\u003c/span\u003e\u003cspan style=\"color:#960050;background-color:#1e0010\"\u003e’\u003c/span\u003e);\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003ealert\u003c/span\u003e(\u003cspan style=\"color:#a6e22e\"\u003e$\u003c/span\u003e(\u003cspan style=\"color:#66d9ef\"\u003ethis\u003c/span\u003e).\u003cspan style=\"color:#a6e22e\"\u003eval\u003c/span\u003e());\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e});\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003ewindow.\u003cspan style=\"color:#a6e22e\"\u003econsole\u003c/span\u003e.\u003cspan style=\"color:#a6e22e\"\u003elog\u003c/span\u003e(\u003cspan style=\"color:#960050;background-color:#1e0010\"\u003e‘\u003c/span\u003e\u003cspan style=\"color:#a6e22e\"\u003eok2\u003c/span\u003e\u003cspan style=\"color:#960050;background-color:#1e0010\"\u003e’\u003c/span\u003e);\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e}\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e//获取页面最大div的最大高度\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e\u003c/span\u003e\u003cspan style=\"color:#a6e22e\"\u003e$\u003c/span\u003e.\u003cspan style=\"color:#a6e22e\"\u003efn\u003c/span\u003e.\u003cspan style=\"color:#a6e22e\"\u003emaxHeight\u003c/span\u003e \u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e \u003cspan style=\"color:#66d9ef\"\u003efunction\u003c/span\u003e(){\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#66d9ef\"\u003evar\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003emax\u003c/span\u003e \u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e \u003cspan style=\"color:#ae81ff\"\u003e0\u003c/span\u003e;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#66d9ef\"\u003ethis\u003c/span\u003e.\u003cspan style=\"color:#a6e22e\"\u003eeach\u003c/span\u003e(\u003cspan style=\"color:#66d9ef\"\u003efunction\u003c/span\u003e(){\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003ewindow.\u003cspan style=\"color:#a6e22e\"\u003econsole\u003c/span\u003e.\u003cspan style=\"color:#a6e22e\"\u003elog\u003c/span\u003e(\u003cspan style=\"color:#960050;background-color:#1e0010\"\u003e‘\u003c/span\u003e\u003cspan style=\"color:#a6e22e\"\u003ea\u003c/span\u003e\u003cspan style=\"color:#960050;background-color:#1e0010\"\u003e’\u003c/span\u003e);\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003emax\u003c/span\u003e \u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e Math.\u003cspan style=\"color:#a6e22e\"\u003emax\u003c/span\u003e(\u003cspan style=\"color:#a6e22e\"\u003emax\u003c/span\u003e, \u003cspan style=\"color:#a6e22e\"\u003e$\u003c/span\u003e(\u003cspan style=\"color:#66d9ef\"\u003ethis\u003c/span\u003e).\u003cspan style=\"color:#a6e22e\"\u003eheight\u003c/span\u003e());\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e});\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#66d9ef\"\u003ereturn\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003emax\u003c/span\u003e;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e}\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e})(\u003cspan style=\"color:#a6e22e\"\u003ejQuery\u003c/span\u003e);\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e//插件用法\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e\u003c/span\u003e\u003cspan style=\"color:#a6e22e\"\u003e$\u003c/span\u003e(\u003cspan style=\"color:#66d9ef\"\u003efunction\u003c/span\u003e(){\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003e$\u003c/span\u003e(\u003cspan style=\"color:#960050;background-color:#1e0010\"\u003e‘#\u003c/span\u003e\u003cspan style=\"color:#a6e22e\"\u003elogin_username\u003c/span\u003e\u003cspan style=\"color:#960050;background-color:#1e0010\"\u003e’\u003c/span\u003e).\u003cspan style=\"color:#a6e22e\"\u003ealertWhileClick\u003c/span\u003e();\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#66d9ef\"\u003evar\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003etallest\u003c/span\u003e \u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003e$\u003c/span\u003e(\u003cspan style=\"color:#960050;background-color:#1e0010\"\u003e‘\u003c/span\u003e\u003cspan style=\"color:#a6e22e\"\u003ediv\u003c/span\u003e\u003cspan style=\"color:#960050;background-color:#1e0010\"\u003e’\u003c/span\u003e).\u003cspan style=\"color:#a6e22e\"\u003emaxHeight\u003c/span\u003e(); …\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e"

"\u003cp\u003e随着 web 发展，前端应用变得越来越复杂，基于后端的 javascript(Node.js) 也开始崭露头角，此时 javascript 被寄予了更大的期望，与此同时 javascript MVC 思想也开始流行起来。javascript 模板引擎作为数据与界面分离工作中最重要一环，越来越受开发者关注，近一年来在开源社区中更是百花齐放，在 Twitter、淘宝网、新浪微博、腾讯QQ空间、腾讯微博等大型网站中均能看到它们的身影。\u003c/p\u003e\n\u003cp\u003e本文将用最简单的示例代码描述现有的 javascript 模板引擎的原理，包括新一代 javascript 模板引擎 artTemplate 的特性实现原理，欢迎共同探讨。\u003c/p\u003e\n\u003ch2 id=\"arttemplate-介绍\"\u003eartTemplate 介绍\u003c/h2\u003e\n\u003cp\u003eartTemplate 是新一代 javascript 模板引擎，它采用预编译方式让性能有了质的飞跃，并且充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍。\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"http://cdc.tencent.com/wp-content/uploads/2012/06/1.png\" alt=\"速度对比\"\u003e\u003c/p\u003e\n\u003cp\u003e除了性能优势外，调试功能也值得一提。模板调试 …\u003c/p\u003e"

"\u003cp\u003e如题：用jquery form提交表单，用jquery validate做数据验证 ，现在的问题是分别使用validate有作用，一起使用，则validate不起作用，谁遇到过帮忙解决下。\u003c/p\u003e\n\u003col start=\"2\"\u003e\n\u003cli\u003e\n\u003cp\u003e  $(document).ready(function() {\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e    $(“#inputForm”).validate({\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e    …\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e         });\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e  });\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e  function onsubmit(){\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e    var options ={\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e       …\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e    };\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e    $(‘#inputForm’).ajaxSubmit(options); //options\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e    return false;\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e  }\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003e==================\u003c/p\u003e\n\u003cp\u003e补充一下，这个submitHandler:function(){}方法内可以写任何方法。但最后要有一个form.submit或form.ajaxSubmit\n比如我这个\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\n\u003cp\u003e$(document).ready(function(){ …\u003c/p\u003e\u003c/li\u003e\u003c/ol\u003e"

"\u003cp\u003eaddinput.js\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e//======================\n//功能:在表单中input file控件\n//参数:parentID—要插入input file控件的父元素ID\n// inputID—-input file控件的ID,这个一定要和name保持一致的，否则会出问题\n// maxNum — 最大数量 0为不限制\n//======================\nfunction createInput(parentID,inputFileID, maxNum){\u003c/p\u003e\n\u003cp\u003eif (maxNum \u0026gt; 0) {\nx=document.getElementsByName(inputFileID);\ny=x.length;\nif (y \u0026gt;= maxNum) {\nalert(‘最多只允许添加’ + maxNum + ‘个’);\nreturn false;\n}\n}\u003c/p\u003e\n\u003cp\u003evar parent=$G(parentID);//获取父元素\u003c/p\u003e\n\u003cp\u003evar div=document.createElement(“div”);//创建一个div容器用于包含input file\nvar …\u003c/p\u003e\u003c/blockquote\u003e"

"\u003cp\u003e\u003ca href=\"http://blog.haohtml.com/wp-content/uploads/2012/08/jquery-ui-datepicker-chinese.png\"\u003e\u003cimg src=\"http://blog.haohtml.com/wp-content/uploads/2012/08/jquery-ui-datepicker-chinese.png\" alt=\"\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e以前在使用 js 日历时，没有使用过 \u003ca href=\"http://jqueryui.com/demos/datepicker/\"\u003ejQuery Datepicker\u003c/a\u003e，今天第一次使用发现非常的好用。使用时需要将日历文字显示为中文，打开前边的链接在文章底部就可以看到将 jQuery Datepicker 文字显示为中文的方法，在 \u003ca href=\"http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/\"\u003ehttp://jquery-ui.googlecode.com/svn/trunk/ui/i18n/\u003c/a\u003e 可以看到各种版本的语言，中文文件内容如下：\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003ejQuery(function($){\n        $.datepicker.regional[\u0026#39;zh-CN\u0026#39;] = {\n                closeText: \u0026#39;关闭\u0026#39;,\n                prevText: \u0026#39;\u0026lt;上月\u0026#39;,\n                nextText: \u0026#39;下月\u0026gt;\u0026#39;,\n                currentText: \u0026#39;今天\u0026#39;,\n                monthNames: [\u0026#39;一月\u0026#39;,\u0026#39;二月\u0026#39;,\u0026#39;三 …\u003c/code\u003e\u003c/pre\u003e"

"\u003cblockquote\u003e\n\u003c/blockquote\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003e$(\u0026#34;#category ul\u0026#34;).find(\u0026#34;li\u0026#34;).each(\n function() {\n $(this).mouseover(\n function() {\n $(\u0026#34;#\u0026#34; + this.id + \u0026#34;_menu\u0026#34;).show();\n $(this).addClass(\u0026#34;a\u0026#34;);\n }\n );\n $(this).mouseout(\n function() {\n $(this).removeClass(\u0026#34;a\u0026#34;);\n $(\u0026#34;#\u0026#34; + this.id + \u0026#34;_menu\u0026#34;).hide();\n }\n );\n }\n);\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e浏览器之间的不兼容一直令前端开发者的头疼，而 IE 更是噩梦。鼠标在下拉菜 …\u003c/p\u003e"

"\u003cp\u003eFCKeditor是现在最为流行的开源编辑器，SyntaxHighlighter是一个用JS实现的代码高亮显示插件，可以最小化修改您的程序实现效果，最终效果截图：\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"http://blog.haohtml.com/wp-content/uploads/2012/06/fckedit_syntaxhighlighter1.jpg\"\u003e\u003cimg src=\"http://blog.haohtml.com/wp-content/uploads/2012/06/fckedit_syntaxhighlighter1.jpg\" alt=\"\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e演示网页：\u003c/p\u003e\n\u003cp\u003e下载FCKeditor + SyntaxHighlighter插件包：\u003ca href=\"http://tech.cncms.com/UploadFiles/20101001/fck_SyntaxHighlighter.zip\"\u003efck_SyntaxHighlighter.zip\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e下面分步介绍如何在FCKeditor环境中使用SyntaxHighlighter。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e后台FCKeditor编辑器的修改\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e1、将包解压后，把 insertcode 文件夹上传到 FCKeditor编辑器的editor\\plugins\\目录下，然后修改FCKeditor编辑器的fckconfig.js此文件，在此文件中 FCKConfig.PluginsPath = FCKConfig.BasePath + ‘plugins/’ ;下面加入以下代码：\nFCKConfig.Plugins.Add(‘insertcode’);\u003c/p\u003e\n\u003cp\u003e2、打开FCKeditor编辑器的editor\\lang文件夹里的zh-cn.js，在DlgDivInlineStyle : “CSS 样式”,（注意这句后面一定要加一个逗 …\u003c/p\u003e"

"\u003cp\u003e\u003ca href=\"http://tools.ietf.org/html/rfc6585\"\u003eRFC 6585\u003c/a\u003e has been published quite recently. This document describes 4 new HTTP status codes.\u003c/p\u003e\n\u003cp\u003eSo in case you were wondering, yes.. HTTP is still evolving :), and these new statuses may be quite useful for developing your REST, or otherwise HTTP-based service. This post describes why they are important, and when you should use them.\u003c/p\u003e\n\u003ch3 id=\"428-precondition-required\"\u003e428 Precondition Required\u003c/h3\u003e\n\u003cp\u003eA precondition is something a client can send along with a HTTP request. This condition needs to be met in order for the request to complete.\u003c/p\u003e"

"\u003cp\u003e$(function(){\u003c/p\u003e\n\u003cp\u003evar validator = $(“#enterRegForm”).validate({\ndebug:false, //调试模式取消submit的默认提交功能\n//errorClass: “error”,//默认为错误的样式类为：error\n//validClass: “check”,//验证成功后的样式，默认字符串valid\nfocusInvalid: true,//表单提交时,焦点会指向第一个没有通过验证的域\n//focusCleanup:true;//焦点指向错误域时，隐藏错误信息，不可与focusInvalid一起使用！\nonkeyup: true,\nerrorElement: “div”,\nsubmitHandler: function(form){ //表单提交句柄,为一回调函数，带一个参数：form\nform.submit(); //提交表单\n},\u003c/p\u003e\n\u003cp\u003erules: {\n“enterprise.enName”: {\nrequired: true,\nminlength: 6,\nremote:{\nurl: “/nameServlet”,     // …\u003c/p\u003e"

"\u003cp\u003e上次在北京看到善用佳软的 xBeta 演示 VIM 的时候，@[sfufoet][1] 我就被强烈震撼到了。VIM 的确是个强大的编辑器，它可以折腾出很多种强大的功能。今天看到这个叫 [Zen Coding][2] 的东西，我强烈推荐给经常和 HTML CSS 打交道的朋友。@appinn\u003c/p\u003e\n\u003cp\u003e下面的动态演示图，只是它强大功能的一部分而已。它无视了编辑器的自动提示和自动完成，秒杀了你自定义的各种快捷键或者 AHK 的热字符串，以智能简洁高效的缩短输入，带给你超快速地书写各种复杂而枯燥的 HTML 和 CSS 代码的体验。\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"http://blog.haohtml.com/wp-content/uploads/2012/03/zen-coding.gif\"\u003e\u003cimg src=\"http://blog.haohtml.com/wp-content/uploads/2012/03/zen-coding.gif\" alt=\"\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e先举一个复杂的例子：zen-coding 可以把这样的代码：div#header\u0026gt;ul.navigation\u0026gt;li*4\u0026gt;a，变成下面的 HTML 代码\u003c/p\u003e\n\u003cblockquote\u003e\n\u003c/blockquote\u003e\n\u003cblockquote\u003e\n\u003c/blockquote\u003e\n\u003cblockquote\u003e\n\u003c/blockquote\u003e\n\u003cblockquote\u003e\n\u003c/blockquote\u003e\n\u003cp\u003e看到这熟悉的语法结构，会 CSS 的朋友一定会惊声尖叫！最妙的是那个“*4”，直接生成 4 个 li 代码了。没错，[Zen Coding][2] 就是这样牛叉的东西，[Zen Coding][2] 分为 Zen HTML 和 Zen CSS 两部分。这两部分功能是以插件的形式来实现的。 …\u003c/p\u003e"

"\u003cp\u003e今天将FreeBSD系统重新安装系统的时候.将原来的分区全部删除.进行重新分区,而按下W进行分区保存的时候.提示以下错误:\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003eERROR: Unable to write data to disk ad0! To edit the lables on a running system set sysctl kern.geom.debugflags=16 and try again.\u003c/p\u003e\u003c/blockquote\u003e\n\u003cp\u003e解决办法如下:\u003c/p\u003e\n\u003cp\u003e用root权限运行以下任何一条命令：\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e#sysctl -w kern.geom.debugflags=16\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e或者\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e#sysctl  kern.geom.debugflags=16\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e你可以用sysctl -a查询你系统的所有内核子系统的配置参数，在具备权限的情况下，你可以修改配置变量，其中有一些只读的属性无法修改，有一些属性只能在开机时设定而不是运行时动态修改的也不能改（这些参数/属性在/boot/loader.conf中调整和修改）\u003c/p\u003e"

"\u003cp\u003e#snake{\nbackgournd: #666;\nfilter:alpha(opacity=50); /*IE*/\n-moz-opacity:0.5; /*MOZ , FF*/\nopacity:0.5; /\u003cem\u003eCSS3, FF1.5\u003c/em\u003e/\u003c/p\u003e\n\u003cp\u003e}\u003c/p\u003e"

"\u003cp\u003e\u003cstrong\u003e301和302 Http状态有啥区别？\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e301，302 都是HTTP状态的编码，都代表着某个URL发生了转移，不同之处在于：\u003c/p\u003e\n\u003cp\u003e301 redirect: 301 代表永久性转移(Permanently Moved)，\u003c/p\u003e\n\u003cp\u003e302 redirect: 302 代表暂时性转移(Temporarily Moved )，\u003c/p\u003e\n\u003cp\u003e当然　Http 状态 200 标示没有任何问题发生。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e这两种转移在使用的时候有啥好处或者问题？\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e301 重定向是网页更改地址后对搜索引擎友好的最好方法，只要不是暂时搬移的情况,都建议使用301来做转址。\u003c/p\u003e\n\u003cp\u003e302 重定向是临时性转移。\u003c/p\u003e\n\u003cp\u003e在前些年，不少Black Hat SEO曾广泛应用这项技术作弊，目前，各大主要搜索引擎均加强了打击力度，象Google前些年对Business.com以及近来对BMW德国网站的惩 罚。即使网站客观上不是spam，也很容易被搜寻引擎容易误判为spam而遭到惩罚。\u003c/p\u003e\n\u003cp\u003e研究搜索引擎优化（SEO）的人，应该都知道，301，302　使用不当，或者灵活使用会有不错的效果的，比如参看下面文章：\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"http://www.jzxue.com/Html/google/011117403024005.html\"\u003e302转向与网址劫持\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"http://www.chinamyhosting.com/seoblog/2006/04/12/301-redirect/\"\u003e301转向和网址规范化\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"http://www.williamlong.info/archives/484.html\"\u003e301 …\u003c/a\u003e\u003c/p\u003e"

"\u003cp\u003e使用前需包含以下jquery.js、bgiframe.js、weebox.js、wee.css文件\u003c/p\u003e\n\u003cp\u003e基本用法举例如下:\n$.weeboxs.open(‘#testbox’, {title: ‘hello world’, width:400, height: 200});\u003c/p\u003e\n\u003cp\u003e$.weeboxs.open(‘The operation failed.’,{\nonopen:function(){alert(‘opened!’);},\nonclose:function(){alert(‘closed!’);}, onok:function(){alert(‘ok’);\n$.weeboxs.close();} });\u003c/p\u003e\n\u003cp\u003e$.weeboxs.open(‘/modules/test/testsession.php’, {contentType:’ajax’});\u003c/p\u003e\n\u003cp\u003e$.weeboxs.open(‘hello world’);\u003c/p\u003e\n\u003cp\u003e$.weeboxs.open(‘The operation failed.’,{type:’error’});\u003c/p\u003e\n\u003cp\u003e$.weeboxs.open(‘The operation …\u003c/p\u003e"

"\u003cp\u003e建议参考: \u003ca href=\"http://www.css3.info/preview/rounded-border/\"\u003ehttp://www.css3.info/preview/rounded-border/\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e圆角样式示例(仅在firefox内核,safari,chrome等内核浏览器下支持,IE内核不支持)\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e\u003cstrong\u003eborder-*-*-radius:\u003c/strong\u003e [ | \u0026lt;%\u0026gt; ] [ | \u0026lt;%\u0026gt; ]?\u003c/p\u003e\u003c/blockquote\u003e\n\u003cp\u003e\u003cstrong\u003eCSS3的border-radius规范\u003c/strong\u003e\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\n\u003cp\u003e属性：\nborder-top-right-radius\nborder-bottom-right-radius\nborder-bottom-right-radius\nborder-bottom-right-radius\n值：。它们分别是定义角形状的四分之一椭圆的两个半径。如图：\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e第一个值是水平半径。\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e如果任意一个值为0，则这个角是矩形，不会是圆的。\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e值不允许是负值。\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e属性：border-radius。它是上面四个属性值的简写。\n值：{1,4} [ / {1,4} ]\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e如果斜线前后的值都存在，那么斜线前的值设置水平半径，且斜线后的值设置垂直半 …\u003c/p\u003e\u003c/li\u003e\u003c/ol\u003e"

"\u003cp\u003eMetamarket的CTO Mike Driscoll最近发表了一篇\u003ca href=\"http://metamarketsgroup.com/blog/node-js-and-the-javascript-age/\"\u003e略带煽动性的帖子，讨论了Web应用的架构\u003c/a\u003e。他认为\u003ca href=\"http://www.infoq.com/interviews/node-ryan-dahl\"\u003eNode.js\u003c/a\u003e等\u003ca href=\"http://www.infoq.com/presentations/nodejs\"\u003e框架\u003c/a\u003e预示着\u003ca href=\"http://www.infoq.com/LAMP\"\u003eLAMP\u003c/a\u003e的终结。\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e三个月前，我们决定废弃仪表盘选用的框架：Python的Django，并用Node.js（服务器端的Javascript）重新构建了框架。鉴于LAMP堆栈已经死亡，我们才做出了这个决定。\u003c/p\u003e\u003c/blockquote\u003e\n\u003cp\u003eMike认为Web有三个阶段：\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cul\u003e\n\u003cli\u003e1991-1999：HTML时代——这是个文档的时代。\u003c/li\u003e\n\u003cli\u003e2000-2009：LAMP时代——使用数据库的时代。\u003c/li\u003e\n\u003cli\u003e2010-??：Javascript时代。Javascript时代是事件流的时代。\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e现代的Web页面已经不再是页面了，它们都是事件驱动的应用，信息会通过这些应用流转。\u003c/p\u003e\u003c/blockquote\u003e\n\u003cp\u003e他解释道：\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003eLAMP架构已经死了，因为对于响应里的Mashup，很少有应用愿意把全部的有效负载转移到很小的事件上去；他们只想用Javascript更新DOM的一个片段。AJAX做到了这一点，但如果服务器端的LAMP模板有10%的HTML和90%的Javascript，这么做显然是不对的……\u003c/p\u003e\u003c/blockquote\u003e\n\u003cp\u003eMike认为，服务器的主要作用就是带着 …\u003c/p\u003e"

"\u003cp\u003e\u003cstrong\u003e法一：\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e一、默认校验规则\n(1)required:true 必输字段\n(2)remote:”check.php” 使用ajax方法调用check.php验证输入值\n(3)email:true 必须输入正确格式的电子邮件\n(4)url:true 必须输入正确格式的网址\n(5)date:true 必须输入正确格式的日期\n(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性\n(7)number:true 必须输入合法的数字(负数，小数)\n(8)digits:true 必须输入整数\n(9)creditcard: 必须输入合法的信用卡号\n(10)equalTo:”#field” 输入值必须和#field相同\n(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）\n(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)\n(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)\n(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之 …\u003c/p\u003e"

"\u003cp\u003e不过我们还要在需要验证的INPUT里面class加入required说明是必填项，其他的就是验证相关数据比如email就是验证email的数据结构\u003c/p\u003e\n\u003cp\u003e以下列出validate自带的默认验证\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003erequired: “必选字段”,\u003c/p\u003e\n\u003cp\u003eremote: check.php “使用ajax方法调用check.php验证输入值段”,\u003c/p\u003e\n\u003cp\u003eemail: “请输入正确格式的电子邮件”,\u003c/p\u003e\n\u003cp\u003eurl: “请输入合法的网址”,\u003c/p\u003e\n\u003cp\u003edate: “请输入合法的日期”,\u003c/p\u003e\n\u003cp\u003edateISO: “请输入合法的日期 (ISO).”,\u003c/p\u003e\n\u003cp\u003enumber: “请输入合法的数字”,\u003c/p\u003e\n\u003cp\u003edigits: “只能输入整数”,\u003c/p\u003e\n\u003cp\u003ecreditcard: “请输入合法的信用卡号”,\u003c/p\u003e\n\u003cp\u003eequalTo: “请再次输入相同的值”,\u003c/p\u003e\n\u003cp\u003eaccept: “请输入拥有合法后缀名的字符串”,\u003c/p\u003e\n\u003cp\u003emaxlength: jQuery.format(“请输入一个长度最多是 {0} 的字符串”),\u003c/p\u003e\n\u003cp\u003eminlength: jQuery.format(“请输入一个长度最少是 {0} 的字符串”),\u003c/p\u003e\n\u003cp\u003erangelength: jQuery.format(“请输入一个长度介于 {0} …\u003c/p\u003e\u003c/blockquote\u003e"

"\u003cp\u003e准备写一系列关于高性能WEB开发的日记，主要是跟前端技术相关的(html,http,js,css等)，将自己了解的一些知识做1个总结和记录并分享，希\u003c/p\u003e\n\u003cp\u003e望大家能喜欢，也喜欢自己能坚持写下去。当然因个人技术水平有限，写作能力更是非常差，所以如果有什么地方写得不好的，请大家都指点指点。\u003c/p\u003e\n\u003cp\u003e1、 \u003ca href=\"http://www.blogjava.net/BearRui/archive/2010/01/29/web_performance_server.html\" title=\"HTTP服务器\"\u003eHTTP服务器\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003e2、\u003ca href=\"http://www.blogjava.net/BearRui/archive/2010/04/28/web_performance_tools.html\" title=\"性能测试工具推荐\"\u003e性能测试工具推荐\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e3、 \u003ca href=\"http://www.blogjava.net/BearRui/archive/2010/02/22/web_performance_image.html\"\u003e图片篇.\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e4、 \u003ca href=\"http://www.blogjava.net/BearRui/archive/2010/04/08/web_performance_js_where.html\" title=\"如何加载JS，JS应该放在什么位置\"\u003e如何加载JS，JS应该放在什么位置\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003e5、 \u003ca href=\"http://www.blogjava.net/BearRui/archive/2010/04/18/reduce_number_of_request.html\" title=\"为什么要减少请求数，如何减少请求数.\"\u003e为什么要减少请求数，如何减少请求数.\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e6、 \u003ca href=\"http://www.blogjava.net/BearRui/archive/2010/04/26/web_performance_reduce_weight.html\" title=\"高性能WEB开发(5) - 减少请求，响应的数据量.\"\u003e减少请求，响应的数据量.\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e7、 \u003ca href=\"http://www.blogjava.net/BearRui/archive/2010/05/04/js_css_merge_compress_cache.html\"\u003eJS、CSS的合并、压缩、缓存管理\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e8、 \u003ca href=\"http://www.blogjava.net/BearRui/archive/2010/05/10/web_performance_repaint_relow.html\"\u003e页面呈现、重绘、回流。\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e9、 \u003ca href=\"http://www.blogjava.net/BearRui/archive/2010/05/12/best_use_google_analytics.html\"\u003e该如何加载google-analytics(或其他第三方)的JS.\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e10、 \u003ca href=\"http://www.blogjava.net/BearRui/archive/2010/05/16/html_compressor.html\"\u003e疯狂的HTML压缩\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e11、 \u003ca href=\"http://www.blogjava.net/BearRui/archive/2010/05/19/flush_chunk_encoding.html\"\u003eflush让页面分块,逐步呈现\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e12、 \u003ca href=\"http://www.blogjava.net/BearRui/archive/2010/06/07/efficient_css.html\"\u003e了解CSS的查找匹配原理，让CSS更简洁、高效\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e[作者]：BearRui(AK-47)\u003c/p\u003e"

"\u003cp\u003eDynaTrace AJAX是一个运行在IE浏览器下的免费页面性能分析工具，它可以支持主流的IE6、IE7、IE8浏览器。这款工具正是DynaTrace为进入前端性能分析领域而发布的。您可以利用它来分析页面渲染时间、DOM方法执行时间，甚至可以看到JS代码的解析时间。连JQuery的创始者 John Resig 也鼎力推荐了一把。\u003c/p\u003e\n\u003cp\u003e从John Resig的 \u003ca href=\"http://ejohn.org/blog/deep-tracing-of-internet-explorer/\"\u003eDeep Tracing of Internet Explorer\u003c/a\u003e 了解到了这款刚发布的免费的前端性能分析工具，John Resig对其评价甚高,John Resig对其评价到：“我一般不随便写关于性能分析工具的东西，坦率地说，我感觉它们绝大部分都比较烂，根本不能提供任何有价值的信息和分析结果。不过 dynaTrac提供了一些我以前在任何其他工具上都没见过的东西。”\u003c/p\u003e\n\u003cp\u003eAjax的本事真不是盖的！那么，它到底有啥特别之处呢？“这个工具可以跟踪JavaScript从执行开始，经过本地的XMLHttpRequest、发送网络请求，再到请求返回的全过程。”\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e更多的我这里就不多说了，权威人士们都说过了，这东西我也刚上手没多久，还谈不上有多深入的 …\u003c/strong\u003e\u003c/p\u003e"

"\u003cp\u003e在BlogJava里写了一些关于高性能WEB开发的随笔，因为都是跟前端技术相关(html,http,js,css等)，所以也贴到博客园来，吸收下人气。\u003c/p\u003e\n\u003cp\u003e1、 \u003ca href=\"http://www.blogjava.net/BearRui/archive/2010/01/29/web_performance_server.html\" title=\"HTTP服务器\"\u003eHTTP服务器\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003e2、 \u003ca href=\"http://www.blogjava.net/BearRui/archive/2010/04/28/web_performance_tools.html\" title=\"性能测试工具推荐\"\u003e性能测试工具推荐\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e3、 \u003ca href=\"http://www.blogjava.net/BearRui/archive/2010/02/22/web_performance_image.html\"\u003e图片篇.\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e4、 \u003ca href=\"http://www.blogjava.net/BearRui/archive/2010/04/08/web_performance_js_where.html\" title=\"如何加载JS，JS应该放在什么位置\"\u003e如何加载JS，JS应该放在什么位置\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003e5、 \u003ca href=\"http://www.blogjava.net/BearRui/archive/2010/04/18/reduce_number_of_request.html\" title=\"为什么要减少请求数，如何减少请求数.\"\u003e为什么要减少请求数，如何减少请求数.\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e6、 \u003ca href=\"http://www.blogjava.net/BearRui/archive/2010/04/26/web_performance_reduce_weight.html\" title=\"高性能WEB开发(5) - 减少请求，响应的数据量.\"\u003e减少请求，响应的数据量.\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e7、 \u003ca href=\"http://www.blogjava.net/BearRui/archive/2010/05/04/js_css_merge_compress_cache.html\"\u003eJS、CSS的合并、压缩、缓存管理\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e8、 \u003ca href=\"http://www.blogjava.net/BearRui/archive/2010/05/10/web_performance_repaint_relow.html\"\u003e页面呈现、重绘、回流。\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e9、 \u003ca href=\"http://www.cnblogs.com/BearsTaR/archive/2010/05/12/best_use_google_analytics.html\"\u003e该如何加载google-analytics(或其他第三方)的JS.\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e10、 \u003ca href=\"http://www.cnblogs.com/BearsTaR/archive/2010/05/17/html_compressor.html\"\u003e疯狂的HTML压缩.\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e11、 \u003ca href=\"http://www.cnblogs.com/BearsTaR/archive/2010/05/19/flush_chunk_encoding.html\"\u003eflush让页面分块,逐步呈现\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e12、 \u003ca href=\"http://www.cnblogs.com/BearsTaR/archive/2010/06/07/efficient_css.html\"\u003e了解CSS的查找匹配原理，让CSS更简洁、高效\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e[作者]：BearRui(AK-47)\u003c/p\u003e"

"\u003cp\u003e在上一篇文章( \u003ca href=\"http://blog.haohtml.com/archives/8828\"\u003e15个对Web设计和开发有用的Chrome插件\u003c/a\u003e)我们提到一个\u003cstrong\u003e\u003cstrong\u003eSpeed Tracer 速度追踪\u003c/strong\u003e\u003c/strong\u003e 插件,现在我们就来安装一下,我这里用的是windows的操作系统,chrome的版本为10.0.648.204.目前为最新的版本了.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e1.安装”Speed Tracer 速度追踪器”插件\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"http://blog.haohtml.com/wp-content/uploads/2011/04/speed-tracer-by-google.bmp\"\u003e\u003cimg src=\"https://blogstatic.haohtml.com//uploads/2023/09/speed-tracer-by-google.bmp\" alt=\"\"\u003e\u003c/a\u003e\u003cstrong\u003e2.配置chrome浏览器\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e安装完插件以后,将chorme浏览器关闭,记得要全部关闭.下面直接将官方的安装过程贴出来了,虽然是英文的,不过有图片很容易懂的.\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\u003cstrong\u003eStart Google Chrome with a flag that enables Speed Tracer to work\u003c/strong\u003e, as described next. The process is different for Windows and Macintosh.\u003cstrong\u003e– Windows\u003c/strong\u003e\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eStart Google Chrome with the following flag, either from the command line or by modifying your desktop shortcut for Google …\u003c/p\u003e"

"\u003cp\u003e在\u003cstrong\u003eWeb设计和开发\u003c/strong\u003e中我们一定会用到不同的浏览器，如Firefox浏览器,IE浏览器，谷歌浏览器等。最近我一直在用谷歌浏览器，发现了一些非常有用的\u003cstrong\u003eChrome插件\u003c/strong\u003e。跟大家分享一下，下面我按字母顺序列出。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e1. Aviary Screen Capture 屏幕截图\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eAviary Screen Capture让你能够截取网页的屏幕快照。获得屏幕快照后，用Aviary.com的应用程序在浏览器内编辑那幅快照。基本的图像编辑装置让你能够标记（通过画箭头和长方形）、编辑（裁剪、旋转和调整大小）和获得精确的像素色彩。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e2. Chrome SEO 搜索引擎优化\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eChrome SEO为搜索引擎优化工具提供了方便的路径。这些工具帮助你做每日搜索引擎优化工作，比如竞争分析、关键词分析、反向链接检查及网页排名检查等。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e3. Chrome Sniffer 嗅探器\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eChrome Sniffer使Web开发人员能够在网站上运行的检查web框架∕CMS和JavaScript库。这个插件通过一个图标，显示已检测到的框架。目前，这个插件最多可检测70个流行的CMS和JavaScript库。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e4. Eye Dropper …\u003c/strong\u003e\u003c/p\u003e"

"\u003cp\u003e本文将探讨浏览器渲染的loading过程，主要有2个目的：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e了解浏览器在loading过程中的实现细节，具体都做了什么\u003c/li\u003e\n\u003cli\u003e研究如何根据浏览器的实现原理进行优化，提升页面响应速度\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e由于loading和parsing是相互交织、错综复杂的，这里面有大量的知识点，为了避免过于发散本文将不会对每个细节都深入研究，而是将重点放在开发中容易控制的部分（Web前端和Web Server），同时由于浏览器种类繁多且不同版本间差距很大，本文将侧重一些较新的浏览器特性\u003c/p\u003e\n\u003ch2 id=\"现有知识\"\u003e现有知识\u003c/h2\u003e\n\u003cp\u003e提升页面性能方面已经有很多前人的优秀经验了，如\u003ca href=\"http://developer.yahoo.com/performance/rules.html\"\u003eBest Practices for Speeding Up Your Web Site\u003c/a\u003e和\u003ca href=\"http://code.google.com/speed/page-speed/docs/rules_intro.html\"\u003eWeb Performance Best Practices\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e本文主要专注其中加载部分的优化，总结起来主要有以下几点：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e带宽\u003c/li\u003e\n\u003cli\u003e使用CDN\u003c/li\u003e\n\u003cli\u003e压缩js、css，图片优化\u003c/li\u003e\n\u003cli\u003eHTTP优化\u003c/li\u003e\n\u003cli\u003e减少转向\u003c/li\u003e\n\u003cli\u003e减少请求数\u003c/li\u003e\n\u003cli\u003e缓存\u003c/li\u003e\n\u003cli\u003e尽早Flush\u003c/li\u003e\n\u003cli\u003e使用gzip\u003c/li\u003e\n\u003cli\u003e减少cookie\u003c/li\u003e\n\u003cli\u003e使用GET\u003c/li\u003e\n\u003cli\u003eDNS优化\u003c/li\u003e\n\u003cli\u003e减少域名解析时间\u003c/li\u003e\n\u003cli\u003e增多域名提高并发\u003c/li\u003e\n\u003cli\u003eJavaScript\u003c/li\u003e\n\u003cli\u003e放页面底部\u003c/li\u003e\n\u003cli\u003edefer/async\u003c/li\u003e\n\u003cli\u003eCSS\u003c/li\u003e\n\u003cli\u003e放页面头部\u003c/li\u003e\n\u003cli\u003e避 …\u003c/li\u003e\u003c/ul\u003e"

"\u003cp\u003ee6.0下面经常会出现border边框断断续续的问题，初学div+css 的一般不会用遇到这个问题，不过等深一步了解了div之后自然会经常碰到这种问题了，因为初学者不会偷懒，等我们觉得用的很熟了，各种浏览器都能很方便的 兼容之后就会出现这种问题，我有很多同事都碰到过这种问题，其实解决办法很简单，我先简单描述一下边框断裂的效果.\u003c/p\u003e\n\u003cp\u003e在浏览器下一刷新边框是全的，再以刷新边框就会有断开，什么原因呢，很懊恼的事情，网上一搜也没有答案，下面我就告诉大家解决的方法，其实他是有原因的， 原因就是你的外层有边框，边框层里面嵌套的层里面有浮动，浮动这个最令人懊恼的东西经常会出问题，由于这个原因会引起ie6下面边框断裂，解决办法就是在 外层加 zoom:1; 或者 heigth:100%; 很容易就解决了这个问题。\u003c/p\u003e\n\u003cp\u003e表现状况：窗口的边框时隐时现。。。\u003c/p\u003e\n\u003cp\u003e发生情况：\u003c/p\u003e\n\u003cp\u003e网上说是在一个容器中有元素浮动时容易出现，自己感觉有时内部元素把容器撑开时也会看不到边框。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e解决办法：\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e如果按网上说的是因为浮动的原因的话，那么添加清除浮动则应试可以正常解决。\u003c/p\u003e\n\u003cp\u003e另外网上的解决办法是：给窗口设置{zoom:1} or { …\u003c/p\u003e"

"\u003cp\u003e\u003cstrong\u003e方法一、robots Meta标签\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003erobots.txt是放在网站中，文件级的网络蜘蛛授权；而robots Meta标签是放在网页中，一般用于部分网页需要单独设置的情况下。两者的功能是一样的。\nMeta robots标签必须放在和之间，格式：\u003c/p\u003e\n\u003cp\u003econtent中的值决定允许抓取的类型，必须同时包含两个值：是否允许索引（index）和是否跟踪链接（follow，也可以理解为是否允许沿着网页中的超级链接继续抓取）。共有4个参数可选，组成4个组合：\nindex,follow：允许抓取本页，允许跟踪链接。\nindex,nofollow：允许抓取本页，但禁止跟踪链接。\nnoindex,follow：禁止抓取本页，但允许跟踪链接。\nnoindex,nofllow：禁止抓取本页，同时禁止跟踪本页中的链接。\n以上1和4还有另一种写法：\nindex,follow可以写成all，如：\u003c/p\u003e\n\u003cp\u003enoindex,nofollow可以写成none，如：\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e方法二、创建robots.txt文本\u003c/strong\u003e\n对于robots.txt文本的相关概念或者是协议我就不提了，主要是直接告诉大家这个文件的写法。\n文件应该同时包含2个 …\u003c/p\u003e"

"\u003cp\u003e针对搜索引擎优化（SEO），页面URL的布局与呈现是影响排名和网站索引率的重要因素之一。对于搜索引擎而言，URL是它们找到一个网页的入口，URL的好坏会直接影响搜索引擎对一个网站的索引及理解程度。对于用户，URL会直接显示在搜索结果中，从而影响人们的点击意愿。因此一个好的URL结构无论是对搜索引擎，还是用户，都有着非常重要的作用。在本文中，我们将详细探讨针对SEO的URL优化技巧，但同时也想提醒大家，对于一个现有的网站，URL的改动需要谨慎。URL的改动会牵扯到原有URL权重的转移等问题，因此除非在万不得已的情况下，尽量不要改动现有的URL。但如果你是在策划一个新的网站或者生成新的页面，那么就让我们来探讨一下如何得到一个完美的URL吧。\n\u003cstrong\u003e1. URL愈短愈好\u003c/strong\u003e\n无论是搜索引擎，还是浏览者，都喜欢简短的URL。URL的层级不宜过多，尽量控制在4级之内。虽然搜索引擎仍然会抓取四级之后的页面，但页面的权重会大大降低。\u003c/p\u003e\n\u003cp\u003e例如华为中文网站的“移动宽带”（ \u003ca href=\"http://www.huawei.com/cn/core\"\u003ehttp://www.huawei.com/cn/core\u003c/a\u003e_network/internet_mobility\n_solutions.do ）页 …\u003c/p\u003e"

"\u003cp\u003e这篇文章介绍的比较全的:\u003c/p\u003e\n\u003cp\u003e此文档介绍适用于 Sitemap 协议的 XML 架构。\u003c/p\u003e\n\u003cp\u003eSitemaps 协议格式由 XML 标记组成。Sitemap 的所有数据数值应为实体转义过的。文件本身应为 UTF-8 编码。\u003c/p\u003e\n\u003cp\u003eSitemap 必须：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e以 \u003ccode\u003e\u0026lt; [urlset](http://www.sitemaps.org/zh_CN/protocol.php#urlsetdef) \u0026gt;\u003c/code\u003e 开始标记作为开始，以 `` 结束标记作为结束。\u003c/li\u003e\n\u003cli\u003e在 `` 标记中指定命名空间（协议标准）。\u003c/li\u003e\n\u003cli\u003e每个网址包含一个\u003ccode\u003e\u0026lt; [url](http://www.sitemaps.org/zh_CN/protocol.php#urldef) \u0026gt;\u003c/code\u003e 条目作为 XML 父标记。\u003c/li\u003e\n\u003cli\u003e在每个 `` 父标记中包含一个 \u003ccode\u003e\u0026lt; [loc](http://www.sitemaps.org/zh_CN/protocol.php#locdef) \u0026gt;\u003c/code\u003e 子标记条目。\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e其他所有标记均为可选，搜索引擎不同，对可选标记的支持也各不相同。有关详情，请参阅各个搜索引擎的文档。\u003c/p\u003e\n\u003cp\u003e而且，Sitemap 中的所有网址都必须来自于同一个主 …\u003c/p\u003e"

"\u003cp\u003e下表简要介绍了站点地图在列举网络网址时所需的标记。要添加关于特定内容类型的更多详情，请参见 \u003ca href=\"http://www.google.com/support/webmasters/bin/answer.py?answer=80471\"\u003e视频\u003c/a\u003e、 \u003ca href=\"http://www.google.com/support/webmasters/bin/answer.py?answer=178636\"\u003e图片\u003c/a\u003e、 \u003ca href=\"http://www.google.com/support/webmasters/bin/answer.py?answer=34627\"\u003e移动\u003c/a\u003e、 \u003ca href=\"http://www.google.com/support/news_pub/bin/answer.py?answer=75717\"\u003e新闻\u003c/a\u003e、 \u003ca href=\"http://www.google.com/support/webmasters/bin/answer.py?answer=75225\"\u003e软件源代码\u003c/a\u003e 以及 \u003ca href=\"http://www.google.com/support/webmasters/bin/answer.py?answer=94554\"\u003e地理 (KML) 信息\u003c/a\u003e。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e标记****必需\u003c/strong\u003e？\n\u003cstrong\u003e说明\u003c/strong\u003e\u003ccode\u003e\u0026lt;urlset\u0026gt;\u003c/code\u003e\n必需\u003c/p\u003e\n\u003cp\u003e包含站点地图中网址集的所有相关信息。\n\u003ccode\u003e\u0026lt;url\u0026gt;\u003c/code\u003e\n必需\u003c/p\u003e\n\u003cp\u003e包含特定网址的所有相关信息。\n\u003ccode\u003e\u0026lt;loc\u0026gt;\u003c/code\u003e\n必需\u003c/p\u003e\n\u003cp\u003e指定网址。请指定图片和视频的目标网页（又称播放页、引用页）。必须是具有唯一性的网址。\n\u003ccode\u003e\u0026lt;lastmod\u0026gt;\u003c/code\u003e\n可选\u003c/p\u003e\n\u003cp\u003e网址的最后修改时间，使用 YYYY-MM-DDThh:mmTZD 格式（时间值是可选的）。\n\u003ccode\u003e\u0026lt;changefreq\u0026gt;\u003c/code\u003e\n可选\u003c/p\u003e\n\u003cp\u003e提供关于网页更改频率的提示。有效值为：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003ealways\u003c/code\u003e。对于每次访问时都发生更改的网页，请使用该值。\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003ehourly\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003edaily\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eweekly\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003emonthly\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eyearly\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003enever\u003c/code\u003e。对于已存档的网址，请使用该值。\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003ccode\u003e\u0026lt;priority\u0026gt;\u003c/code\u003e\n可选\u003c/p\u003e\n\u003cp\u003e说明网站上的某个网址相对于其他所有网址的优先级。此优先级的范围是 1.0（极其重要）到 0.1（一 …\u003c/p\u003e"

"\u003cpre tabindex=\"0\"\u003e\u003ccode\u003e使用JS实现单击连接保存图片\n2种形式都可以\n\n第一种：\n\u003c/code\u003e\u003c/pre\u003e\u003cblockquote\u003e\n\u003c/blockquote\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003e\u0026lt;script\u0026gt;\nfunction SaveAs5(imgURL)\n...{\n var oPop = window.open(imgURL,\u0026#34;\u0026#34;,\u0026#34;width=1, height=1, top=5000, left=5000\u0026#34;);\n for(; oPop.document.readyState != \u0026#34;complete\u0026#34;; )\n ...{\n if (oPop.document.readyState == \u0026#34;complete\u0026#34;)break;\n }\n oPop.document.execCommand(\u0026#34;SaveAs\u0026#34;);\n oPop.close();\n}\n\u0026lt;/script\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\u003cpre tabindex=\"0\"\u003e\u003ccode\u003e\u0026lt;img src=\u0026#34;t_screenshot_17616.jpg\u0026#34; id=\u0026#34;DemoImg\u0026#34; border=\u0026#34;0\u0026#34; …\u003c/code\u003e\u003c/pre\u003e"

"\u003cp\u003e New Document\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003efunction downLoadImage(imagePathURL){\u003c/p\u003e\n\u003cp\u003e//如果中间IFRAME不存在，则添加\nif(!document.getElementById(“_SAVEASIMAGE_TEMP_FRAME”))\njQuery(‘ width=”0″ height=”0″ src=”about:blank”\u0026gt;’).appendTo(“body”);\u003c/p\u003e\n\u003cp\u003eif(document.all._SAVEASIMAGE_TEMP_FRAME.src!=imagePathURL){\n//图片地址发生变化，加载图片\ndocument.all._SAVEASIMAGE_TEMP_FRAME.src = imagePathURL;\n}else{\n//图片地址没有变化，直接另存为\n_doSaveAsImage();\n}\n}\nfunction _doSaveAsImage(){\nif(document.all._SAVEASIMAGE_TEMP_FRAME.src!=”about:blank”) …\u003c/p\u003e\u003c/blockquote\u003e"

"\u003cp\u003e原图片是 ：\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e(function(){\nvar img=document.createElement(‘img’);//创建一个img元素\nimg.src=”http://gg.blueidea.com/2008/blueidea/flash2008.gif”;//指定src\nimg.style.position=”absolute”;//防止正常的内容变形\nimg.style.visibility=’hidden’;//藏起来\nvar inj=document.getElementById(‘box’).appendChild(img);//插入到box中。当然插入到document.body也可以\nalert(‘宽：’+inj.offsetWidth);//然后就可以通过 offset 取得宽和高了\nalert(‘高：’+inj.offsetHeight);\n})();\u003c/p\u003e\u003c/blockquote\u003e\n\u003cp\u003e简单地说就是把图片放入一个自动伸缩的DIV中，然后获取DIV的宽和高！\u003c/p\u003e"

"\u003cp\u003e网站的速度非常重要，现在有很多网站优化的工具，如 Google 的 \u003ca href=\"http://fairyfish.net/2009/06/08/google-page-speed/\"\u003ePage Speed\u003c/a\u003e，Yahoo 的 YSlow，对于网页图片，Yahoo 还提供 \u003ca href=\"http://fairyfish.net/2009/12/14/smush-it/\"\u003eSmush.it\u003c/a\u003e 这个工具对图片进行批量压缩，但是对于图片非常多的网站，载入网页还是需要比较长的时间，这个时候我们可以使用 Lazy Load 这个 jQuery 插件来延迟加载图片。\u003c/p\u003e\n\u003cp\u003eLazy loader 是一个延迟加载图片的 jQuery 插件，在一些图片非常多的网站中非常有用，在在浏览器可视区域外的图片不会被载入，直到用户将页面滚动到它们所在的位置才加载，这样对于含有很多图片的比 较长的网页来说，可以加载的更快，并且还能节省服务器带宽。\u003c/p\u003e\n\u003cp\u003eLazy Loader 使用也非常简单，首先确保你的页面已经加载 jQuery Javascript 库，然后在加载 Lazy Load 的 Javascript 文件：\u003c/p\u003e\n\u003cblockquote\u003e\n\u003c/blockquote\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003e\u0026lt;script src=\u0026#34;jquery.js\u0026#34; type=\u0026#34;text/javascript\u0026#34;\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;script …\u003c/code\u003e\u003c/pre\u003e"

"\u003cp\u003e用javascript 怎么判断图片是否加载完成呢?\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003efunction loadImage(url){\u003c/p\u003e\n\u003cp\u003evar o= new Image();\u003c/p\u003e\n\u003cp\u003eo.src = url;\u003c/p\u003e\n\u003cp\u003eif(o.complete){\u003c/p\u003e\n\u003cp\u003ewindow.alert(‘图片加载完成:’+url);\u003c/p\u003e\n\u003cp\u003e}else{\u003c/p\u003e\n\u003cp\u003eo.onload = function(){\u003c/p\u003e\n\u003cp\u003ewindow.alert(‘图片加载完成:’+url);\u003c/p\u003e\n\u003cp\u003e};\u003c/p\u003e\n\u003cp\u003eo.onerror = function(){\u003c/p\u003e\n\u003cp\u003ewindow.alert(‘图片加载失败:’+url);\u003c/p\u003e\n\u003cp\u003e};\u003c/p\u003e\n\u003cp\u003e}\u003c/p\u003e\n\u003cp\u003e}\u003c/p\u003e\u003c/blockquote\u003e\n\u003cp\u003e如果我要先把这一个图片加载完,之后才显示怎么处理呢.\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003e\n function showImage(url){\n\n var o = document.createElement(\u0026#39;img\u0026#39;);\n\n o.src = url;\n\n document.body.appendChild(o);\n\n }\n\n function loadImage(url){\n var o= new Image();\n o.src = url;\n if(o.complete){ …\u003c/code\u003e\u003c/pre\u003e"

"\u003cp\u003e\u003cstrong\u003e为什么要从时间维度对页面进行监测？\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"http://bluewhale.cc/\" title=\"网站分析\"\u003e网站分析\u003c/a\u003e 中有一个重要的指标：Bounce rate。定义是当用户在进入你网站的第一个页面后没有点击任何链接就离开了。假设两个用户同时进入网站的第一个页面后，一个什么都没有看就马上离开了，而另一个在阅读了页面上的内容并在Action按钮上忧郁了半天，最后离开了。那么这两个用户在Bounce rate里看起来没有区别。而实际上第二个用户比第一个用户更有可能被转化。而如果两个用户来自不同的渠道，那么第二个渠道相对第一个渠道更有一些价值。\u003c/p\u003e\n\u003cp\u003e在GA的报告中目前只提供两个时间维度：平均 \u003ca href=\"http://bluewhale.cc/2010-01-24/google-analytics-metrics-timeonpage-timeonsite.html\" title=\"页面停留时间\"\u003e页面停留时间\u003c/a\u003e 和平均 \u003ca href=\"http://bluewhale.cc/2010-01-24/google-analytics-metrics-timeonpage-timeonsite.html\" title=\"网站停留时间\"\u003e网站停留时间\u003c/a\u003e。使用JS事件与_trackPageview函数相配合，我们可以看到网页在时间维度上的表现，并获得更多详细的用户与网站互动的时间数据（被计算在Bounce rate内的非点击行为数据）。\u003c/p\u003e\n\u003ch2 id=\"1通过持续时间判断用户行为的有效性\"\u003e\u003cstrong\u003e1通过持续时间判断用户行为的有效性\u003c/strong\u003e\u003c/h2\u003e\n\u003cp\u003e\u003ca href=\"http://bluewhale.cc/2010-01-12/google-analytics-trackpageview-policy.html\"\u003e上一篇文章\u003c/a\u003e的最后一个策略中提到，可以使用_trackPageview函数与JS的onmouseover事件配合。当用户将鼠标移到某个焦点图或按钮上时进行记录。但有一个问题就是收集到的大部分数据可能是用户无意识的行为（如鼠标划 …\u003c/p\u003e"

"\u003cp\u003eJSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。\n本文主要是对JS操作JSON的方法做下总结。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e在JSON中，有两种结构：对象和数组。\u003c/strong\u003e\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。 名称用引号括起来；值如果是字符串则必须用括号，数值型则不需要。例如：\nvar o={“xlid”:”cxh”,”xldigitid”:123456,”topscore”:2000,”topplaytime”:”2009-08-20″}；\u003c/li\u003e\n\u003cli\u003e数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。\n例如：\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003evar …\u003c/p\u003e"

"\u003cp\u003e当一个HTML元素的属性用js改变的时候，都能通过 onpropertychange来捕获。例如一个 对象的value属性被页面的脚本修改的时候，onchange无法捕获到，而onpropertychange却能够捕获。\n也就是说：onpropertychange事件在用键盘每改变一下文本框的值或用js改变其值便会触发一下，而onchange只有在用键盘改变其值，然后在失去焦点(onblur)后才触发，用js改变其值不能触发!onpropertychange和onchange都不管文本框中的实际值有没有变，只要有改的相应操作就可能触发。有时当上面两时间都不能满足需求时，可以考虑只用onblur。\u003c/p\u003e\n\u003cp\u003e还有一点要注意到，当onblur和onchange事件一起用时，onblur会出问题。。。。详见如下\u003c/p\u003e\n\u003cp\u003e测试页面：\u003c/p\u003e\n\u003cp\u003e通过js改变文本框中的值后触发的事件：onpropertychange事件\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e测试onpropertychange事件和onchange事件一起用时：\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e测试结果：onpropertychange事件在用键盘每改变一下文本框的值或用js改变其值便会触发一下，而onchange只有在用键 …\u003c/p\u003e"

"\u003cp\u003e咋隐藏了？改代码。\u003c/p\u003e\n\u003cp\u003e先到 官方网站去 \u003ca href=\"http://developer.longtailvideo.com/trac/browser\"\u003e下载\u003c/a\u003e 播放器的源代码，然后打开\u003c/p\u003e\n\u003cp\u003e\\as3\\com\\jeroenwijering\\models\\下的 VideoModel.as\u003c/p\u003e\n\u003cp\u003e找到112行\u003c/p\u003e\n\u003cp\u003estream.play( item[‘file’]);\u003c/p\u003e\n\u003cp\u003e改为\u003c/p\u003e\n\u003cp\u003estream.play(‘http://my.5k.cn/flv/video/v/’+ item[‘file’]);\u003c/p\u003e\n\u003cp\u003e78和109行的 item[‘file’] = item[‘levels’][model.config[‘level’]].url;\u003c/p\u003e\n\u003cp\u003e分别改成 item[‘file’] = ‘http://my.5k.cn/flv/video/v/’+ item[‘levels’][model.config[‘level’]].url;\u003c/p\u003e\n\u003cp\u003e这样改了一下以后，页面显示的视频地址是\u003c/p\u003e\n\u003cp\u003e实际地址则为 \u003ca href=\"http://my.5k.cn/flv/video/v/xp/video.mp4\"\u003ehttp://my.5k.cn/flv/video/v/xp/video.mp4\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e一般人当然是找不到这个视频的真实地址的。可以启到一定的隐藏作用。\u003c/p\u003e\n\u003cp\u003e这里有演示\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"http://my.5k.cn/flv/readme.html\"\u003ehttp://my.5k.cn/flv/readme.html\u003c/a\u003e\u003c/p\u003e"

"\u003cp\u003e其实这个Bug是由分两种情况的：\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e1.和Nginx无关，是针对CSS背景图片的。\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e一般用户不会碰到，更多的时候是开发者将自己的IE的缓存策略从默认的”自动”改为“每次访问都查询”才发生 的。特点是鼠标一旦浮动到有背景图片的地方，IE会不顾已经缓存的图片，自行去服务器再次获取图片，造成图片短暂消失。这个问题比较简单，可以通过以下脚 本解决。\u003c/p\u003e\n\u003cblockquote\u003e\n\u003c/blockquote\u003e\n\u003cblockquote\u003e\n\u003cp\u003e1\u003c/p\u003e\u003c/blockquote\u003e\n\u003cp\u003e\u003cstrong\u003e2. 但是实际上更常见的原因是Nginx上打开了Gzip压缩功能。\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e这个是IE6 的著名Bug，早在2002年就被人详细讨论过了，在IE7中有所改进，但微软永远也不会去修复IE6了。\u003c/p\u003e\n\u003cp\u003e根本原因是Nginx对于启用了Gzip的http上下文，即使你在之前的配置文件里声明过 gzip_disable “MSIE [1-6].”，Nginx不再对IE6用Gzip压缩了，但是送出的http报头却仍然采用了和Gzip压缩数据包相匹配的Vary: Accept-Encoding。IE6不认识这个报头，IE6对除了Vary: User-Agent的报头外，都不查询缓存，直接去服务器申请。更绝得是，不是使用查询文件是否更新，而是强行要求一份完整文 …\u003c/p\u003e"

"\u003cp\u003e出现问题是：使用 float: left; 后，在IE显示margin-left:1px;就变成2px的距离。\nIE Bug 的解决方法：\n加一个 display: inline; 就OK了\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003e#box1{\n\tfloat: left;\n\tbackground: #F2F2F2;\n\twidth: 300px;\n\theight: 200px;\n\tmargin-left: 50px;\n}\n\u003c/code\u003e\u003c/pre\u003e\u003c/blockquote\u003e\n\u003cblockquote\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003e#box1{\n\tfloat: left;\n\tbackground: #F2F2F2;\n\twidth: 300px;\n\theight: 200px;\n\tmargin-left: 50px;\n\tdisplay: inline;\n}\n\u003c/code\u003e\u003c/pre\u003e\u003c/blockquote\u003e\n\u003cp\u003emargin在IE6下被解释为双倍距离，出现了Margin与float一起用时，在IE6下，其Margin属性会被解释会双倍的距离，margin产生双倍距离其解决兼容问题的两种方法：\u003c/p\u003e\n\u003cp\u003e1、给当前层增加display: inline;属性。\u003c/p\u003e\n\u003cp\u003e2、取消浮动：Float。\u003c/p\u003e\n\u003cp\u003e熟悉规则的人知道浮动元素自动设置为”block”元素，而不管他们之前是什么。这说明浮动元素上的{display: …\u003c/p\u003e"

"\u003cp\u003e大多数的站点相应用户请求时发送的HTTP Headers中包含Content-Length头.此头信息定义在HTTP1.0协议 \u003ca href=\"http://www.ietf.org/rfc/rfc1945.txt\"\u003e\u003cem\u003eRFC\u003c/em\u003e 1945\u003c/a\u003e 10.4章节中.该信息是用来告知用户代理,通常意义上就是浏览器,服务端发送的文档内容长度.浏览器接受到此信息后,接收完Content-Length中定义的长度字节后开始解析页面.如果服务端有部分数据延迟发送,那么浏览器就会白屏.这样导致比较糟糕的用户体验.\u003c/p\u003e\n\u003cp\u003e解决方法在HTTP1.1协议. \u003ca href=\"http://www.ietf.org/rfc/rfc2616.txt\"\u003e\u003cem\u003eRFC2616\u003c/em\u003e\u003c/a\u003e 中14.41章节中定义的Transfer-Encoding:chunked的头信息.chunked编码定义在3.6.1中.根据此定义浏览器不需要等到内容字节全部下载完成,只要接收到一个chunked块就可解析页面.并且可以下载html中定义的页面内容,包括js,css,image等.采用chunked编码有两种选择,一种是设定Server的IO buffer长度让Server自动flush buffer中的内容，另一种是手动调用IO中的flush函数。不同的语言IO中都有flush功能:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003ephp:    ob_flush(); …\u003c/li\u003e\u003c/ul\u003e"

"\u003cp\u003eAJAX的出现极大的改变了Web应用客户端的操作模 式，它使的用户可以在全心工作时不必频繁的忍受那令人厌恶的页面刷新。理论上AJAX技术在很大的程度上可以减少用户操作的等待时间，同时节约网络上的数 据流量。而然，实际情况却并不总是这样。用户时常会抱怨用了AJAX的系统响应速度反而降低了。\n笔者从事AJAX方面的研发多年，参与开发了目前 国内较为成熟的AJAX平台-dorado。根据笔者的经验，导致这种结果的根本原因并不在AJAX。很多时候系统响应速度的降低都是由不够合理的界面设 计和不够高效的编程习惯造成的。下面我们就来分析几个AJAX开发过程中需要时刻注意的环节。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e合理的使用客户端编程和远程过程调用。\u003c/strong\u003e\n客户端的编程主要都是基于JavaScript的。而JavaScript是一种解释型 的编程语言，它的运行效率相对于Java等都要稍逊一筹。同时JavaScript又是运行在浏览器这样一个严格受限的环境当中。因此开发人员对于哪些逻 辑可以在客户端执行应该有一个清醒的认识。\n在实际的应用中究竟应该怎样使用客户端编程，这依赖于开发人员的经验判断。这里很多问题是只可意会的。 由于篇幅有限，在这 …\u003c/p\u003e"

"\u003cp\u003e微软的\u003ca href=\"http://msdn.microsoft.com/en-us/library/ms229042.aspx\" title=\"框架设计规范\"\u003e框架设计规范\u003c/a\u003e{#h.u8}是 设计的准则，它期望所有的微软类库和独立开发者都能够遵循这一准则。随着每个.NET框架版本的发布，以及在行业内的测试，它们的版本也得到了精化。通过 Cwalina与Abram所著的\u003ca href=\"http://blogs.msdn.com/brada/archive/2008/10/14/framework-design-guidelines-2nd-edition-order-yours-now.aspx\" title=\"《框架设计规范》第二版\"\u003e《框 架设计规范》第二版\u003c/a\u003e{#t.q.}的发布，我们可以看到微软在今后几年的发展方向。\u003c/p\u003e\n\u003cp\u003e或许最令人惊讶的事实是日渐增长的对于测试驱动开发和依赖注入的重视。在可重用框架的场景下，通过测试驱动开发设计出的框架是真实可用的，而不是简 单地推理。他们希望这样可以反过来杜绝某种趋势，那就是过度复杂地设计一些根本不会用到的功能。\u003c/p\u003e\n\u003cp\u003e谈到这一问题，就不得不指出的是微软当前正在推动的一个活动，即针对所有库的第1个版本进行最低限度设计。这不同于在第一次就要试图将所有事情做 对，微软推荐在最开始只需要满足需求中绝对需要的特性。Abrams和Cwalina建议在最初并不需要考虑扩展性，只有到需求变得非常清晰的时候，才在 后一个版本中考虑。从某个方面来讲，这是微软旧有传统的回归，它只会在第三个版本中提供真正完成的应用程序。\u003c/p\u003e\n\u003cp\u003e在其它领域，微软则完全没有改变。他们仍然强调所谓的“基坑成功（Pit of …\u003c/p\u003e"

"\u003cp\u003e统架构师角色关键的一方面就是衡量相互冲突的需求、决定解决方案，常常要牺牲一个方面来换取另一个方面。随着系统变得越来越大、越来越复杂，越来越多关于 如何构建应用的传统智慧正在受到挑战。比如说，去年3月在伦敦召开的QCon会议上，Dan Pritchard谈论了eBay的架构。他的介绍随后得到了很多的报道，其中一个主要的结论就是eBay不使用事务，用数据一致性上的损失来换取系统整 体伸缩性和性能上相当大的改进。\u003c/p\u003e\n\u003cp\u003eInfoQ接着Dan Pritchard在QCon会议上的谈话与他继续讨论，以获得更多信息：\u003c/p\u003e\n\u003cp\u003e为什么eBay不使用事务，或者为什么可以决定不采取应用级事务？\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e我们并非一概不使用事务。我们只是不使用跨物理资源的事务，因为它会造成多个组件之间出现依赖。组件可以是应用服务器和数据库。（例如在客户端控制 的事务中，）一个客户端的失败会长久地阻塞数据库资源、超出我们的忍受程度。我们也不使用分布式事务，因为让应用依赖于多个数据库会降低客户端实际的可用 性。相反，我们选择缺少事务的设计，并加入失效模式，失效模式可以使客户端甚至在发生数据库可用性问题的时候也能继续进行。\u003c/p\u003e\n\u003cp\u003e应用级事务总是有些问题。 …\u003c/p\u003e\u003c/blockquote\u003e"

"\u003cp\u003e在前一期 \u003ca href=\"http://www.chedong.com/blog/archives/001447.html\"\u003e山寨交流会\u003c/a\u003e 上： \u003ca href=\"http://home.51.com/diary.view.php?user=gusingchen\u0026amp;id=10038668\"\u003e桂 新\u003c/a\u003e 说他会将良好的构架和一套完整的监控系统作为两个非常重要的基础来抓，良好的架构一步到位这点很难做到（对于发展速度并不确定的小公司来说，架 构过大也是一个成本上的风险），但对于后者：一套完整监控系统我是非常认同的。对于目前普遍缺乏测试的Web应用开发过程来说，监控几乎就是测试很重要的 一部分；而系统监控本身，也可以帮助及时发现很多问题并量化优化的效果。而系统的扩展和调优的大部分技巧都可以从《构建可扩展的Web站点》(作者是 Flickr的开发者)一书中看到。为了减少不必要的调优（盲目的调优是危害很大的），建议从这2章开始看起： 第8章《瓶颈》发现和第10章《统计数据，检测和报警》；有了这些瓶颈检查结果和统计监测/报警系统后，再有针对性的看其他章节做系统调优。\u003c/p\u003e\n\u003cp\u003e以下是我在 \u003ca href=\"http://chedong.blogbus.com/logs/29595744.html\"\u003e博客大巴\u003c/a\u003e 开 发中的一些实践小结：\u003c/p\u003e\n\u003cp\u003e1 数据库相关\u003c/p\u003e\n\u003cp\u003e1.1 系统应用层面出问题我一般都习惯性的先去看数据库群的连接数统计：大部分应用最后的瓶颈都在于单表数据量过大后，数据存取慢导致的并发连接数过多的问题，\u003c/p\u003e\n\u003cp\u003e1.2 解决这个问题目前的主要策略就是分片( \u003ca href=\"http://www.dbanotes.net/database/database_sharding.html\"\u003eshare nothing\u003c/a\u003e)，单个数 …\u003c/p\u003e"

"\u003cp\u003e在前不久结束的 \u003ca href=\"http://qconsf.com/\"\u003eQCon 2008\u003c/a\u003e 上，MySpace 的首席架构师 \u003ca href=\"http://jaoo.dk/london-2008/speaker/Dan+Farino\"\u003eDan Farino\u003c/a\u003e 做了题为 \u003ca href=\"http://qconsf.com/sf2008/file?path=/qcon-sanfran-2008/slides//DanFarino_Myspace.pdf\"\u003eBehind the Scenes at MySpace.com\u003c/a\u003e (PDF 下载)的技术演讲。\u003c/p\u003e\n\u003ch4 id=\"架构概况\"\u003e架构概况\u003c/h4\u003e\n\u003cp\u003e超过 4,500 台 Web 服务器，配置为 Windows 2003/IIS 6.0/ASP.NET ；超过 1200 台 Cache 服务器，64 位的 Windows 2003，超过 500 台的数据库服务器，配置为 64 位的 Windows 2003，数据库为 SQL Server 2005 。\u003c/p\u003e\n\u003cp\u003e之前曾有一篇 \u003ca href=\"http://www.baselinemag.com/c/a/Projects-Networks-and-Storage/Inside-MySpacecom/\"\u003e揭 秘 MySpace 架构\u003c/a\u003e的文章，也有中文版本《 \u003ca href=\"http://www.kuqin.com/system-analysis/20071230/3238.html\"\u003e亿万用户网站 MySpace的成功秘密\u003c/a\u003e》！\u003c/p\u003e\n\u003ch4 id=\"运维数据收集\"\u003e运维数据收集\u003c/h4\u003e\n\u003cp\u003e其实这个演讲我感觉主要讲的是这个数据收集模块 🙂 MySpace 的方案倒是让我们看到了在超大规模的 Windows 环境下如何进行数据收集的。\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"http://blog.haohtml.com/wp-content/uploads/2010/06/1626170.png\"\u003e\u003cimg src=\"https://blogstatic.haohtml.com//uploads/2023/09/1626170.png\" alt=\"myspace系统架构\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e每个客户端通过一个 TCP 连接到收集上服务器。收集的信息包括：Windows 性能计数器 Performance Counters、 WMI 对象(定制后的 WMI 对象)、事件日志、 硬件数据等等。收集器服 …\u003c/p\u003e"

"\u003cp\u003e从老高的近期工作总结中看到：\u003c/p\u003e\n\u003cp\u003e目前的技术状况是基于自行设计的 PHP 框架，跑在 PHP 5.2 + MySQL 5.1 下，PHP 使用 Fastcgi 模式，WebServer 选择了 Nginx。搜索功能基于 Lucene 开发。缓存代理使用 Varnish。\u003c/p\u003e\n\u003cp\u003e对老高进行了一次非正式采访，聊了不少内容，整理了一下和大家分享。(谁是高春辉? 这个不要介绍了吧，请 Google! )\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e历史情况\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eFenng: 原来大约是用什么? 框架用的什么？\n高春辉: 你说老系统？Apache 1.3 , DB 是 MySQL 4.0。新框架是团队自己写的，定制了一些东西吧，主要强调的是性能和方便、简单。另外把针对 YSlow 的优化也做进去了。\nFenng: 单说现在用的框架，大约投入了多少个人/天 ?\n高春辉: 从全年开始考虑写，一直不断的写 — 具体时间不好说。反正是不少了 🙂\nFenng: 看了你 Blog 中的描述，有个小疑惑：没使用面向 DB 的 Cache 层?\n高春辉: 我文中说的 Data accessor 就算是了。目前是拿 PHP 做的，Client+Server 集成在一 …\u003c/p\u003e"

"\u003cp\u003e基于ID的分片机制实现存储的分布化会遇到一个问题：固定存储空间随着时间增加再次达到系统的空间/负载的瓶颈。观察了一下Flickr的图片存储 地址：好像是在定期启用新的集群，各个时期的域名分布如下：\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e\u003ca href=\"http://farm1.static.flickr.com\"\u003ehttp://farm1.static.flickr.com\u003c/a\u003e 2006年中以前；\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"http://farm2.static.flickr.com\"\u003ehttp://farm2.static.flickr.com\u003c/a\u003e 2006年底；\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"http://farm3.static.flickr.com\"\u003ehttp://farm3.static.flickr.com\u003c/a\u003e 2007年底；\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"http://farm4.static.flickr.com\"\u003ehttp://farm4.static.flickr.com\u003c/a\u003e 2008年底；\u003c/p\u003e\u003c/blockquote\u003e\n\u003cp\u003e\u003ca href=\"http://www.kuqin.com/shuping/20081003/20540.html\"\u003e《构建可扩展的Web站点》\u003c/a\u003e 上 没有提到这个策略，猜测Flickr应该是不断在启用新的服务器集群，当地一个集群用到90%的时候，开始启用下一个集群。一个用户的所有图片地址则存储 在数据库中：记录会包含当时的存储所在的集群：\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003euser_foo – farm1.static……/20060124_003.jpg\u003c/p\u003e\n\u003cp\u003e\\ farm1.static……/20060324_005.jpg\u003c/p\u003e\n\u003cp\u003e\\ farm1.static……/20060824_021.jpg\u003c/p\u003e\n\u003cp\u003e\\ …\u003c/p\u003e\u003c/blockquote\u003e"

"\u003cp\u003e当Microsoft在PDC2008上携 \u003ca href=\"http://www.kuqin.com/system-analysis/20081030/25061.html\"\u003eAzure平台\u003c/a\u003e 驾 云而来时，天气预测注定将发生改变。将当前市场上分别来自Amazon、Google和Microsoft的三大主流产品作一比较会是一件非常有意思的事 儿。第一眼看上去的印象是它们彼此之间似乎实际上并不存在真正的相互竞争。\u003c/p\u003e\n\u003cp\u003eZiff兄弟投资的副总裁Michael J. Miller \u003ca href=\"http://blogs.pcmag.com/miller/2008/11/cloud_thinking_amazon_microsof.php\"\u003e对云计算的三大角逐者进行了比较\u003c/a\u003e，这是他关于Amazon EC2的发现：\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e备受关注的云平台无疑就是\u003ca href=\"http://aws.amazon.com/\"\u003eAmazon Web服务\u003c/a\u003e了，它是多种工具 的集合，大部分都位于相当底层。其中又以Amazon弹性计算云(EC2)最为出众，这一Web服务能你将应用分配给任意多的“计算单元”。简单的说，一 个标准的单一实例包括了一个“虚拟核心”，1.7GB的内存，以及160GB的存储实例（只针对该对话的存储），价格为每小时10美分。在这个服务之上， 你可能会考虑使用该公司提供的“简单存储服务”(S3)，对于前50TB的数据，其价格是每GB每月15美分，之后价格递减，同时要收取一定的交易费用。 同时你也可能考虑使用该公司的“Simple DB”数据库，或者是用于存储消息的队列 …\u003c/p\u003e\u003c/blockquote\u003e"

"\u003cp\u003e\u003cstrong\u003e前言：\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e关于Digg的架构，之前 \u003ca href=\"http://www.dbanotes.net/\"\u003eFenng\u003c/a\u003e 已 经写过一篇 \u003ca href=\"http://www.kuqin.com/system-analysis/20090214/34906.html\"\u003eDigg 网站架构\u003c/a\u003e 的文章，Fenng在文章开头说“\u003cem\u003e越来越发现其实都是自我重复的劳动，后续的信息都是嚼别人剩下的甘蔗。\u003c/em\u003e”，其实是 Fenng过谦了，我就是从 \u003ca href=\"http://www.dbanotes.net/\"\u003eDBA notes\u003c/a\u003e 一点一滴开始学习的。\u003c/p\u003e\n\u003cp\u003e原文在 \u003ca href=\"http://highscalability.com/scaling-digg-and-other-web-applications\"\u003eScaling Digg and Other Web Applications\u003c/a\u003e， \u003ca href=\"http://highscalability.com/\"\u003eTodd Hoff\u003c/a\u003e 总能给我们带来一些有意思的文章。这里既不直译也不全译，保持原文骨干加上肤浅的理解。\u003c/p\u003e\n\u003cp\u003eDigg用户在3000W左右，网站每秒请求数达到13000个，规模算是很大了，Lamp（Linux+Apache+MySQL+PHP）结 构，Web2.0网站中钟情PHP的不少，国外的Facebook、Digg、Flickr…，国内的新浪博客、开心网、51.com等等，扩展的不是编程语言而是网站架构，因为编程语言从来都不会是网站瓶颈，每种语言都有自己适合做和不适合做的事情。喜欢比较语言快慢的可以看看 \u003ca href=\"http://shootout.alioth.debian.org/\"\u003ehttp://shootout.alioth.debian.org/\u003c/a\u003e， 看看而已不要用速度去衡量编程语言的优劣。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eDigg的扩展战略：\u003c/strong\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e扩 …\u003c/li\u003e\u003c/ul\u003e"

"\u003cp\u003e本篇描述一下 \u003ca href=\"http://digg.com/\"\u003eDigg\u003c/a\u003e 的网站架构.\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003e国庆期间又收集了一些关于网站架构的信息。一直没有进行系统的整理。越来越发现其实都是自我重复的劳动，后续的信息都是嚼别人剩下的甘蔗。--by Fenng\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003eDigg 工程师采用 LAMP (Linux, Apache, MySQL and PHP) 模式。这个 Alexa 排名在 100 左右的、自我估价 1.5 亿美金的站点目前有超过 100 台的 PC 服务器(足够少了)，可以粗略分成三个部分：数据库服务器，Web 服务器，搜索服务器。\u003c/p\u003e\n\u003cp\u003e数据库方面，和其他成功的 Web 2.0 站点一样，也是 MySQL，不过 Digg 稍微”激进”一点，用 MySQL 5，而且号称从 MySQL 4 升级到 5 性能没有什么影响。 OLTP 应用用 InnoDB 引擎, OLAP 用 MyISAM。后端数据库的读比例达到 98%，写只有 2%，实际的读写比例应该高于这个数字，这应该是 Digg 在前端用 \u003ca href=\"http://www.danga.com/memcached/\"\u003eMemcached\u003c/a\u003e 以及 \u003ca href=\"http://php.net/apc\"\u003eAPC PHP accelerator\u003c/a\u003e / MCache 做缓存后的效果。在 IO 上似乎压力并不大。\u003c/p\u003e\n\u003cp\u003e数据库分割用 Sharding …\u003c/p\u003e"

"\u003cp\u003e很多人都觉得 eBay 在 \u003ca href=\"http://www.qconbeijing.com/\"\u003eQCon (北京)\u003c/a\u003e 上的技术\u003ca href=\"http://qconbeijing.com/Speaker.aspx?Id=8\"\u003e讲座\u003c/a\u003e不错，但对我来说，其实 冲击力没那么大了。eBay 一两年前就是这个 PPT 。不过还是比 Amazon 的 Jeff Barr 强了很多，以后要是开个什么会，你把 Jeff Barr 请来还讲那个销售文档，估计自己都不好意思。\u003c/p\u003e\n\u003cp\u003e不过，eBay 这次的PPT 总算还是有点更新的。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e1）数据分片(Partition Everything)\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e说是分区(Partition)，这里不能简单等同于 Oracle 的分区，理解成分片(Sharding)就好啦。可以参考一下我以前写的科普小文： \u003ca href=\"http://www.kuqin.com/database/20080825/15070.html\"\u003e开源数据库 Sharding 技术 (Share Nothing)\u003c/a\u003e。这里要强调一下的是，分片是在数据量的确有规模的时候才适合进行，如果单节点足以应付，那么还是不要冒 进。\u003c/p\u003e\n\u003cp\u003e从分片的模式上，eBay 主要根据功能切分(Functional Segmentation)和水平分割(负载均衡考虑)，作为推论，所有会话都是无状态性的。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e2）异步处理(Asynchrony Everywhere)\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e其实对于任何网站来说，过度追求”同步”化设计还是比较糟糕的做法。以 …\u003c/p\u003e"

"\u003cp\u003e这次 \u003ca href=\"http://www.qconbeijing.com/\"\u003eQCon (北京)会议\u003c/a\u003e网站架构案例分析这个 Track ，虽然话题不多，但课程设计时候考虑覆盖的面还是比较广的。作为视频网站代表，优酷带来了一场包含不少实战经验的技术分享。\u003ca href=\"http://www.qconbeijing.com/Speaker.aspx?Id=29\"\u003e邱丹\u003c/a\u003e(优酷网开发副总裁，核心架 构师)可能公司的事情比较忙，一直到第二天中午才赶到会场。还半开玩笑说，’怎么这么多人，还以为是小型的会议呢’…\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"http://blog.haohtml.com/wp-content/uploads/2010/06/youku.com_.jpg\"\u003e\u003cimg src=\"https://blogstatic.haohtml.com//uploads/2023/09/youku.com_.jpg\" alt=\"\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e缓存\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e缓存黄金原则：\u003cstrong\u003e让数据更靠近 CPU\u003c/strong\u003e。\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003eCPU--\u0026gt;CPU 一级缓存--\u0026gt;二级缓存--\u0026gt;内存--\u0026gt;硬盘--\u0026gt;LAN--\u0026gt;WAN\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e讲到了 Youku 自己的内部项目，针对大文件缓存的。目前开源软件中，Squid 的 write() 用户进程空间有消耗，Lighttpd 1.5 的 AIO(异步I/O) 读取文件到用户内存导致效率也比较低下。Youku 不用内存做缓存(避免内存拷贝，避免内存锁)。值得注意的是，缓存技术容易被滥用，也有副作用，比如接到老大哥通知要把某个视频撤下来，如果在缓存里是比 较麻烦的。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e数据库\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e优酷对数据库 Sharding 做了不少尝试，而且实现效果应该不错。DB 读写分离上有比较丰富的经验。\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"http://blog.haohtml.com/wp-content/uploads/2010/06/Youku_Sharding.png\"\u003e\u003cimg src=\"https://blogstatic.haohtml.com//uploads/2023/09/Youku_Sharding.png\" alt=\"\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e为了提升数据 …\u003c/p\u003e"

"\u003cp\u003e传统的文件同步方案有rsync(单向) 和 unison(双向)等，它们需要扫描所有文件后进行比对，差量传输。如果文件数量达到了百万甚至千万量级，扫描所有文件将非常耗时。而且正在发生变化的 往往是其中很少的一部分，这是非常低效的方式。\u003c/p\u003e\n\u003cp\u003e之前看了\u003ca href=\"http://s3.amazonaws.com/AllThingsDistributed/sosp/amazon-dynamo-sosp2007.pdf\"\u003eAmazon 的Dynamo的设计文档\u003c/a\u003e，它们每个节点的数据是通过Hash Tree来实现同步，既有通过日志来同步的软实时特点(msyql, bdb等)，也可以保证最终数据的一致性(rsync, unison等)。Hash Tree的大体思路是将所有数据存储成树状结构，每个节点的Hash是其所有子节点的Hash的Hash，叶子节点的Hash是其内容的Hash。这样一 旦某个节点发生变化，其Hash的变化会迅速传播到根节点。需要同步的系统只需要不断查询跟节点的hash，一旦有变化，顺着树状结构就能够在logN级 别的时间找到发生变化的内容，马上同步。\u003c/p\u003e\n\u003cp\u003e文件系统天然的是树状结构，尽管不是平衡的数。如果文件的修改时间是可靠的，可以表征文件的变化，那就可以用它作为文件的Hash值。另一方面，文 件的修改通常是按顺序执行的，后修改的文件比早修改的文件具有更大 …\u003c/p\u003e"

"\u003cp\u003e这次beta沙龙请了\u003ca href=\"http://www.paulgao.com.cn/\"\u003e高春辉\u003c/a\u003e的团队来讲他们的经验。本来我是 希望老高讲，不过他说最近的系统主要是许超前在带人开发，所以实际的演讲人是许超前。\u003c/p\u003e\n\u003cp\u003e国内最早让大家意识到网站的发展阶段的文档大概就是于敦德翻译的LiveJournal发展历程的ppt。这次许超前的演讲非常类似 LiveJournal的那篇。\u003c/p\u003e\n\u003cp\u003e手机之家用了7年时间，发展到1000万以上用户，3000万以上帖子，1.1TB附件，每天780万以上的PV这个规模。这个数字虽然比 不上大型互联网公司，但是对一个只有几个人的技术团队，已经是一个很令人骄傲的数字了。\u003c/p\u003e\n\u003cp\u003eLiveJournal在发展中一边用着开源软件，一边造轮子，最后造出来了memcached这个简单而强大的工具，最终成了这一代网站开发离不 开的东西。\u003c/p\u003e\n\u003cp\u003e这次演讲有意思的部分就是从memcached相关的事情开始的。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e一 关于memcached的应用和管理。\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003ememcached确实是个简单，好用，见效快的东西。不过简单也有简单的问题，程序员各有各的习惯，结果导致key很不规范，用什么方式的都有。 这个问题恐怕用过memcached的人都深有体会。当然，用开发规范来限制程序员的行为是一 …\u003c/p\u003e"

"\u003cp\u003e在 QCon 2008 (旧金山站) 上Facebook 做的这个技术分享有不少值得借鉴的东西。所 以，暂停对 QCon 北京的回顾，临时插播一贴。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e设计原则\u003c/strong\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e尽可能的使用开源软件，并且在需要优化的时候进行优化\u003c/li\u003e\n\u003cli\u003eUnix 哲学。包括，模块化原则；整合化原则；清晰化原则等\u003c/li\u003e\n\u003cli\u003e任何组件具备扩展性\u003c/li\u003e\n\u003cli\u003e最小化故障影响\u003c/li\u003e\n\u003cli\u003e简化，简化，简化！\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003e架构概览\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eFacebook 是 LAMP 的坚定支持者，也差不多是用 LAMP (或许用 LAM2P 更适合) 实现的最大的动态站点。\u003cimg src=\"http://www.kuqin.com/upimg/allimg/090412/2229360.png\" alt=\"Facebook Arch Overview.png\"\u003e\u003c/p\u003e\n\u003cp\u003e基础组件加上服务，中间用自己实现的一些工具进行粘合。其中关于运维细节的事情基本不会说出来的，这是很多公司的软实力所在。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003ePHP 经验\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e参见《 \u003ca href=\"http://www.kuqin.com/web/20080410/6398.html\"\u003eFacebook 的 PHP 性能与扩展性\u003c/a\u003e》\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eMySQL 经验\u003c/strong\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e主要用于做 Key-Value 类型的存储操作，数据随机分布在多台逻辑实例上，访问多数基于全局 ID 。\u003c/li\u003e\n\u003cli\u003e逻辑实例分散在多台物理主机上(超过1800台)，负载均衡在物理层进行。\u003c/li\u003e\n\u003cli\u003e不做读复制。\u003c/li\u003e\n\u003cli\u003e尽量不做逻辑数据迁移(成本太高)。\u003c/li\u003e\n\u003cli\u003e不做 JOIN 操作 ( \u003ca href=\"http://www.kuqin.com/system-analysis/20090411/45329.html\"\u003e豆瓣在 QCon\u003c/a\u003e 上也阐述了这一点)。数据是随机分布的，关联操作反而带 …\u003c/li\u003e\u003c/ul\u003e"

"\u003cp\u003e根据Linda Rising的《Pattern Almanac》一书，已知的架构模式有七十多种。这是一个只多不少的统计，其中包括了很多通常认为是设计模式的模式，比如 Bridge，Facade，Interpreter，Mediator等模式通常认为是设计模式，但是在许多情况下，也可以作为架构模式出现，因此也常 常被当作架构模式。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eLayers架构模式\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e在收集到用户对软件的要求之后，架构设计就开始了。架构设计一个主要的目的，就是把系统划分成为很多”板块”。划分的方式通常有两种，一种是横向的划分， 一种是纵向划分。\u003c/p\u003e\n\u003cp\u003e横向划分将系统按照商业目的划分。比如一个书店的管理系统可以划分成为进货、销售、库存管理、员工管理等等。\u003c/p\u003e\n\u003cp\u003e纵向划分则不同，它按照抽象层次的高低，将系统划分成”层”，或叫Layer。比如一个公司的内网管理系统通常可以划分成为下面的几个Layer:\u003c/p\u003e\n\u003cp\u003e一、网页，也就是用户界面，负责显示数据、接受用户输入；\u003c/p\u003e\n\u003cp\u003e二、领域层，包括JavaBean或者COM对象、B2B服务等，封装了必要的商业逻辑，负责根据商业逻辑决定显示什么数据、以及如何根据用户输入的数据 进行计算；\u003c/p\u003e\n\u003cp\u003e三、数据库，负责存储数 …\u003c/p\u003e"

"\u003cp\u003e切分是最基本，且最多变的思路之一，说基本，是因为在学习程序设计的第一天就应该知道，说多变，是因为在未来的很多年里，你会不停的应用这个方法来 解决问题。不幸的是，切分这个思路并没有得到应有的重视。\u003c/p\u003e\n\u003cp\u003e大概是因为这个词比较土，说起来也比较普通，远不如并行，集群，负载平衡这些词听起来大。所以碰到一个问题的时候，往往被拿出来的解决方案会是以上 3个大词之一，很少有人去认真的考虑切分问题。但事实上，这3个大词所需要的技术，其实也是建立在良好可切分的系统之上的。\u003c/p\u003e\n\u003cp\u003e最近碰到了2个项目，都是典型案例。\u003c/p\u003e\n\u003cp\u003e案例1 ，小公司，发展的不错。一台服务器眼看不够用了，于是就买了第二台，希望能做一个”负载均衡”系统。很多人大概认为负载均衡，是类似自来水一样的技术，只 要打开笼头，清水就汩汩涌出。往往忘记了水龙头后面的水管和自来水公司。\u003c/p\u003e\n\u003cp\u003e一个服务器上放了很多个服务，是很难应用负载均衡这种技术的。必须先要把服务拆开，找到性能薄弱的点，对这个点进行负载均衡，才能得到比较好的效 果。否则很可能用了80%的力气，但是只得到20%的结果。\u003c/p\u003e\n\u003cp\u003e案例2，某外企。之前我们给他们做过咨询，解决了一次问题，上次我们找到了系统最慢的地方，去掉 …\u003c/p\u003e"

"\u003cp\u003e最近和几个朋友在谈到时下流行的Web 2.0，也提到了其中最重要的角色——架构师。多方各有争执，不外乎是因为背景和视角的缘故，包括架构一词，本身就从建筑学借鉴而来，至于架构师，则可以 简单地从建筑学的设计师来引申，不外乎就是设计结构，设计一个大楼的结构。回到软件本身，那就可以简单地理解为负责设计软件框架的人了。\u003c/p\u003e\n\u003cp\u003e我们没有讨论清楚架构师、软件架构师、系统架构师及其Web 架构师这些看似相同却有所区别的角色的关键，本身智者见智，仁者见仁，也不是一时半会能够说清楚的，最后我们讨论作为一个Web 2.0 网站架构师需要的一些基本的知识和能力，既然是个人看法，难免有失偏颇：\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e熟知你的业务模式和目标人群\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e这是最重要的，Web 2.0 本质上是以Web 作为平台的业务应用，如果不真正了解你的业务，不了解用户的核心需求，不了解你目标客户的典型行为，是很难做好网站的。从这个角度来讲，一个Web 架构师首先必须是一个出色的产品经理。大多时候，我们只要做到业务技术领先就足够了，一味地追求技术的先进性反倒会深陷泥潭。\u003c/p\u003e\n\u003cp\u003e在技术和业务之间找到一个平衡，也就意味着必须明白整个业务核心的竞争力在哪？目标人群基本诉求在 …\u003c/p\u003e"

"\u003cp\u003e\u003ca href=\"http://blog.evanweaver.com/about/\"\u003eEvan Weaver\u003c/a\u003e 是 \u003ca href=\"http://www.kuqin.com/shuoit/Twitter/\"\u003eTwitter\u003c/a\u003e 服务团队的总工程师，他的主要工作是 优化与伸缩性。在 \u003ca href=\"http://qconlondon.com/\"\u003eQCon London 2009\u003c/a\u003e 上，他谈到了Twitter的架构，特别是在过去一年当中为提升Web站点性能所执行的优化。\u003c/p\u003e\n\u003cp\u003eTwitter使用的大部分工具都是开源的。其结构是用Rails作前端，C，Scala和Java组成中间的业务层，使用MySQL存储数据。所 有的东西都保存在RAM里，而数据库只是用作备份。Rails前端处理展现，缓存组织，DB查询以及同步插入。这一前端主要由几部分客户服务粘合而成，大 部分是C写的：MySQL客户端，Memcached客户端，一个JSON端，以及其它。\u003c/p\u003e\n\u003cp\u003e中间件使用了Memcached，Varnish用于页面缓存，一个用Scala写成的MQ，Kestrel和一个Comet服务器也正在规划之 中，该服务器也是用Scala写成，当客户端想要跟踪大量的tweet时它就能派上用场。\u003c/p\u003e\n\u003cp\u003eTwitter是作为一个“内容管理平台而非消息管理平台”开始的，因此从一开始基于聚合读取的模型改变到现在的所有用户都需要更新最新tweet 的消息模型，需要许许多多的优化。这一改动主 …\u003c/p\u003e"

"\u003cp\u003e从20台服务器到5000台服务器，应该说，校内网的IT基础设施的变迁是与其自身的业务发展成 正比的，而每一次的业务突破实际上也是对数据中心的一个挑战。传统的IT基础建设模式，现在、将来又当如何适应SNS类网站的发展？从Csdn记者此次与 校内网技术总监黄晶的对话中，也许我们可以了解一二。\n\u003cstrong\u003e从20台到5000台服务器\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e作为校内网的CTO，黄晶对过去几年校内网IT基础建设的过程历历在目。\u003c/p\u003e\n\u003cp\u003e“如果要把这个历程分成几个阶段，那么在我看来，校内网的IT基础设施建设目前经历了三个阶段”。\u003c/p\u003e\n\u003cp\u003e黄晶对Csdn记者谈到，第一个阶段是校内网创业的阶段，那时候，校内网的主要推广对象是国内比较好的一些高校，但数量很有限，用户数不太多，访问量也不 大，因此，当时选择了一个IDC并租赁了20台左右的服务器。\u003c/p\u003e\n\u003cp\u003e“随着业务的发展，校内逐渐把业务覆盖到了全国，与此同时，数据量可以呈现几何式的增大，带宽与存储迎来了瓶颈，因此在那时候，公司开始寻找新的IT基础 架构解决方案，并因此而找到了世纪互联做服务器的托管，几年的时间，服务器的数量从几十台上升到了近5000台。”\u003c/p\u003e\n\u003cp\u003e“但问题也随之出现，虽然带宽够大，但是找IDC托管的这种 …\u003c/p\u003e"

"\u003cp\u003e要设计良好的架构，必须做到关注点分离，这样可以产生高内聚、低耦合的系统，这是美丽架构的终极原则。\u003c/p\u003e\n\u003cp\u003e文 / 王海鹏\u003c/p\u003e\n\u003cp\u003e什么是架构？ 每个人可能都有自己对架构的定义。我比较喜欢的定义是：“架构是系统的组成部件及其之间的相互关系。”根据观察者的视角不同，架构 又可以分为业务架构和技术架构。一般来说， 功能性需求会对业务架构产生影响， 而非功能性需求会对技术架构产生影响。\u003c/p\u003e\n\u003cp\u003e例如：“注册用户可以向自己的相册上传图片，并与好友分享”。这是一项功能性需求。它告诉了我们在系统的业务架构中，会出现“注册用户”“相册”、 “图片”、“好友”等组成部件，它们之间存在着相互关系。而“系统可以支持10万并发用户，并在需要时可以方便地伸缩，扩展到支持100万到1000万的 并发用户”，则是一项非功能性需求。它告诉了我们系统在性能、负载、吞吐量、可伸缩性方面的特性，目标系统的架构必须对这些特性提供支持。\u003c/p\u003e\n\u003cp\u003e架构体现的是对复杂系统的分解设计。而如何进行分解，则是软件设计领域永恒的话题。实际上，架构体现的是关注点分离的原则和方法。经典的三层架构， 由展现层、业务逻辑层和持久层构成；其中体现了我们对用户界面、业务逻辑和数据持 …\u003c/p\u003e"

"\u003cp\u003e**Question：**假设一家 C2C 网站，数据库中某表存储买卖双方交易的数据信息，对于一条交易来说，买卖双方数据具有一定程度的耦合性，比如卖家的状态更新对应买家的状态也会更新，对于 一个中大规模的电子商务网站，架构师在设计中如何考虑数据分片的问题（假定该表随着数据的膨胀必须拆分)?\u003c/p\u003e\n\u003cp\u003e**Answer：**对于一个中大规模的电子商务网站，随着网站的不断发展，其相应的数据规模会不断膨胀。 \u003ca href=\"http://www.kuqin.com/database/20080825/15070.html\"\u003e数据分片技术\u003c/a\u003e 是使网站得 于实现可扩展性的一种常用解决方案。对于 C2C 类型的网站，由于交易记录不容易进行水平的数据分割，因此对于这样的应用处理要再进行细分：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e买卖双方交易的信息，具备较高的时效性，即交易全部完成后就不会再有更新，因此这部分数据可以与正在交易中的数据区分开来，并可以单独分 表，定时归纳。具体的做法可以采用水平分割的数据分片技术，比如可以根据用户号码段范围进行切片，把不同的群体划分到不同的 DB 上，这样可以很好的进行横向水平扩展（Scale Out）。它可以很好的突破单节点数据库服务器的 I/O 能力限制，解决数据库扩展性问题。\u003c/li\u003e\n\u003cli\u003e对于正在交易中的数据，主要根据时间进行分表。如果 …\u003c/li\u003e\u003c/ul\u003e"

"\u003cp\u003e与国外大型软件公司相比，在金山，架构师的发展还处于一个学习阶段，我们也正在实践中摸索适合我们的方法。借此机会，我想和大家分享一下WPS项目 中架构师的发展历程和经验教训，共同探讨适合中国软件业的架构师之路。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eWPS项目架构师发展回顾\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eWPS项目架构师的发展是随着V6（内部代号，指WPS Office 2005即后续版本）开始的，在此之前，开发团队并没有明确的架构师角色，开发人员在自发的、简单的模块分工交流之后，即开始各自的编码。从2002年下 半年开始，由包括许式伟在内的一个团队开始V6的前期工作。通过半年的原型开发，确定了模块划分和接口。我觉得，这是我们第一次实施由架构师主导的软件开 发过程。\u003c/p\u003e\n\u003cp\u003e我是在表格组成为架构师的。在此之前，我在表格组作为核心程序员，负责关键模块的开发。大约一年后，随着软件规模不断扩大，项目组成员不断增多，依 靠程序员自发协调的开发模式开始成为项目瓶颈。再加上我自己的兴趣，于是我开始向架构师方向发展。2004 年，系统架构组成立，正式确立了架构师岗位。大致上WPS的架构师与程序员的比例约为1:10，与管理人员相当。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e架构师的定位和职能\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e虽然当前架构师岗位已经非常 …\u003c/p\u003e"

"\u003cp\u003e软件架构师是个让人羡慕的职业，在市场经济成熟的国家，其薪酬已经达到医生、律师、注册会计师、建筑设计师的水平。但是薪酬高低与职业成熟度没有直 接的关系。重赏之下必有勇夫，高薪往往造成培养机制不健全的行业出现暂时的良莠不齐。目前我们还没有培养软件架构师的成熟机制，架构师大多是程序员自学成 材。程序员擅长和电脑打交道，却不善于处理工作中的人际关系。然而经验表明，除了技术特长，沟通协作的技巧、领导协调的能力、统筹取舍的经验在指挥开发项 目的过程中起着更重要的作用，而这些内容在计算机学院的课本里压根找不到。刚刚升任软件架构师的人，都有一段时间觉得茫然失措，因为有太多非技术问题困扰 着他们。\u003c/p\u003e\n\u003cp\u003e****软件架构师是IT 行业里独一无二的职业，既要精通软件开发技术，又要掌握业务知识，还要周旋于公司不同部门之间，协调各种予盾。做到这些绝非易事， \u003ca href=\"http://blog.csdn.net/bvbook\"\u003e博文视点\u003c/a\u003e 即将翻译出版的新书《软件 架构师应该知道的97 件事》（ \u003ca href=\"http://architect.97things.oreilly.com/wiki/index.php/97_Things_Every_Software_Architect_Should_Know_-_The_Book\"\u003e97 Things Every Software Architect Should Know\u003c/a\u003e ）探讨的就是这个主题。\u003c/p\u003e\n\u003cp\u003e本书的编辑Richard Monson-Haefel 是畅销书《 …\u003c/p\u003e"

"\u003cp\u003eMySQL Cluster是MySQL适合于分布式计算环境的高实用、高冗余版本。它采用了NDB Cluster存储引擎，允许在1个Cluster中运行多个MySQL服务器。\u003c/p\u003e\n\u003cp\u003eMySQL Cluster是一种技术，该技术允许在无共享的系统中部署“内存中”数据库的Cluster。通过无共享体系结构，系统能够使用廉价的硬件，而且对软硬 件无特殊要求。此外，由于每个组件有自己的内存和磁盘，不存在单点故障。\u003c/p\u003e\n\u003cp\u003e总结了些移植到MySQL Cluster要注意的常见问题。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e关于连接\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eMySQL集群适合用于高速带宽的环境中，采用TCP/IP方式 连接。它的性能跟主机间的连接速率有直接关系。集群中的最小速率要求是常规的100Mb以太网或者等同的网络。我们建议可能的话就采用G级网络。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e关于内存\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eMySQL集群可以运行在任何启用NDB的平台上。显然，CPU 越快，内存越大，对集群性能提升越明显，64位的CPU也可能比32位的处理器更快。每个作为数据节点的机器都必须有足够的内存来保存共享数据库。\u003c/p\u003e\n\u003cp\u003e在MySQL 5.0中，集群只能基于内存。意思是所有表的数据(包括索引)都保存在内存中。如果你的数据有1GB那么大， …\u003c/p\u003e"

"\u003cp\u003e我们今天主要向大家介绍的是MySQL 集群，其中包括对MySQL 集群的概念介绍，以及如何在Server1与Server2上正确对MySQL进行安装 ，还有对安装与配置管理节点服务器(Server3)的正确操作 ，配置集群服务器并启动MySQL 。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e一、介绍\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e这篇文档旨在介绍如何安装配置基于2台服务器的MySQL集群。并且实现任意一台服务器出现问题或宕机时MySQL依然能够继续运行。\u003c/p\u003e\n\u003cp\u003e注意！\u003c/p\u003e\n\u003cp\u003e虽然这是基于2台服务器的MySQL集群，但也必须有额外的第三台服务器作为管理节点，但这台服务器可以在集群启动完成后关闭。同时需要注意的是并 不推荐在集群启动完成后关闭作为管理节点的服务器。尽管理论上可以建立基于只有2台服务器的MySQL集群，但是这样的架构，一旦一台服务器宕机之后集群 就无法继续正常工作了，这样也就失去了集群的意义了。出于这个原因，就需要有第三台服务器作为管理节点运行。\u003c/p\u003e\n\u003cp\u003e另外，可能很多朋友都没有3台服务器的实际环境，可以考虑在VMWare或其他虚拟机中进行实验。\u003c/p\u003e\n\u003cp\u003e下面假设这3台服务的情况：\u003c/p\u003e\n\u003cp\u003eServer1: MySQL1.vmtest.net 192.168.0.1 …\u003c/p\u003e"

"\u003cp\u003e1．  先了解一下你是否应该用 mysql 集群。\u003c/p\u003e\n\u003cp\u003e减少数据中心结点压力和大数据量处理，采用把 mysql 分布，一个或多个 application 对应一个 mysql 数据库。把几个 mysql 数据库公用的数据做出共享数据，例如购物车，用户对象等等，存在数据结点里面。 其他不共享的数据还维持在各自分布的 mysql 数据库本身中。\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"http://blog.haohtml.com/wp-content/uploads/2010/06/cluster-components-1.png\"\u003e\u003cimg src=\"http://blog.haohtml.com/wp-content/uploads/2010/06/cluster-components-1.png\" alt=\"\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e2．  集群 Mysql 中名称概念 .( 如上图 )\u003c/p\u003e\n\u003cp\u003e1 ） Sql 结点（ SQL node– 上图对应为 mysqld ） : 分布式数据库。包括自身数据和查询中心结点数据 .\u003c/p\u003e\n\u003cp\u003e2 ）数据结点 (Data node — ndbd): 集群共享数据 ( 内存中 ).\u003c/p\u003e\n\u003cp\u003e3 ）管理服务器 (Management Server – ndb_mgmd): 集群管理 SQL node,Data node.\u003c/p\u003e\n\u003cp\u003e3 ．配置\u003c/p\u003e\n\u003cp\u003emysql-max 版本，当然现在 mysql 集群系统 windonws 平台上面不被支持 .\u003c/p\u003e\n\u003cp\u003e安装 mysql 就不多说了，网上一打堆，简明扼要。\u003c/p\u003e\n\u003cp\u003eA:192.168.1.251 – Data node 和 Management …\u003c/p\u003e"

"\u003cp\u003e在为某证券公司设计其OA架构时，初期客户是30万用户在线；然而在项目实施中，客户又提出50万用户同时在线的需求，而且都有写的需求；这样初始的设计 master-master-slave，读写分离满足不了客户的要求，所以我们打算采用Mysql Cluster方案；MySQL Cluster 是MySQL适合于分布式计算环境的高实用、高冗余版本。它采用了NDB Cluster 存储引擎，允许在1个Cluster中运行多个MySQL服务器。在MyQL 5.0及以上的二进制版本中、以及与最新的Linux版本兼容的RPM中提供了该存储引擎。\u003c/p\u003e\n\u003cp\u003e一、MySQL Cluster概述\u003c/p\u003e\n\u003cp\u003eMySQL Cluster 是一种技术，该技术允许在无共享的系统中部署“内存中”数据库的 Cluster 。通过无共享体系结构，系统能够使用廉价的硬件，而且对软硬件无特殊要求。此外，由于每个组件有自己的内存和磁盘，不存在单点故障。\u003c/p\u003e\n\u003cp\u003eMySQL Cluster 由一组计算机构成，每台计算机上均运行着多种进程，包括MySQL服务器，NDB Cluster 的数据节点，管理服务器，以及（可能）专门的数据访问程序。\u003c/p\u003e\n\u003cp\u003e所有的这些节点 …\u003c/p\u003e"

"\u003cp\u003eFive Minutes 公司程延辉（小名康天） 介绍开心农场架构，social game的技术挑战，支持千万级DAU的social game技术架构。这是一个对于开发者来说，非常精彩，非常有实用性指导的一次演讲，详细介绍了很多技术内幕。\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"http://www.javaeye.com/topics/download/e4f72cf2-2baa-3f4b-9578-d220b6bceea9\"\u003e\u0026raquo;猛击这里下载演讲ppt\u0026laquo;\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eFive Minutes 公司的著名social game 开心农场，目前非常受用户欢迎，包括国外的Facebook，国内的开心网都是如此，是全球最大的social game，台下热烈掌声。呵呵。开心农场这个游戏从介绍看，相当成功，最早是08年9月在xiaonei上线，而后在51等平台推广，包括Facebook。现在已经有1570万游戏用户了，其中包括50万的Facebook用户。\u003c/p\u003e\n\u003cp\u003e开心农场架构主要难点：1。如何存储大规模的用户数据千万级2。如果应对大量访问每天数亿请求量3。如果应对数据的频繁修改，每秒数万次数据修改。\u003c/p\u003e\n\u003cp\u003e解决的方式\u003c/p\u003e\n\u003cp\u003e优化：\u003c/p\u003e\n\u003cp\u003e1。负载均衡，web服务器平行扩展。\u003c/p\u003e\n\u003cp\u003e2。服务器性能优化。\u003c/p\u003e\n\u003cp\u003e3。异步处理，缓存数据接口，Linux内核参数优化，挖掘PHP的效率，用fastcgi模式运行php， …\u003c/p\u003e"

"\u003cp\u003e注：此文首发于 《程序员》杂志 2008 年 7 月刊。\u003c/p\u003e\n\u003ch4 id=\"从-shard-到-sharding\"\u003e从 Shard 到 Sharding\u003c/h4\u003e\n\u003cp\u003e“Shard” 这个词英文的意思是”碎片”，而作为数据库相关的技术用语，似乎最早见于大型多人在线角色扮演游戏(MMORPG)中。”Sharding” 姑且称之为”分片”。\u003c/p\u003e\n\u003cp\u003eSharding 不是一门新技术，而是一个相对简朴的软件理念。如您所知，MySQL 5 之后才有了数据表分区功能，那么在此之前，很多 MySQL 的潜在用户都对 MySQL 的扩展性有所顾虑，而是否具备分区功能就成了衡量一个数据库可扩展性与否的一个关键指标(当然不是唯一指标)。数据库扩展性是一个永恒的话题，MySQL 的推广者经常会被问到：如在单一数据库上处理应用数据捉襟见肘而需要进行分区化之类的处理，是如何办到的呢? 答案是：Sharding。\u003c/p\u003e\n\u003cp\u003eSharding 不是一个某个特定数据库软件附属的功能，而是在具体技术细节之上的抽象处理，是水平扩展(Scale Out，亦或横向扩展、向外扩展)的解决方案，其主要目的是为突破单节点数据库服务器的 I/O 能力限制，解决数据库扩展性问题。\u003c/p\u003e\n\u003ch4 id=\"事关数据库扩展性\"\u003e事关数据库扩展性\u003c/h4\u003e\n\u003cp\u003e说起数据库扩展性，这是 …\u003c/p\u003e"

"\u003cp\u003e现在很多中小网站(尤其是 Web 2.0 站点) 都允许用户上传图片，如果前期没有很好的规划，那么随着图片文件的增多，无论是管理还是性能上都带来很多问题。就自己的一点理解，抛砖引玉，以期能引出更具价值的信息。\u003c/p\u003e\n\u003ch4 id=\"事关图片的存储\"\u003e事关图片的存储\u003c/h4\u003e\n\u003cp\u003e把图片存储到什么介质上? 如果有足够的资金购买专用的图片服务器硬件或者 NAS 设备，那么简单的很；如果有能力自己开发单独存储图片的文件系统，那么也不用接着往下看了。\u003c/p\u003e\n\u003cp\u003e如果上述条件不具备，只想在普通的硬盘上存储，首先还是要考虑一下物理硬盘的实际处理能力。是 7200 转的还是 15000 转的，实际表现差别就很大。是选择 ReiserFS 还是 Ext3 ，怎么也要测试一下吧? 创建文件系统的时候 Inode 问题也要加以考虑，选择合适大小的 inode size ，在空间和速度上做取舍，同时防患于未然，注意单个文件系统下文件个数别达到极限。\u003c/p\u003e\n\u003ch4 id=\"独立独立的服务器\"\u003e独立，独立的服务器\u003c/h4\u003e\n\u003cp\u003e无论从管理上，还是从性能上看，只要有可能，尽量部署独立的图片服务器。这几乎成为常识了(不过在我做过面向 Web 的项目之前就这个问题也被人笑话过)。具备独立的图片服务器或者服务器集群后，在 Web 服务器 …\u003c/p\u003e"

"\u003cp\u003e到处都是什么大规模啊，高流量啊，高性能之类的网站架构设计，这类文章一是满足人们好奇心，但看过之后也就看过了，实际收益可能并不大；另外一个副作用是容易让人心潮澎湃，没学走先学跑，在很多条件仍不具备的情况下，\u003cstrong\u003e过度设计、过度扩展\u003c/strong\u003e(高德纳大爷也说过，”过早优化是万恶之源”)，所以，这里反弹琵琶，讨论一下\u003cstrong\u003e小规模\u003c/strong\u003e、\u003cstrong\u003e低性能\u003c/strong\u003e、\u003cstrong\u003e低流量\u003c/strong\u003e的网站该如何搞法。\u003c/p\u003e\n\u003cp\u003e如果站点起步阶段可能就是一台机器(或是一台虚拟机，比如 \u003ca href=\"http://jobsdigg.com/\"\u003eJobsDigg.com\u003c/a\u003e )，这个时候，去关注什么数据拆分啊，负载均衡啊，都是没影子的事情。很多大站点的经验绝不能照搬，辩证的参考才是硬道理。\u003c/p\u003e\n\u003ch4 id=\"拥抱熟知的技术\"\u003e拥抱熟知的技术\u003c/h4\u003e\n\u003cp\u003e动手构建站点的时候，不要到处去问别人该用什么，什么熟悉用什么，如果用自己不擅长的技术手段来写网站，等你写完，黄花菜可能都凉了。所以，有现成的软件组件可用，就不要自己重新发明轮子。人家说 Python 牛，但自己只懂 PHP ，那就 PHP 好了，如果熟悉 .net ?，那也不错。用烂技术不是丢人的事情，把好技术用烂才丢人。\u003c/p\u003e\n\u003ch4 id=\"架构层次清晰化\"\u003e架构层次清晰化\u003c/h4\u003e\n\u003cp\u003e起步的阶段应该清楚的确定下来架构的层次。如果都搅和在一起，业务一旦扩增开来，如果原有的一堆东西拆不开就是 …\u003c/p\u003e"

"\u003cp\u003e\u003ca href=\"http://blog.haohtml.com/wp-content/uploads/2010/06/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%9B%86%E7%BE%A4%E5%88%86%E5%B8%83%E5%BC%8F%E6%9E%B6%E6%9E%84.png\"\u003e\u003cimg src=\"http://blogx.haohtml.com/wp-content/uploads/2010/06/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%9B%86%E7%BE%A4%E5%88%86%E5%B8%83%E5%BC%8F%E6%9E%B6%E6%9E%84.png\" alt=\"服务器集群分布式架构\"\u003e\u003c/a\u003e\u003c/p\u003e"

"\u003cp\u003ecsdn作为国内最大的程序开发社区，影响了足足一代人。它是国内优秀杂志《程序员》的网站，我从前非常喜欢《程序员》这本杂志，里面的文章都非常优秀， 那时只有5元钱的我每个月花10块钱买本这样的杂志，看个三五年，都舍不得丢下。\u003c/p\u003e\n\u003cp\u003e但是今天观察了下csdn站点的架构，发现做的比较简单，看来开发者比较喜欢从程序着手，着重优化代码和数据库，对系统整体架构思考的时间不多。\u003c/p\u003e\n\u003cp\u003e我着重看了几个二级域名：www、news、bbs/community和blog，其中www、news这些静态文件都有通过squid缓存，用的 app_squid架构，然后是dns轮询做分流。\u003c/p\u003e\n\u003cp\u003e在这里顺便讨论下为什么很多大型网站都喜欢用dns轮询来作首页，而不采用lvs或其它负载均衡策略。这是因为负载均衡都是把所有的访问先集中到一个ip 上，因为只有一个ip，所以无意间这个ip的稳定性就关系重大了。ip稳定性会受很多因素影响：n个交换机、线路、机器等等，颇为复杂。而首页很有可能会 用到异地的负载均衡，这么来不用dns，方案就很难设计了。现在的常用浏览器和下载软件，都有对dns的故障处理机制，所以dns也是可以屏蔽掉一些故障 的，虽然 …\u003c/p\u003e"

"\u003cp\u003e图片服务通常数据容量较大，而且访问也频繁，鉴于此，图片服务就会有两种问题，一是存储问题，二是访问量问题。\u003c/p\u003e\n\u003cp\u003e存储问题就是硬盘容量问题，花钱买硬盘就可以了，看似简单，但着实也是最苦的问题。按目前探索来看，最好的方式是：在任何时刻遇到硬盘空间不够时，买颗硬 盘插上，最多改改配置，就能立刻利用；另外，硬盘要能充分利用，不然图片存储量大再加上备份，很恐怖，最好是每颗硬盘都用上100%的空间。\u003c/p\u003e\n\u003cp\u003e访问量也是个大问题，如果服务不允许防盗链，那么访问量会引起带宽、服务器压力等问题，有钱的话直接扔CDN，没钱或者有更多的钱，就自己做吧。根据垣古 不变的真理“越老的图，访问量也相对较少”这一点，分成两大部分，一边处理最新的图片，一边处理老旧的图片。最新的图片访问量大，但存储量较少；老图片访 问量低，但存储量大。\u003c/p\u003e\n\u003cp\u003e大概分析完了，开始制定方案。\u003c/p\u003e\n\u003cp\u003e一、拟定一个存储目录规则：\u003c/p\u003e\n\u003cp\u003e在现有的/a/b/abcde.jpg这样的hash方式下多加一个日期的目录变成：/200810/16/a/b/abcde.jpg或者/2008 /10/16/a/b/abcde.jpg。按日期制定这个目录规则后，就可以按年月来拆机器了。\u003c/p\u003e\n\u003cp\u003e二、 …\u003c/p\u003e"

"\u003cp\u003e这是一个最简洁的架构。在这个架构里，负载均衡器都可以省了，用最为廉价的dns来替代，dns的优点就是廉价，不用维护，也不愁性能和稳定，还可以跨机房多用几条带宽作分流。 另外，在图片服务中，可以选择用另一个域名做dns。优点是主站中的任何cookie等header不会带到图片服务中，省了不少上传流量和服务器可能有 的处理时间；缺点是多花了点域名的钱。目前门户都喜欢用这办法，小站用的话，用另一个域名还附带有一个特别的优点：因为部分域名服务商允许添加的二级域名 有限，所以用别的域名可以节约有限的域名资源。dns这一块也可以用泛域名，不过貌似国内的泛域名支持不是特别的稳定，有些网站的泛域名，在linux下 不能解析windows就正常，比较奇怪，我也没法解释。\u003c/p\u003e\n\u003cp\u003e在这个架构里我总共开了36个域名，但是一时没有那么多机器，所以有一些域名指向同一台机器。一般来说，一个刚上线的项目，放一台机也未尝不可，但是链接 （包括域名）一定要固定下来，不然以后调整会非常痛苦。\u003c/p\u003e\n\u003cp\u003e域名的事情还是比较简单的，只要照着填写web表单就完成了，配置四台nginx服务器当然也是非常简单的，因为不需要什么特殊的功能，所以四台机 …\u003c/p\u003e"

"\u003cp\u003e这几天常看到kangzj在博客里谈论代理， \u003ca href=\"http://www.houkai.com/2009/09/18/micolog-optimization.html\" title=\"Micolog博客主题终极优化篇\"\u003e上篇博文\u003c/a\u003e 也提到过反向代理，有同学对利用绝对路径绕过ghs起到加速作用不是很理解，那就总结一下反向代理的知 识。谈到google ghs时，说绕过ghs反向代理服务器直接使用*.appspot.com起到加速的目的，好像本文标题“利用反向代理提高网站速度”有点矛盾，其实不 然，我们域名下的资源文件绕过一个反向代理服务器，得到的appspot反向代理服务器更直接而且它有负载均衡机制。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e1. 什么是正向代理和正向代理服务器？\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e正向代理就是通常所说的代理，是某台电脑通过一台服务器来上Internet网的这种 方式，其中这台电脑就叫客户机，这台服务器就叫正向代理服务器也就是通常所说的代理服务器。在这种方式中，你是主动的，网站是被动的，网站那里不能得到你 的真实ip地址。（通俗讲法）\u003c/p\u003e\n\u003cp\u003e正向代理服务器。它只用于代理内部网络对Internet的连接请求，客户机必须指定代理服务器（一般在 IE-Internet选项-连接-局域网设置），并将本来要直接发送到Web服务器上的http请求发送到代理服务器中。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e2. 什么是反向代理和反向代理服务器?\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e反向代理就是网 …\u003c/p\u003e"

"\u003cp\u003e**反向代理（Reverse Proxy）**方式是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务 器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个服务器。\u003c/p\u003e\n\u003cp\u003e通常的代理服务器，只用于代理内部网络对Internet的连接请求，客户机必须指定代理服务 器,并将本来要直接发送到Web服务器上的http请求发送到代理服务器中。由于外部网络上的主机并不会配置并使用这个代理服务器，普通代理服务器也被设 计为在Internet上搜寻多个不确定的服务器,而不是针对Internet上多个客户机的请求访问某一个固定的服务器，因此普通的Web代理服务器不 支持外部对内部网络的访问请求。当一个代理服务器能够代理外部网络上的主机，访问内部网络时，这种代理服务的方式称为反向代理服务。此时代理服务器对外就 表现为一个Web服务器，外部网络就可以简单把它当作一个标准的Web服务器而不需要特定的配置。不同之处在于，这个服务器没有保存任何网页的真实数据， 所有的静态网页或者CGI程序，都保存在内部的Web服务器上。因此对反向代理服务器 …\u003c/p\u003e"

"\u003cp\u003eGoogle File System\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e前言\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e没什么好说的，传说中的文件系统，当代网络超大容量分布式文件系统设计的典范，Google的核心竞争力所在。Google的Search、GMail、 video、blog spaces等等都是用这个技术做的。Google目前的中国区总裁李开复就认为学计算机的学生都应该看看Google File System。\u003c/p\u003e\n\u003cp\u003e很佩服Google的开放精神，将GoogleFS的详细设计写成了Paper: The Google File System, （ \u003ca href=\"http://labs.google.com/papers/GoogleFS-sosp2003.pdf\"\u003ehttp://labs.google.com/papers/GoogleFS-sosp2003.pdf\u003c/a\u003e） 作者是Sanjay Ghemawat, Howard Gobioff, and Shun-Tak Leung。该论文长达15页，对Google FS介绍得非常详细，从设计时考虑的因素到详细的解决方案，以及测试和实际运行数据，都做了具体的说明，而不像IBM这么遮遮掩掩，从GPFS、 Storage Tank到TotalStorage SAN File System，一直都是小里小气的样子，生怕别人知道它做了啥。 …\u003c/p\u003e"

"\u003cp\u003eHadoop分布式文件系统：架构 和设计要点\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e一、前提和设计目标\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e1、硬件错误是常态，而非异常情况，HDFS可能是有成百上千的server组成，任何一个组件都有可能一直失效，因此错误检测和快速、自动的恢复是HDFS的核心架构目标。\u003c/p\u003e\n\u003cp\u003e2、跑在HDFS上的应用与一般的应用不同，它们主要是以流式读为主，做批量处理；比之关注数据访问的低延迟问题，更关键的在于数据访问的高吞吐量。\u003c/p\u003e\n\u003cp\u003e3、HDFS以支持大数据集合为目标，一个存储在上面的典型文件大小一般都在千兆至T字节，一个单一HDFS实例应该能支撑数以千万计的文件。\u003c/p\u003e\n\u003cp\u003e4、HDFS应用对文件要求的是write-one-read-many访问模型。一个文 件经过创建、写，关闭之后就不需要改变。这一假设简化了数据一致性问 题，使高吞吐量的数据访问成为可能。典型的如MapReduce框架，或者一个web crawler应用都很适合这个模型。\u003c/p\u003e\n\u003cp\u003e5、移动计算的代价比之移动数据的代价低。一个应用请求的计算，离它操作的数据越近就越高效，这在数据达到海量级别的时候更是如此。将计算移动到数据附近，比之将数据移动到应用所在显然更好，HDFS提供给应用这样的接口。\u003c/p\u003e\n\u003cp\u003e6、在 …\u003c/p\u003e"

"\u003cp\u003e网站文件的存储还是要讲究的，如果在网站成立初期，数据量不大就没有注意，随着时间的增长，网站的图片文件等数据肯定会越来越多，如何解决这些文件 存储也成了新的难题。如果把这些文件都完全采用大硬盘存储来解决，并不是一个好主意，因为数据量越大风险就越高，虽然文件能存得下，但是故障率相应会较 高，另外重建耗费时间也比较长。所以最好的办法是尽可能考虑分布式存储，把文件想办法利用网络分散到多个机器上。\u003c/p\u003e\n\u003cp\u003e从我所了解的存储结构来看，分布式存储大致可以分为几种：\u003c/p\u003e\n\u003cp\u003e1、类googlefs的分布式文件系统\u003c/p\u003e\n\u003cp\u003e因为目前googlefs没有开源，所以网上出现的分布式文件系统都是利用google的方案自行实现的。这个方案的优点是可用性比较高，基本上基 于硬盘的应用都可以处理，可用范围就比较广泛。我看了gfs、gfs2、ocfs2、FastDFS、MogileFS的一些相关介绍，大致有一些认识。\u003c/p\u003e\n\u003cp\u003e首先是文档比较少而出现的问题倒不少;然后是目前这些还没有一个能称得上是稳定版本，如果有的话，估计也就是其中一些收费的版本。因为磁盘存储乃是 致关重要，所以目前建议还是不要轻易把这些东西部署到重要的地方。假如非常想使用的话，最好 …\u003c/p\u003e"

"\u003cp\u003eYSlow给如何提高网页效率和优化网站性能提供了22条建议，其中有一条是关于域名的：Use cookie-free domains。\u003c/p\u003e\n\u003cp\u003e使用 cookie-free domains 有什么好处呢？当用户浏览器发送一个静态文件，如图片image、CSS样式表文件时会同时发送同一个域名（或二级域名）下的cookies，但是网站服 务器对发送过来的cookies完全不予理会，因此这些没用的cookies白白浪费了网站带宽，影响网站加载速度和网页性能表现。YSlow建议为了解 决这个问题，就可以通过使用 cookie-free domains 的方法来做优化，从而提高网页效率。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e使用二级域名作为cookie-free domains\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e通俗地说，所谓的 cookie-free domains 就是在浏览器发送静态内容的请求时不会发送cookies 的域名。YSlow提示可以申请注册一个二级域名专门用来储存这些静态图片、JS、静态CSS文件。\u003c/p\u003e\n\u003cp\u003e在前面泛域名解析设置影响seo和Google PR值这里提到了www开头，形如www.haohtml.com的域名实际上也是属于二级域名。如果你的网站主域名 …\u003c/p\u003e"

"\u003cp\u003e前面我用已经启用了网页压缩功能，见 \u003ca href=\"http://blog.haohtml.com/index.php/archives/3723\"\u003ehttp://blog.haohtml.com/index.php/archives/3723\u003c/a\u003e,下面我们来对网页元素有效期进行设置。\u003c/p\u003e\n\u003cp\u003e首先，启用LoadModule expires_module modules/mod_expires.so,只要在httpd.conf中把前面的#号去掉就可以了。然后在httpd.conf最后添加以下几行\u003c/p\u003e\n\u003cp\u003eExpiresActive On\u003c/p\u003e\n\u003cp\u003eExpiresDefault “access plus 10 years”\u003c/p\u003e\n\u003cp\u003e重启apache，可以用firefox浏览器中的yslow插件查看最终效果，此时”add expires haders”项应该为A。表示配置成功.\u003c/p\u003e"

"\u003cp\u003e先启用 LoadModule deflate_module modules/mod_deflate.so,只需要把前面的#去掉就可以了。\u003c/p\u003e\n\u003cp\u003e然后在httpd.conf最下面添加以下行:\u003c/p\u003e\n\u003cp\u003eDeflateBufferSize 8096\nDeflateCompressionLevel 1\nDeflateMemLevel 9\nDeflateWindowSize 15\u003c/p\u003e\n\u003cp\u003eDeflateFilterNote Input instream\nDeflateFilterNote Output outstream\nDeflateFilterNote Ratio ratio\nDeflateFilterNote ratio\nLogFormat ‘”%r” %{outstream}n/%{instream}n (%{ratio}n%%)’ deflate\nCustomLog logs/deflate.log deflate\u003c/p\u003e\n\u003cp\u003eSetOutputFilter DEFLATE\u003c/p\u003e\n\u003cp\u003eAddOutputFilterByType DEFLATE text/html text/css application/x-javascript …\u003c/p\u003e"

"\u003cp\u003e法则13 配置ETags\u003c/p\u003e\n\u003cp\u003e实体标签（ETags）是用于确定浏览器缓存中元素 与原Web 服务器中的元素是否相匹配的机制（实体是“元素”的另外一个称谓：如图片、脚本、样式 表等），它提供 了比last-modified 时间更为灵活的元素验证机制。每一个ETag，都是唯一的字符串，用于标识特定版本的元素，它需被包括在引号中。原Web 服务器在响应信息头中用Etag来标识元素，如：\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003e\u0026gt; HTTP/1.1 200 OK\n\u0026gt;\n\u0026gt; Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT\n\u0026gt;\n\u0026gt; ETag: “10c24bc-4ab-457e1c1f”\n\u0026gt;\n\u0026gt; Content-Length: 12195\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e之后，如果浏览器需验证某元 素，它在信息头中用If-None-Match传回ETag给原Web 服务器，若ETag匹配，则服务器返回304代码而不是上例中的12195字节，从而节省了下载响应时间。\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003e\u0026gt; GET /i/yahoo.gif HTTP/1.1\n\u0026gt;\n\u0026gt; Host: us.yimg.com …\u003c/code\u003e\u003c/pre\u003e"

"\u003cp\u003e\u003cstrong\u003eCache-Control头域\u003c/strong\u003e\nCache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache- Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max- stale、min-fresh、only-if-cached，响应消息中的指令包括public、private、no-cache、 no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含 义如下\u003c/p\u003e\n\u003cp\u003ePublic指示响应可被任何缓存区缓存\u003c/p\u003e\n\u003cp\u003ePrivate指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器 仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效\u003c/p\u003e\n\u003cp\u003eno-cache指示请求或响应消息不能缓存\u003c/p\u003e\n\u003cp\u003eno-store用于防止 重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。\u003c/p\u003e\n\u003cp\u003emax-age指示客户机可以接收生存期不大于指定时间（以秒为单 位）的响应\u003c/p\u003e\n\u003cp\u003emin-fresh指示客户机可以 …\u003c/p\u003e"

"\u003cp\u003e\u003cstrong\u003eCache-control\u003c/strong\u003e用于控制HTTP缓存（在HTTP/1.0中可能部分没实现，仅仅实现了 Pragma: no-cache）\u003c/p\u003e\n\u003cp\u003e数据包中的格式：\u003c/p\u003e\n\u003cp\u003eCache-Control: cache-directive\u003c/p\u003e\n\u003cp\u003ecache-directive可以为以下：\u003c/p\u003e\n\u003cp\u003erequest时用到：\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003e| \u0026#34;no-cache\u0026#34;\n| \u0026#34;no-store\u0026#34;\n| \u0026#34;max-age\u0026#34; \u0026#34;=\u0026#34; delta-seconds\n| \u0026#34;max-stale\u0026#34; [ \u0026#34;=\u0026#34; delta-seconds ]\n| \u0026#34;min-fresh\u0026#34; \u0026#34;=\u0026#34; delta-seconds\n| \u0026#34;no-transform\u0026#34;\n| \u0026#34;only-if-cached\u0026#34;\n| \u0026#34;cache-extension\u0026#34;\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003eresponse时用到：\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003e| \u0026#34;public\u0026#34;\n| \u0026#34;private\u0026#34; [ \u0026#34;=\u0026#34; \u0026lt;\u0026#34;\u0026gt; field-name …\u003c/code\u003e\u003c/pre\u003e"

"\u003cp\u003e\u003ca href=\"http://blog.haohtml.com/wp-content/uploads/2010/05/height-web.jpg\"\u003e\u003cimg src=\"https://blogstatic.haohtml.com//uploads/2023/09/height-web.jpg\" alt=\"height-web\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e本书结合Web 2.0以来Web开发领域的最新形势和特点，介绍了网站性能问题的现状、产生的原因，以及改善或解决性能问题的原则、技术技巧和最佳实践。重点关注网页的行为特征，阐释优化Ajax、CSS、JavaScript、Flash和图片处理等要素的技术，全面涵盖浏览器端性能问题的方方面面。在《高性能网站建设指南》中，作者给出了14条具体的优化原则，每一条原则都配以范例佐证，并提供了在线支持。《高性能网站建设指南》内容丰富，主要包括减少HTTP请求、Edge Computing技术、Expires Header技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复JavaScript的技巧、关闭ETags的技巧、Ajax缓存技术和最小化技术等。《高性能网站建设指南》适合Web架构师、信息架构师、 Web开发人员及产品经理阅读和参考。\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e下载地址(请使用 \u003cstrong\u003e下载工具下载\u003c/strong\u003e)：\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"ftp://210.51.180.68/bbs/tp05/computer/web/%E9%AB%98%E6%80%A7%E8%83%BD%E7%BD%91%E7%AB%99%E5%BB%BA%E8%AE%BE%E6%8C%87%E5%8D%97_CHS%5Bwww.TopSage.com%5D.zip\"\u003e高性能网站建设指南_CHS\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e也可以在网盘下载： \u003ca href=\"http://www.dbank.com/download.action?t=40\u0026amp;k=MjAxMDI4Mg==\u0026amp;pcode=LCwxNDYyNzksMTQ2Mjc5\"\u003e高性能网站建设指南.zip\u003c/a\u003e\u003c/p\u003e\u003c/blockquote\u003e"

"\u003cp\u003e有朋友问到淘宝是怎么压缩js和css的，这里分享下。\u003c/p\u003e\n\u003cp\u003e我们使用的是 \u003ca href=\"http://www.julienlecomte.net/yuicompressor/\"\u003eYUI Compressor\u003c/a\u003e:\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003eThe YUI Compressor is a JavaScript compressor which, in addition to removing comments and white-spaces, obfuscates local variables using the smallest possible variable name. This obfuscation is safe, even when using constructs such as ‘eval’ or ‘with’ (although the compression is not optimal is those cases) Compared to jsmin, the average savings is around 20%.\u003c/p\u003e\n\u003cp\u003eThe YUI Compressor is also able to safely compress CSS files. The decision on which …\u003c/p\u003e\u003c/blockquote\u003e"

"\u003cp\u003e一个内存释放的实例\u003c/p\u003e\n\u003cp\u003eCollectGarbage, 是IE的一个特有属性,用于释放内存的使用方法嘛应该是,将该变量或引用对象,设置为null或delete然后在进行释放动作\n在 做CollectGarbage前,要必需清楚的两个必备条件:\u003c/p\u003e\n\u003cp\u003e引用\u003c/p\u003e\n\u003cp\u003e– 一个对象在其生存的上下文环境之外，即会失效。\u003c/p\u003e\n\u003cp\u003e– 一个全局的对象在没有被执用(引用)的情况下，即会失效。\u003c/p\u003e\n\u003cp\u003e========= 美丽的分割线 =========\u003c/p\u003e\n\u003cp\u003e//———————————————————\n// JavaScript对象何时失效\n//———————————————————\nfunction testObject() {\nvar _obj1 = new Object();\n}\u003c/p\u003e\n\u003cp\u003efunction testObject2() {\nvar _obj2 = new Object();\nreturn _obj2;\n}\u003c/p\u003e\n\u003cp\u003e// 示例1\ntestObject();\u003c/p\u003e\n\u003cp\u003e// 示例2\ntestObject2()\u003c/p\u003e\n\u003cp\u003e// 示例3\nvar obj3 = testObject2();\nobj3 = null;\u003c/p\u003e\n\u003cp\u003e// 示例4\nvar obj4 = …\u003c/p\u003e"

"\u003cp\u003efunction cleanAndPaste(html) …{\n// Remove all SPAN tags\nhtml = html.replace(/]\u003cem\u003e\u0026gt;/gi, “” );\n// Remove Class attributes\nhtml = html.replace(/\u0026lt;(w[^\u0026gt;]*) class=([^ |\u0026gt;]*)([^\u0026gt;]\u003c/em\u003e)/gi, “\u0026lt;$1$3″) ;\n// Remove Style attributes\nhtml = html.replace(/\u0026lt;(w[^\u0026gt;]*) style=”([^”]*)”([^\u0026gt;]\u003cem\u003e)/gi, “\u0026lt;$1$3”) ;\n// Remove Lang attributes\nhtml = html.replace(/\u0026lt;(w[^\u0026gt;]*) lang=([^ |\u0026gt;]*)([^\u0026gt;]\u003c/em\u003e)/gi, “\u0026lt;$1$3”) ;\n// Remove XML elements and declarations\nhtml = html.replace(/\u0026lt;??xml[^\u0026gt;] …\u003c/p\u003e"

"\u003cp\u003e\u003ca href=\"/wp-content/uploads/2010/04/fckedior_3.1.png\"\u003e\u003cimg src=\"http://blog.haohtml.com/wp-content/uploads/2010/04/fckedior_3.1.png\" alt=\"fckedior_3.1\"\u003e\u003c/a\u003e\n1、首先去官网下载FCKeditor2.6.5 多国语言版。 \u003ca href=\"http://ckeditor.com/download\"\u003ehttp://ckeditor.com/download\u003c/a\u003e，注意： 第一个为最新3.0.1版，第二个才是FCKeditor 2.6.5\u003c/p\u003e\n\u003cp\u003e2、删除不必要的东西：\u003c/p\u003e\n\u003cp\u003e删除/FCKeditor/目录下除 fckconfig.js,fckeditor.js,fckstyles.xml,fcktemplates.xml,fckeditor.php,fckeditor_php5.php,fckeditor_php4.php\n七个文件以外的所有文件；\n删除目录/editor/_source(基本上，所有_开头的文件夹或文件都是可选的)；\n删除/editor/filemanager/connectors/下除了php目录的所有目录；\n删除/editor/lang/下的除了 en.js, zh.js, zh-cn.js三个文件的所有文件。\u003c/p\u003e\n\u003cp\u003e3、打开/FCKeditor/fckconfig.js\n修改\nvar FCKConfig.DefaultLanguage = ‘zh-cn’ ;\nvar _FileBrowserLanguage   = …\u003c/p\u003e"

"\u003cp\u003e\u003cimg src=\"http://webteam.tencent.com/wp-content/uploads/2009/6/1151_top.jpg\" alt=\" \"\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e什么是品牌的视觉传达\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e品牌，这个熟悉而又陌生的名词，有时总会让人产生误解。品牌很广，广到一个意会颇深的战略发展理念；品牌很小，小到一个清晰可见的图形符号。关于品 牌，这里就不详细介绍了。要提到的是一套服务于品牌推广的手段CI系统（Corporate Identity System），即企业形象识别系统应运而生。CI系统是由理念识别（Mind Identify 简称MI）、行为识别（Behavior Identify简称BI）和视觉识别（Visual Identify 简称 VI）三方面所构成。\u003c/p\u003e\n\u003cp\u003e而今天想讲到的是大家熟悉的品牌的视觉识别 (vI)，也就是广义品牌的一个视觉载体，即由视觉感观所接触到的为了区别于其他竞争对手的一套视觉识别系统，它的基本要素部分主要包括企业名称、企业标 志、企业标准字体、标准色彩、象征图案、企业提出的标语、企业吉祥物、专用字体。还有一部分就是应用要素，主要包括办公事物用品、企业内外部建筑环境、交 通工具、服装服饰、广告媒体、产品包装、赠送礼品、陈列展示、印刷出版物。\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"http://webteam.tencent.com/wp-content/uploads/2009/6/1151_1.jpg\" alt=\" \"\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e视觉识别的重要性\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e品牌的形象设计在品牌中是至关重要的，而视觉识别设计是最外在、最直接、最具 …\u003c/p\u003e"

"\u003cp\u003e先让我们看一个例子，了解什么是模式化窗口。\u003c/p\u003e\n\u003cp\u003e以下是QQ秀商城在非登录时提示登录的一种状态。当我在非登录状态，通过保存形象的方式买一件衣服时，弹出登录对话窗口提示登录。此时，登录对话窗 口锁定商城页，锁定IE，只有当对登录窗口进行操作后，才能够进行其他操作。譬如：最小化IE、浏览商城等。我们可以说，登录对话窗口就是一种模式化窗 口。\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"http://webteam.tencent.com/wp-content/uploads/2009/4/894_001.jpg\" alt=\"QQ秀商城提示用户登录的模式化窗口\"\u003e\u003c/p\u003e\n\u003cp\u003e模式化窗口常常给人“坏”的印象，为什么“坏”？是因为它“长”成那个样子？还是因为它通常都说些没用的话，所以用户都不看其中的内容？如果换成一 个浮动层DIV，它就变“好”了？就模式化窗口的形式和“好坏”问题，我们进行了讨论。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e为什么大家会认为它“坏”？\u003c/strong\u003e\n西贝：“以前系统弹出对话框，用户看不懂，或者不看，给用户的印象大多是一种警告。因此感觉很坏，对用户来讲，很暴力。”（呵呵，可以引用最近流行的，很 陈，很冠希了。）Eele：“当我在填一些注册信息时，需要从另外一页复制一些内容，这个时候弹出alert无法到另一页。”（这种情况我也遇到 过~~）Hiseven：“以前有一些网站，有bug，弹出‘无数’确定对话框，必须全部确定才能进行下一步的操作，于是开始点击一个又 …\u003c/p\u003e"

"\u003cp\u003e交互设计师的一项重要工作就是进行产品原型设计(Prototype Design)。而产品原型设计最基础的工作，就是画出站点的大体wireframe(框架图)并结合批注、大量的说明以及流程图等，将自己的产品原型完 整而准确的表述给产品、UI、重构/开发工程师等等，并通过沟通反复修改prototype 直至最终确认，然后进入后续的设计开发流程。\u003c/p\u003e\n\u003cp\u003e要完成以上复杂的设计和沟通工作，需要一个好的原型设计工具。这里就目前常用的和比较热门的工具来分享一下：\nWord（产品经理比较常用）\nFireworks（交互组内推广的）\nBalsamiq Mockups（近期曝光率比较高）\nAuxre RP（业界圈子内广为流传）\u003c/p\u003e\n\u003cp\u003e一、优势劣势对比\n\u003cimg src=\"http://webteam.tencent.com/wp-content/uploads/2010/3/1741_002.jpg\" alt=\"\"\u003e\u003c/p\u003e\n\u003cp\u003e二、操作界面对比\nWord：基本是通过绘图工具栏的各种线框来画wireframe。\n\u003cimg src=\"http://webteam.tencent.com/wp-content/uploads/2010/3/1741_001.jpg\" alt=\"\"\u003e\u003c/p\u003e\n\u003cp\u003eFireworks：通过公共库的WEB原型组件库画wireframe。\n\u003cimg src=\"http://webteam.tencent.com/wp-content/uploads/2010/3/1741_003.jpg\" alt=\"\"\u003e\u003c/p\u003e\n\u003cp\u003eBalsamiq Mockups：操作类似FW，通过顶部的控件库拉取到工作区域画wireframe。\n\u003cimg src=\"http://webteam.tencent.com/wp-content/uploads/2010/3/1741_004.jpg\" alt=\"\"\u003e\u003c/p\u003e\n\u003cp\u003eAuxre RP：基本操作也和FW，Mockups类似，3是工作区域，从5控件库里拉取到工作区域 …\u003c/p\u003e"

"\u003cp\u003e为满足用户的视觉追求及产品的背景图片的换肤功能，设计师难免在设计上会用到半透明的效果。因此页面重构师基于视觉及产品的需要，采用了PNG32 的半透明图片还原设计稿。\u003c/p\u003e\n\u003cp\u003e但在IE6中遇到png兼容性，及其延伸的种种问题。如：\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003epng32的图片上在IE6有兼容性问题，原本的透明显示的背景将会失效。\u003c/li\u003e\n\u003cli\u003e在问题1的基础上，针对IE6采用了CSS滤镜让其透明，但图片不能应用背景坐标定位的方式只能单张使用，这做法不利于带宽流量和请求链接数之余 也不利样式的管理\u003c/li\u003e\n\u003cli\u003e在问题2的基础上，意味着要把png图片单张切割，并单张应用CSS滤镜\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003e\u003cstrong\u003e针对以上问题重构师的解决办法如下：\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e把背景图片如常的合并，利用相似于背景坐标的方式调用局部图片位置。最大区别在于分别定义了两个无意义的标签。\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e一个标签作为模拟背景的\u003cstrong\u003e载体标签\u003c/strong\u003e：定义一个作为载体的标签，针对IE6以滤镜的形式导入图片，宽高与背景一 致。\u003c/li\u003e\n\u003cli\u003e另一个标签作为截取背景局部位置的\u003cstrong\u003e截取标签\u003c/strong\u003e：定义此标签宽高与预想调用背景局部位置大小一致，并隐藏其溢出的 部份。\u003c/li\u003e\n\u003cli\u003e最后计算出预想调用背景局部位置的坐标，定义在载体标签中。\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eHTML结构如下：\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"http://isd.tencent.com/?p=462#\"\u003eview plain\u003c/a\u003e \u003ca href=\"http://isd.tencent.com/?p=462#\"\u003ecopy …\u003c/a\u003e\u003c/p\u003e"

"\u003cp\u003e很久之前就知道 \u003ca href=\"http://www.ikea.com/cn/zh\"\u003e宜家\u003c/a\u003e ，以前在广州的时候也去过一次，给我的印象就是：大、贵、巧。地方很大，东西很贵，设计很巧。现在住的地方离宜家不远，这个月找时间去逛了下，地方还是那 么大，东西还是那么贵，设计还是那么的巧。虽然没有买什么东西，不过也还是有所收获的，通过宜家的家具设计方法，我们可以聊聊模块化。\u003c/p\u003e\n\u003cp\u003e去过宜家的同学应该都有注意到，宜家的家具基本都是组合的，可拆装。模块化的特点也是这样，可以组合，相对独立，在需要的时候可以很方便的加上。那 怎么写可以基本实现这种方式呢？给个简单的例子：\u003c/p\u003e\n\u003cp\u003e`\u003c/p\u003e\n\u003ch3 id=\"模块化demo\"\u003e模块化Demo\u003c/h3\u003e\n\u003cp\u003e模块化结构的例子。\u003c/p\u003e\n\u003cp\u003e`\u003c/p\u003e\n\u003cp\u003e对应的CSS可以这么写：\u003c/p\u003e\n\u003cp\u003e`.mode-a{\u0026hellip;}\u003c/p\u003e\n\u003cp\u003e.mode-a h3{\u0026hellip;}\u003c/p\u003e\n\u003cp\u003e.mode-a p{\u0026hellip;}\u003c/p\u003e\n\u003cp\u003e`\u003c/p\u003e\n\u003cp\u003e其中“mode-a”就是这个模块的名称，表示这是名为“a”的模块，现在这个模块可以被放到你所需要的地方。既然是做模块，就不会只有一个，我们 再加一个“mode-b”：\u003c/p\u003e\n\u003cp\u003e`\u003c/p\u003e\n\u003ch3 id=\"模块化demo-1\"\u003e模块化Demo\u003c/h3\u003e\n\u003ch4 id=\"模块化的特点\"\u003e模块化的特点：\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e相对独立\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e可移植性高\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e`\u003c/p\u003e\n\u003cp\u003e对应的CSS可以这么写：\u003c/p\u003e\n\u003cp\u003e`.mode-b{\u0026hellip;}\u003c/p\u003e\n\u003cp\u003e.mode-b …\u003c/p\u003e"

"\u003cp\u003e随着公司业务的增加，需求变的越来越多，团队也因此在不断的扩大，我们经常会遇到几个人协同工作来完成同一件作品或者维护修改别人作品的时候，那么 是什么最让你最感到困扰呢？我们在实现一个表现复杂的页面的同时，CSS文件就会比较繁琐，众多的选择符、属性让人眼花缭乱，那么如何更快的定位、如何更 高效的编写样式呢？CSS的书写被很多人所忽略。关于书写风格，翻看了一些知名网站的作品，发现横向连排几乎成为各大产品项目的主流，然而，每个人对于 CSS的写法各异，这就导致我们工作效率的降低。为了更好的协同工作，保持团队内CSS书写的一致性，几经波折后达成共识，具体书写方法如下：CSS属性 横排书写，选择符纵排书写，每个”,”(逗号)后必须换行;\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e重构组代码书写规范示例：（其中数字只用做示范，实际应用中不建议用数字命名。）\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e.class_name_1 .class_name_1_1,\n.class_name_2 .class_name_2_1 .class_name_2_1_1,\n.class_name_3{style1:value; style2:value; styel3:value; }\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e有人说，好代 …\u003c/p\u003e"

"\u003cp\u003e做为一个专职的页面重构者，我们从事的工作简单的说就是“将设计稿转换成WEB页面”，这一过程可以很简单到直接把PSD从PS里导出成网页；也可复杂到需要考虑页面中每个标签的使用，考虑“页面性能”。以“前端工程 师”为目标的同学可能会不愿承认将页面重构这块分出来，但随着工种的细分，加上页面重构本身的专业性，独立为一个职业也不是不可能，至少我现在从事的就是 一个专职的职位。如果你觉得一个前端工程师必须去画设计稿，可以不理会下面的内容。\u003c/p\u003e\n\u003cp\u003e单纯的页面重构，所涉及到的工作内容一般是“分析设计稿=\u0026gt;切图=\u0026gt;写HTML和CSS”，虽然看 起来很少，但要做好这份工作，绝非所想的那么容易。原因很简单：工作内容单一，在时间和工作量上必会很苛刻，往往跟设计师的工作时间是3:1，即设计师给 三天的时间，制作只给一天的时间完成；在这种工作强度下，很多人都是靠着对这份工作的喜爱在维持着，一旦工作热情消失，很容易就会变得枯燥，保持热情也成 了重构工作者（也许是所有参加工作的人）应该具备的能力。\u003c/p\u003e\n\u003cp\u003e跟“前端工程师”所要求的有所不同，“页面重构”虽然也是“前端工程师”的一个范畴，在职业化中，对专职的页面重构者，要 …\u003c/p\u003e"

"\u003cp\u003e“这是什么啊，用不明白，体验太差了！”、“在哪里登录？找不到啊！”、“谁知道这是个按钮可以点啊，像个图片！”在产品体验中，我们经常会听到这 样那样有关产品体验的声音。而主动并客观地去发现这些问题（可用性问题）的方法之一，就是我们今天要介绍的用户研究方法之一——用户测试法。\u003c/p\u003e\n\u003cp\u003e什么是用户测试？通俗地讲，用户测试就是通过给用户制定任务，在用户执行任务的过程中，发现产品设计的不足，并为产品优化提供依据的一种方法。\u003c/p\u003e\n\u003cp\u003e通常情况下，根据目的不同，用户测试可以是定性地发现问题、也可以是定量地比较两个竞品的优劣。根据测试产品特点不同，可以采用边做边说的用户测 试、也可以采用回顾式用户测试、甚至可以采用协同式用户测试等。用户测试可以用于产品设计阶段测试产品低保真原型、也可以用于产品测试阶段在发布前发现重 大的可以优化的可用性问题、还可以用于产品发布以后，为下一个版本的优化提供依据。\u003c/p\u003e\n\u003cp\u003e一般情况下，根据ISD产品特点、时间等条件的限制，在产品测试阶段或者产品发布以后以发现可用性问题为主的边做边说用户测试较为常见。下面将以迷 你屋用户测试为例，来说明如何进行一场简单的以发现问题为主的边说边做法用户测试。\u003c/p\u003e\n\u003cp\u003e迷你屋 …\u003c/p\u003e"

"\u003cp\u003e\u003cimg src=\"http://webteam.tencent.com/wp-content/uploads/2008/12/156_001.jpg\" alt=\"图片说明\"\u003e\u003c/p\u003e\n\u003cp\u003e许多网站缺乏针对性和友好的导航设计，难以找到连接到相关网页的路径，也没有提供有助于让访客/用户找到所需信息的帮助，用户体验非常糟糕。这篇文 章，我们尝试就网站导航交互做一些探讨。\u003c/p\u003e\n\u003cp\u003e首先对于WEB交互设计师来说，解决上面遇到的问题，使之简单的方法是设计一套完善的网页导航系统。\u003c/p\u003e\n\u003ch3 id=\"优化网站导航设计的目的\"\u003e优化网站导航设计的目的\u003c/h3\u003e\n\u003cp\u003e一个网站导航设计对提供丰富友好的用户体验有至关重要的地位，简单直观的导航不仅能提高网站易用性，而且在方便用户找到所要的信息后，可有助提高用 户转化率。\n如果把主页比作网站门面，那么导航就是通道，这些通道走向网站的每个角落，导航的设计是否合理对于一个网站是具有非常大意义的。\u003c/p\u003e\n\u003cp\u003e1） 决定用户在网站中穿梭浏览的体验，这一点是最基本的。\n2） 网站导航设计合理，可以将网站的内容和服务最大面积的展现在用户面前。\n3） 合理的导航设计可以增加用户黏性，提高网站的浏览深度，从而提高网站PV值。\n4） 促进用户消费，提高网站盈利。引导用户消费，将用户真正需要的产品和服务展示在他面前，甚至用户想不到的服务你也呈现。\n5） 提高网站广告价值，增加网站广告收益。\n……\u003c/p\u003e\n\u003ch3 id=\"网站导航的常见结构\"\u003e网站导航的常见结构\u003c/h3\u003e\n\u003cp\u003e雅虎的网页设计一直是国 …\u003c/p\u003e"

"\u003cp\u003e清除浮动一个凡是做页面的人都会遇到的一个东西，但是是否大家都能够清楚的知道，全方位的了解呢？于是一闲下来了马上写了这样的一篇文章，不能讲面 面俱到，然而基本能将我所知道的倾囊相授了。\u003c/p\u003e\n\u003ch4 id=\"我们粗略的一起来看看清除浮动的办法一共有多少个ie里面用zoom1就不写了下一个专题再写对应的-demo\"\u003e我们粗略的一起来看看清除浮动的办法一共有多少个(IE里面用zoom:1就不写了，下一个专题再写)。对应的 \u003ca href=\"http://webteam.tencent.com/wp-content/uploads/2009/6/20090413_clearfloat.html\"\u003eDEMO\u003c/a\u003e\u003c/h4\u003e\n\u003col\u003e\n\u003cli\u003e采用伪类:after进行后续空制的高度位零的伪类层清除\u003c/li\u003e\n\u003cli\u003e采用CSS overflow:auto的方式撑高\u003c/li\u003e\n\u003cli\u003e采用CSS overflow:hidden的方式产生怪异适应\u003c/li\u003e\n\u003cli\u003e采用display:table将对象变成table形式\u003c/li\u003e\n\u003cli\u003e采用div标签，以及css的clear属性\u003c/li\u003e\n\u003cli\u003e采用br标签，以及css的clear属性\u003c/li\u003e\n\u003cli\u003e采用br标签，以及其自身HTML的clear属性\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch4 id=\"粗略的看他们都能将问题解决然而他们另外一方面又有着各自的利弊一一对应\"\u003e粗略的看，他们都能将问题解决；然而他们另外一方面又有着各自的利弊。（一一对应）\u003c/h4\u003e\n\u003col\u003e\n\u003cli\u003e\u003cstrong\u003e优点\u003c/strong\u003e结构语义化完全正确，不会产生其余的怪异问题。\n\u003cstrong\u003e缺点\u003c/strong\u003e复用方式不当容易造成代码量急剧增大。\n\u003cstrong\u003e建议\u003c/strong\u003e最外层轻浮动时使用，或清晰模块化复用方式的人使用。\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e优点\u003c/strong\u003e结构语义化完全正确，代码量极少。\n\u003cstrong\u003e缺点\u003c/strong\u003e多个嵌套后，点击最外层的轻浮动框会遭成最外层至最内层内容全 …\u003c/li\u003e\u003c/ol\u003e"

"\u003cp\u003e最近被“模块化”缠身，又是文章又是PPT的，被逼着想了很多相关的东西。整理下我这段时间对于“模块化”的思考，大多都是我自己从事页面重构这份 工作的经验和理解，在一定程度上存在局限性，也希望自己能温故而知新。\u003c/p\u003e\n\u003cp\u003e“模块化”只是我们对于过去一直使用的技术、方法的一个新潮的称谓，就像“Ajax”。不过做为页面重构发展的一种趋势，越来越被大家重视，不自觉 也满口的“模块化”，只是你真的理解什么是“模块化”吗？\u003c/p\u003e\n\u003ch3 id=\"什么是模块化\"\u003e什么是模块化？\u003c/h3\u003e\n\u003cp\u003e对“模块化”的解释，在 \u003ca href=\"http://www.cnki.net/gycnki/gycnki.htm\"\u003eCNKI\u003c/a\u003e 中就有28种。可见“模块化”思维使用的广泛。最接近页面重构中的“模块化”，现有的解释应该就是软件开发中的解释了。\u003c/p\u003e\n\u003cp\u003e先看一下百度词条是怎么解释“ \u003ca href=\"http://baike.baidu.com/view/182267.htm\"\u003e模块化\u003c/a\u003e ”的：\u003c/p\u003e\n\u003cp\u003e模 块化是指解决一个复杂问题时自顶向下逐层把软件系统划分成若干模块的过程。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体， 完成整个系统所要求的功能。模块具有以下几种基本属性：接口、功能、逻辑、状态，功能、状态与接口反映模块的外部特性，逻辑反映它的内部特性。在软件的体 系结构中，模块是可组合、分解和更换的单元。\u003c/p\u003e\n\u003cp\u003e相关的书籍也蛮多的，有兴趣的同学可以搜一下。需 …\u003c/p\u003e"

"\u003cp\u003e\u003cstrong\u003e“\u003c/strong\u003e CSS 3 不是新事物，更不是只是围绕border-radius属性实现的圆角。它正耐心的坐在那里，已经准备好了首次登场，呷着咖啡，等着浏览器来铺上红地毯。 你看，浏览器需要跟上了…… \u003cstrong\u003e”\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e–谨以此文纪录ISD WEBTEAM 09年Q2力作：CSS 3.0 中文参考手册\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e背景\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e苏昱的《样式表中文手册》为代表的 CSS2.0参考资料伴随了国内众多web设计师们走过了近10年的时光，这种影响是深远的，但随着CSS技术的不断发展，设计师们多受传统资料的影响， 不能超脱现有的篱笆，给自己背上了沉重的包袱。你是否已注意到CSS 3已经蓄势待发？你是否渴望开始使用它们却又不知从何下手呢？正当CSS 3新特性备受期待的时候，我们的CSS3.0 中文参考手册就应运而生了……\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e什么是CSS 3？\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eCSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。\u003c/p\u003e\n\u003cp\u003eCSS3.0 则表示下一版本的CSS，3.0是版本号。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eCSS 3\u003c/strong\u003e \u003cstrong\u003e给我们带来了什么惊喜？\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eCSS3.0对于我们Web设计人员来说不只 是新奇的技 …\u003c/p\u003e"

"\u003ch4 id=\"翻译自-russ-weakley-的-efficient-maintainable-css\"\u003e翻译自 \u003ca href=\"http://www.maxdesign.com.au/\"\u003eRuss Weakley\u003c/a\u003e 的 \u003ca href=\"http://www.slideshare.net/maxdesign/efficient-maintainable-css-presentation\"\u003eEfficient, maintainable CSS\u003c/a\u003e\u003c/h4\u003e\n\u003cp\u003e翻译自Russ大师的一篇关于如何书写高效、可维护、组件化的CSS的演示文档。Enjoy~\u003c/p\u003e"

"\u003cp\u003e翻译自 \u003ca href=\"http://www.maxdesign.com.au/\"\u003eRuss Weakley\u003c/a\u003e 的\u003ca href=\"http://www.slideshare.net/maxdesign/line-height\"\u003eLine Height\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e一个简单的, step-by-step 关于 CSS 行高的演示文档, 涵盖行间距, 如何应用各种类型的行高值, 当然还有 inline box 模型介绍, 希望能满足您\n（但实战应用在中文字体或中英文字体混合，以及IE678，XP win7里，行高规则又有所不同，泪流满面）\u003c/p\u003e"

"\u003cp\u003e这里Web组件指Web服务器提供的所有基于URL访问的资源，比如动态内容，图片，Javascript脚本，CSS样式表\u003c/p\u003e\n\u003cp\u003e我们可以从以下几个方面来看这些Web组件的差异\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e文件大小\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e文件数量\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e内容更新频率\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e预计并发用户数\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e是否需要脚本解释器\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e是否涉及大量CPU计算\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e是否访问数据库\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e访问数据库的操作主要是读还是写\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e是否包含远程调用（RPC）\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e值得一提的是，即便是同一Web组件，显然也存在特点的差异，比如负责呈现内容的动态网页和负责用户注册的动态网页，可以\u003c/p\u003e\n\u003cp\u003e视为不用的用户组件，再比如由用户上传的大尺寸照片和站点网页的小尺寸修饰图片也存在以上方面的差异，也可以将它们区分对待。\u003c/p\u003e\n\u003cp\u003eweb组件分离的目的是便于采用针对性的方法，使得各种Web组件能够充分利用服务器资源。如何实现web组件分离呢？\u003c/p\u003e\n\u003cp\u003e最常见的做法是拥有不同的域名：\u003c/p\u003e\n\u003cp\u003e如：img.run21.cn\u003c/p\u003e\n\u003cp\u003e存放网页中的图片，指向服务器A\u003c/p\u003e\n\u003cp\u003eupload.run21.cn\u003c/p\u003e\n\u003cp\u003e存放用户上传的照片，指向服务器B\u003c/p\u003e\n\u003cp\u003estatic.run21.cn\u003c/p\u003e\n\u003cp\u003e存放静态化的网页，指向服务器C\u003c/p\u003e\n\u003cp\u003ejs.run21.cn\u003c/p\u003e\n\u003cp\u003e存放javascript …\u003c/p\u003e"

"\u003cp\u003e人们评估一个web站点的性能如何，通常先置身于用户的角度，访问该站点的一系列页面，体验等待时间\u003c/p\u003e\n\u003cp\u003e在等待的时间里，大概经历了以下几部分的时间\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e数据在网络上的传输时间\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e站点服务器处理请求并生成回应数据的时间\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e浏览器本地计算和渲染的时间\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e作为web开发人员, 大部份情况下只要从”站点服务器处理请求并生成回应数据的时间”这点去考虑和设计, 尽量的减少在这一过程的时间,针对提高站点性能上的优化大概总结有如下方案.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e1. 增加宽带\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e2. 减少网页的http请求\u003c/strong\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e在不影响美观和功能的情况下,尽量减少图片和脚本\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e将多个图片合并为一个文件,利用CSS背景图片和偏移技术呈现在网页中,避免多个图片的下载\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e合并Javascript或者CSS\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e使用浏览器端的Cache策略,减少重复下载\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003e3.加快服务器脚本运算速度\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e脚本语言编写的程序文件需要通过相应的脚本解释器进行解释后生成中间代码，脚本加速就是在这一过程中减少生成中间代码的时间。对于一些拥有较强商业 支持的脚本语言 ，比如Java和ASP.NET，均有内置的优化方案，如解释器对某个脚本程序第一次解释的时候，将中间代码缓存起 …\u003c/p\u003e"

"\u003cp\u003eYSlow分析网页,并提出如何提高其性能的基础上一套规则,高性能的网页。我搜索一下”Yslow使用说明“，发现都是旧版本Yslow的使用介 绍。于是翻译了一下yahoo官方关于新版Yslow的的使用帮助，希望给初次使用Yslow的朋友一些帮助。\u003c/p\u003e\n\u003cp\u003e注：英文不是很好，对着翻译软件翻译的，有不对的地方，大家指正。\u003c/p\u003e\n\u003ch4 id=\"安装-yslow\"\u003e安装 YSlow\u003c/h4\u003e\n\u003cp\u003e先安装 Firebug \u003ca href=\"https://addons.mozilla.org/en-US/firefox/addon/1843\"\u003ehttps://addons.mozilla.org/en-US/firefox/addon/1843\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eFirebug 帮助文档 \u003ca href=\"http://www.getfirebug.com/docs.html\"\u003ehttp://www.getfirebug.com/docs.html\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003e再下载安装 \u003ca href=\"http://developer.yahoo.com/yslow\"\u003ehttp://developer.yahoo.com/yslow\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e使用Yslow\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eYslow是运行在Firebug窗口下，所有要运行Yslow，必须安装Firebug。\u003c/p\u003e\n\u003cp\u003e有两种方法启动Yslow\u003c/p\u003e\n\u003cp\u003e1、打开Firebug窗口，选择Yslow选项。\u003c/p\u003e\n\u003cp\u003e2、直接点击浏览器右下角的Yslow启动按钮。\u003c/p\u003e\n\u003cp\u003e你第一次打开Yslow时，以下图像作为Firebug的一部分被显示在的浏览器窗口。\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"/wp-content/uploads/2010/04/yslow_1.png\" title=\"/wp-content/uploads/2010/04/yslow_1.png\"\u003e\u003cimg src=\"/wp-content/uploads/2010/04/yslow_1.png\" alt=\"\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e点击 \u003cstrong\u003eRun Test\u003c/strong\u003e 运行Yslow， …\u003c/p\u003e"

"\u003cp\u003e\u003ca href=\"http://blog.prosight.me/index.php/2009/08/313\"\u003e使用ETag和Expires调优web 服务器性能\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e正确使用Etag和Expires标识处理，可以使得页面更加有效被Cache。\u003c/p\u003e\n\u003cp\u003e在客户端通过浏览器发出第一次请求某一个URL时，根据 HTTP 协议的规定，浏览器会向服务器传送报头(Http Request Header)，服务器端响应同时记录相关属性标记(Http Reponse Header)，服务器端的返回状态会是200，格式类似如下：\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eHTTP/1.1 200 OK\u003c/p\u003e\n\u003cp\u003eDate: Tue, 03 Mar 2009 04:58:40 GMT\u003c/p\u003e\n\u003cp\u003eContent-Type: image/jpeg\u003c/p\u003e\n\u003cp\u003eContent-Length: 83185\u003c/p\u003e\n\u003cp\u003eLast-Modified: Tue, 24 Feb 2009 08:01:04 GMT\u003c/p\u003e\n\u003cp\u003eCache-Control: max-age=2592000\u003c/p\u003e\n\u003cp\u003eExpires: Thu, 02 Apr 2009 05:14:08 GMT\u003c/p\u003e\n\u003cp\u003eEtag: “5d8c72a5edda8d6a:3239″\u003c/p\u003e\n\u003cp\u003e客户端第二次请求此URL时，根据 HTTP 协议的规定，浏览器会向服务器传送报头(Http Request …\u003c/p\u003e"

"\u003cp\u003e\u003cstrong\u003e脚本调试\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e第一步：设置中断（鼠标左键点击）\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://blogstatic.haohtml.com//uploads/2023/09/01.jpg\" alt=\"\"\u003e\u003c/p\u003e\n\u003cp\u003e第二步：输入中断条件（可选功能，鼠标右键点击红点）\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://blogstatic.haohtml.com//uploads/2023/09/02.jpg\" alt=\"\"\u003e\u003c/p\u003e\n\u003cp\u003e第三步：触发中断（当符合条件是，中断被触发）\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://blogstatic.haohtml.com//uploads/2023/09/03.jpg\" alt=\"\"\u003e\u003c/p\u003e\n\u003cp\u003e出现中断后，我们可以看到在右边出现了这样一个选项卡【监控、堆栈、断点】\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://blogstatic.haohtml.com//uploads/2023/09/04.jpg\" alt=\"\"\u003e\u003c/p\u003e\n\u003chr\u003e\n\u003cp\u003e\u003cstrong\u003e第一个选项卡：监控\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e如过需要查看某个对象的值，可以点击新建监控表达式，例如输入对象的名称：subMenu\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://blogstatic.haohtml.com//uploads/2023/09/05.jpg\" alt=\"\"\u003e\u003c/p\u003e\n\u003cp\u003e我们就可以看到subMenu的类型是DIV，点击展开内容，是subMenu这个对象的各个属性和方法\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://blogstatic.haohtml.com//uploads/2023/09/06.jpg\" alt=\"\"\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e第二个选项卡：堆栈\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e内容显示的是当前中断点程序的调用顺序，在这个例子中是先触发了 onmouseover,然后调用了shownav\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://blogstatic.haohtml.com//uploads/2023/09/07.jpg\" alt=\"\"\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e第三个选项卡：断点\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e可以设置多个断点，或者删除断点\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://blogstatic.haohtml.com//uploads/2023/09/08.jpg\" alt=\"\"\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eCSS调试\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e上面出现了3个index.jsp，说明在这个index.jsp中出现了3处css碎片。\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://blogstatic.haohtml.com//uploads/2023/09/09-20230904194935166.jpg\" alt=\"\"\u003e\u003c/p\u003e\n\u003cp\u003e点击css的值，可以进行修改，即时反映到页面上。点击禁止符号，则可以屏蔽该行CSS。\u003c/p\u003e\n\u003cp\u003e双击空白处，新增CSS规则。\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"http://www.blueidea.com/articleimg/2009/12/7284/10.jpg\" alt=\"\"\u003e\u003c/p\u003e\n\u003cp\u003e原文： \u003ca href=\"http://home.blueidea.com/space.php?uid=498022\u0026amp;do=blog\u0026amp;id=16837\"\u003ehttp://home.blueidea.com/space.php?uid=498022\u0026amp;do=blog\u0026amp;id=16837\u003c/a\u003e\u003c/p\u003e"

"\u003cp\u003e来源： \u003ca href=\"http://hi.baidu.com/hanling8108/blog/item/4579902b0a505d315343c125.html\"\u003ehttp://hi.baidu.com/hanling8108/blog/item/4579902b0a505d315343c125.html\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e一、概述\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eWeb网站往往具有复杂与高度动态的特点。为了让Web应用在短时间之内开始运作，开发周期应该尽量地短。许多时候，开发者直接进入编写代码这 一阶段，却不去仔细考虑自己想要构造的是什么样的网站以及准备如何构造：服务器端代码往往是毫无准备的即兴式编写，数据库表也是随需随加，整个应用的体系 有时候呈现一种无规划状态。然而，只要我们运用一些建模技术和软件工程技术，就能够让开发过程更加流畅，确保Web应用将来更容易维护。\u003c/p\u003e\n\u003cp\u003eUML（Unified Modeling Language，统一建模语言）是一种通用的可视化建模语言，用于对软件进行描述、可视化处理、构造和建立软件系统的文档。UML适用于各种软件开发方 法、软件生命周期的各个阶段、各种应用领域以及各种开发工具。UML能够描述系统的静态结构和动态行为：静态结构定义了系统中重要对象的属性和操作以及这 些对象之间的相互关系；动态行为定义了对象的时间特性和对象为完成目标任务而相互进行通信的机 …\u003c/p\u003e"

"\u003cp\u003e\u003cstrong\u003e12款 \u003ca href=\"http://paranimage.com/category/dede/javascript/\"\u003eJavaScript\u003c/a\u003e 表格控件\u003c/strong\u003e。 表格控件(DataGrid )允许最终用户阅读和写入到绝大多数数据库的应用程序。DataGrid 控件可以在设计时快速进行配置，只需少量代码或无需代码。当在设计时设置了DataGrid 控件的 DataSource 属性后，就会用数据源的记录集来自动填充该控件，以及自动设置该控件的列标头。然后您就可以编辑该网格的列；删除、重新安排、添加列标头、或者调整任意一 列的宽度。\u003c/p\u003e\n\u003ch4 id=\"1-flexigrid\"\u003e1. \u003ca href=\"http://www.flexigrid.info/\"\u003eFlexigrid\u003c/a\u003e\u003c/h4\u003e\n\u003cp\u003e\u003ca href=\"/wp-content/uploads/2009/11/flexigrid.jpg\"\u003e\u003cimg src=\"https://blogstatic.haohtml.com//uploads/2023/09/flexigrid.jpg\" alt=\"flexigrid\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eFlexigrid是一个类似于Ext Gird，但基于jQuery开发的Grid。它具有的功能包括：可以调整列宽，合并列标题，分页，排序，显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。\u003c/p\u003e\n\u003ch4 id=\"2-yahoo-ui-library-datatable--演示地址\"\u003e2. \u003ca href=\"http://developer.yahoo.com/yui/datatable/\"\u003eYahoo! UI Library: DataTable\u003c/a\u003e ( \u003ca href=\"http://developer.yahoo.com/yui/examples/datatable/index.html\"\u003e演示地址\u003c/a\u003e)\u003c/h4\u003e\n\u003cp\u003e\u003ca href=\"/wp-content/uploads/2009/11/yahoo-ui-libray-datetable.jpg\"\u003e\u003cimg src=\"https://blogstatic.haohtml.com//uploads/2023/09/yahoo-ui-libray-datetable.jpg\" alt=\"yahoo-ui-libray-datetable\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e该DataTable控件提供的功能有：排序、列宽调整、分页、inline editing、row selection等。\u003c/p\u003e\n\u003ch4 id=\"3-jqgrid\"\u003e3. \u003ca href=\"http://www.trirand.com/blog/\"\u003ejqGrid\u003c/a\u003e\u003c/h4\u003e\n\u003cp\u003e\u003ca href=\"/wp-content/uploads/2009/11/jqgrid.jpg\"\u003e\u003cimg src=\"https://blogstatic.haohtml.com//uploads/2023/09/jqgrid.jpg\" alt=\"jqgrid\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003ejqGrid是一个Ajaxed jQuery Grid插件。提供分页功能，添加、编辑、删除和搜索表 …\u003c/p\u003e"

"\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003eaaaaaaaaaaaaaaaaaaaaa\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003ebbbbbbbbbbbbbbbbbb\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eaaaaaaaaaaaaaaaaaaaaa\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003ebbbbbbbbbbbbbbbbbb\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e"

"\u003cp\u003ejQuery 是一个优秀的 Javascript 框架，对 js 进行了优秀的包装，提供了许多方便的功能。jQuery 对 ajax 的包装也堪称优秀。\u003c/p\u003e\n\u003cp\u003ejQuery 可以以 json 文件传输协议来传输数据(类似 xml，而且大有取代 xml 的趋势)，而网站后台代码必须与之配合使用。PHP 是用 json_encode 函数来对返回的数组数据进行编码的，但这个函数只有 PHP5.2版本以上才支持。\u003c/p\u003e\n\u003cp\u003e从网上找到一个 json 的操作类，本人在 PHP4.4.7 版本下测试通过。本人还建了个函数 function my_json_encode($phparr)，使代码兼容 PHP5.2 以上版本。\u003c/p\u003e\n\u003cp\u003e示例代码(包括 json 的类包软件)可以在以下网址下载：\u003c/p\u003e\n\u003cp\u003e以下是全部代码：\u003c/p\u003e\n\u003cp\u003ejQuery Ajax 实例演示\u003c/p\u003e\n\u003cp\u003e输入姓名:\u003c/p\u003e\n\u003cp\u003e输入年龄:\u003c/p\u003e\n\u003cp\u003e输入性别:\u003c/p\u003e\n\u003cp\u003e输入工作:\u003c/p\u003e\n\u003cp\u003e提交POST提交GET提交\u003c/p\u003e\n\u003cp\u003ePHP 文件 ajax_json.php：\u003c/p\u003e\n\u003cp\u003eencode($phparr);\n}\n}\n?\u0026gt;\u003c/p\u003e"

"\u003cpre tabindex=\"0\"\u003e\u003ccode\u003e\u0026lt;script type=\u0026#34;text/javascript\u0026#34;\u0026gt;\n$(document).ready(function(){\n\t$(\u0026#34;.update\u0026#34;).dblclick(function(){\n\t\tid = $(this).attr(\u0026#39;id\u0026#39;);\n\t\ttext = $(this).text();\n\t\t\tif(text){\n\t\t\t$(this).html(\u0026#34;\u0026lt;input type=\u0026#39;text\u0026#39; size=12 name=\u0026#34;+id+\u0026#34; value=\u0026#34;+text+\u0026#34;\u0026gt;\u0026#34;);\n\t\t\t$(\u0026#34;.update \u0026gt; input\u0026#34;).focus().blur(function(){\n\t\t\t\t$.ajax({\n\t\t\t\t type: \u0026#34;POST\u0026#34;,\n\t\t\t\t url: \u0026#34;/data/dbedit\u0026#34;,\n\t\t\t\t data: …\u003c/code\u003e\u003c/pre\u003e"

"\u003cp\u003e安装了FireFox3.5之后，发现以前项目网页中有透明属性的一些DIV都不透明了。于是猜想，FireFox3.5难道不支持它自家的CSS透明属性-moz-opacity了？上网一查，果真如此。\n在 \u003ca href=\"https://developer.mozilla.org/En/CSS:-moz-opacity\"\u003ehttps://developer.mozilla.org/En/CSS:-moz-opacity\u003c/a\u003e 里说得很清楚了：\nNote:  Firefox 3.5 and later do not support -moz-opacity.  By now, you should be using simply opacity.\n现在都要改用opacity这个属性。\u003c/p\u003e\n\u003cp\u003e于是要设置一下透明度为60%的DIV就应该这样写了：\ndiv.transp { /* make the div translucent */\nopacity: 0.6;                /* Firefox, Safari(WebKit), Opera)\nfilter: “alpha(opacity=60)”; /* IE 8 */\nfilter: alpha(opacity=60);   /* IE 4-7 */ …\u003c/p\u003e"

"\u003cp\u003e我想大家对这个函数的前两个参数已经很了解了吧，主要是第三个参数不很好理解。我查了一些资料，弄明白了这个问题，所以记录下来了。下面的内容，基本上是参考别人的。\u003c/p\u003e\n\u003cp\u003e第三个参数叫做useCapture，是一个boolean值，就是true or false，如果是rue的话就是浏览器会使用Capture方式，false的话是Bubbling，只有在特定状况下才会有影响，通常建议是false，而会有影响的情形是目标元素(target element)有父元素(ancestor element)，而且也有同样的事件对应函数，我想，看图比较清楚。\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"/wp-content/uploads/2009/05/f781ff0f5563e6386159f31f.jpg\"\u003e\u003cimg src=\"http://blog.haohtml.com/wp-content/uploads/2009/05/f781ff0f5563e6386159f31f.jpg\" alt=\"\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e像這張圖所顯示的，我的範例有兩層div元素，而且都設定有click事件，一般來說，如果我在內層藍色的元素上click不只會觸發藍色元素的click事件，還會同時觸發紅色元素的click事件，而useCapture這個參數就是在控制這時候兩個click事件的先後順序。如果是false，那就會使用bubbling，他是從內而外的流程，所以會先執行藍色元素的click事件再執行紅色元素的click事件，如果是true，那就是capture，和bubbling相 …\u003c/p\u003e"

"\u003cp\u003e适应的浏览器版本不同，同时在使用的过程中要注意\nattachEvent方法          按钮onclick\naddEventListener方法    按钮click\u003c/p\u003e\n\u003cp\u003e有关addEventListener函数的相关参数 \u003ca href=\"/index.php/archives/1429\"\u003e请点击这里查看\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e两者使用的原理：可对执行的优先级不一样，下面实例讲解如下：\nattachEvent方法，为某一事件附加其它的处理事件。（不支持Mozilla系列）\u003c/p\u003e\n\u003cp\u003eaddEventListener方法 用于 Mozilla系列\u003c/p\u003e\n\u003cp\u003e举例: document.getElementById(“btn”).onclick = method1;\ndocument.getElementById(“btn”).onclick = method2;\ndocument.getElementById(“btn”).onclick = method3;如果这样写,那么将会只有medhot3被执行\u003c/p\u003e\n\u003cp\u003e写成这样：\nvar btn1Obj = document.getElementById(“btn1”); //object.attachEvent(event,function); …\u003c/p\u003e"

"\u003cp\u003e在最前面的javascript加上以下语句:\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e//首先，定义一个全局的event\u003c/li\u003e\n\u003cli\u003eif( typeof(window.event)==“undefined” ){\u003c/li\u003e\n\u003cli\u003eeval(“var event = new Object;”);\u003c/li\u003e\n\u003cli\u003e}\u003c/li\u003e\n\u003c/ol\u003e"

"\u003cp\u003e用js检测图片合法性\u003c/p\u003e\n\u003cp\u003eImage\u003c/p\u003e"

"\u003cp\u003e今天单位的Dreamweaver出错了，折腾了半天，重新装了8.02，出现下面的错误：\n\u003cstrong\u003e在onLoad运行RecordsetFind.htm时\u003c/strong\u003e, \u003cstrong\u003e发生了以下\u003c/strong\u003e JavaScript错误:\u003c/p\u003e\n\u003cp\u003e在文件””RecordsetFind””:\u003c/p\u003e\n\u003cp\u003eReferenceError:findRs is not defined\u003c/p\u003e\n\u003cp\u003e卸载掉了，删除安装目录下的文件夹，清除注册表相应的项目，重装，问题依旧，郁闷！\n再次卸载，装老版的DW 2004, 也出现部分菜单打不开，点击就不停的抱错，汗！再次装8.02，还是不成，网上也搜不到任何解决方法。无意中删除C:Documents and SettingsAdministratorApplication DataMacromedia把Dreamweaver 8 这个文件夹，另外清寒要删除”Common”这个文件夹,重新打开dw ，居然ok了，呵呵，果真是天无绝人之路！\u003c/p\u003e"

"\u003cp\u003eYSlow是yahoo美国开发的一个页面评分插件，非常的棒，从中我们可以看出我们页面上的很多不足，并且可以知道我们改怎么却改进和优化。仔细研究了下YSlow跌评分规则。主要有12条：1. \u003ca href=\"http://developer.yahoo.com/performance/rules.html#num_http\"\u003eMake fewer HTTP requests\u003c/a\u003e尽可能少的http请求。。我们有141个请求（其中15个JS请求，3个CSS请求，47个CSS background images请求），多的可怕。思考了下，为什么把这个三种请求过多列为对页面加载的重要不利因素呢，而过多的IMG请求并没有列为不利因素呢？发现原来这些请求都是可以避免的。15个JS和3个CSS完全可以通过特殊的办法进行合并（这个技术部已经帮我们解决了，实在是太感谢了，嘿嘿。），这样合并以后，一般情况下页面上只会出现一个JS和一个CSS（对JS的封装得有一定的要求）。但是47个CSS background images请求改怎么解决呢？为什么页面上的纯IMG请求时合理的，而CSS background images请求过多就是不利因素了呢。这个我想了很久，总算明白，原来是这样的：一般页面上的ICON，栏目背景啊， 图片按钮啊，我们都会用图 …\u003c/p\u003e"

""

"\u003cp\u003e出自:http://be.twixt.us/jquery/suckerFish.php\u003c/p\u003e\n\u003ch1 id=\"jquery--suckerfish-style\"\u003e\u003ca href=\"http://blog.haohtml.com/wp-admin/\"\u003ejQuery\u003c/a\u003e » SuckerFish Style\u003c/h1\u003e\n\u003ch2 id=\"purpose\"\u003ePurpose\u003c/h2\u003e\n\u003cp\u003eReplicate Suckerfish Menus.\u003c/p\u003e\n\u003ch3 id=\"original-code\"\u003eOriginal Code\u003c/h3\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003e$(document).ready(function(){\n\t$(\u0026#34;#nav-one li\u0026#34;).hover(\n\t\tfunction(){ $(\u0026#34;ul\u0026#34;, this).fadeIn(\u0026#34;fast\u0026#34;); },\n\t\tfunction() { }\n\t);\n\tif (document.all) {\n\t\t$(\u0026#34;#nav-one li\u0026#34;).hoverClass (\u0026#34;sfHover\u0026#34;);\n\t}\n});\n\n$.fn.hoverClass = function(c) {\n\treturn this.each(function(){\n\t\t$(this).hover(\n\t\t\tfunction() { $(this).addClass(c); },\n\t\t\tfunction() { …\u003c/code\u003e\u003c/pre\u003e"

"\u003cp\u003e元素所参考的样式用户可以自由的选择加以改变，而导入的样式表单就自动的与剩下的样式表融合在一起了\u003c/p\u003e\n\u003cp\u003eCSS与HTML文档结合的4中方法：\u003c/p\u003e\n\u003cp\u003e1 使用元素链接到外部的样式文件\u003c/p\u003e\n\u003cp\u003e2 在元素中使用”style”元素来指定\u003c/p\u003e\n\u003cp\u003e3 使用CSS “@import”标记来导入样式表单\u003c/p\u003e\n\u003cp\u003e4 在内部的元素中使用”style”属性来定义样式\u003c/p\u003e\n\u003cp\u003e一个例子:\u003c/p\u003e\n\u003cp\u003ecss demo\u003c/p\u003e\n\u003cp\u003e第一种是直接在html页面上进行css书写，而第二种和第三种是采用外部引用样式单独提取文件。\u003c/p\u003e\n\u003cp\u003e问题1.到底link和@import有什么区别？\u003c/p\u003e\n\u003cp\u003e我们先来看看他们的定义\u003c/p\u003e\n\u003cp\u003elink元素\u003c/p\u003e\n\u003cp\u003eHTML和XHTML都有一个结构，它使网页作者可以增加于HTML文档相关的额外信息。这些额外资源可以是样式化信息（CSS）、导航助手、属于另 外形式的信息（RSS）、联系信息等等。\u003c/p\u003e\n\u003cp\u003e@import\u003c/p\u003e\n\u003cp\u003e指定导入的外部样式表及目标设备类型。\u003c/p\u003e\n\u003cp\u003e其实link和@import的最根本区别就是，\u003cstrong\u003elink\u003c/strong\u003e 是一个 \u003cstrong\u003ehtml\u003c/strong\u003e 的一个标签 ，而**@import** 是 \u003cstrong\u003ecss\u003c/strong\u003e 的一个标签 ,\u003c/p\u003e\n\u003cp\u003elink除了调用css外还可以有其他作用譬如声明页面链接属性，声明目录，rss等等， …\u003c/p\u003e"

"\u003ch2 id=\"义和用法\"\u003e义和用法\u003c/h2\u003e\n\u003cp\u003eisNaN() 函数用于检查其参数是否是非数字值。\u003c/p\u003e\n\u003ch3 id=\"语法\"\u003e语法\u003c/h3\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003eisNaN(x)\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e参数\u003c/p\u003e\n\u003cp\u003e描述\u003c/p\u003e\n\u003cp\u003ex\u003c/p\u003e\n\u003cp\u003e必需。要检测的值。\u003c/p\u003e\n\u003ch3 id=\"返回值\"\u003e返回值\u003c/h3\u003e\n\u003cp\u003e如果 x 是特殊的非数字值 NaN（或者能被转换为这样的值），返回的值就是 true。如果 x 是其他值,则返回 false。\u003c/p\u003e\n\u003ch3 id=\"说明\"\u003e说明\u003c/h3\u003e\n\u003cp\u003eisNaN() 函数可用于判断其参数是否是 NaN，该值表示一个非法的数字（比如被 0 除后得到的结果）。\u003c/p\u003e\n\u003cp\u003e如果把 NaN 与任何值（包括其自身）相比得到的结果均是 false，所以要判断某个值是否是 NaN，不能使用 == 或 === 运算符。正因为如此，isNaN() 函数是必需的。\u003c/p\u003e\n\u003ch2 id=\"提示和注释\"\u003e提示和注释\u003c/h2\u003e\n\u003cp\u003e提示：isNaN() 函数通常用于检测 parseFloat() 和 parseInt() 的结果，以判断它们表示的是否是合法的数字。当然也可以用 isNaN() 函数来检测算数错误，比如用 0 作除数的情况。\u003c/p\u003e\n\u003ch2 id=\"实例\"\u003e实例\u003c/h2\u003e\n\u003cp\u003e在本例中，我们将使用 isFinite() 在检测无穷数：\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003e\u0026lt;script type=\u0026#34;text/javascript\u0026#34;\u0026gt;\n\ndocument.write(isFinite(123)) …\u003c/code\u003e\u003c/pre\u003e"

"\u003ch2 id=\"定义和用法\"\u003e定义和用法\u003c/h2\u003e\n\u003cp\u003epush() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。\u003c/p\u003e\n\u003ch3 id=\"语法\"\u003e语法\u003c/h3\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003earrayObject.push(newelement1,newelement2,....,newelementX)\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e参数\u003c/p\u003e\n\u003cp\u003e描述\u003c/p\u003e\n\u003cp\u003enewelement1\u003c/p\u003e\n\u003cp\u003e必需。要添加到数组的第一个元素。\u003c/p\u003e\n\u003cp\u003enewelement2\u003c/p\u003e\n\u003cp\u003e可选。要添加到数组的第二个元素。\u003c/p\u003e\n\u003cp\u003enewelementX\u003c/p\u003e\n\u003cp\u003e可选。可添加多个元素。\u003c/p\u003e\n\u003ch3 id=\"返回值\"\u003e返回值\u003c/h3\u003e\n\u003cp\u003e把指定的值添加到数组后的新长度。\u003c/p\u003e\n\u003ch3 id=\"说明\"\u003e说明\u003c/h3\u003e\n\u003cp\u003epush() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject，而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。\u003c/p\u003e\n\u003ch2 id=\"提示和注释\"\u003e提示和注释\u003c/h2\u003e\n\u003cp\u003e注释：该方法会改变数组的长度。\u003c/p\u003e\n\u003cp\u003e提示：要想数组的开头添加一个或多个元素，请使用 unshift() 方法。\u003c/p\u003e\n\u003ch2 id=\"实例\"\u003e实例\u003c/h2\u003e\n\u003cp\u003e在本例中，我们将创建一个数组，并通过添加一个元素来改变其长度：\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003e\u0026lt;script type=\u0026#34;text/javascript\u0026#34;\u0026gt;\n\nvar arr = new Array(3)\narr[0] = …\u003c/code\u003e\u003c/pre\u003e"

"\u003cp\u003e\u003cstrong\u003e方法一:\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e＂FSO功能：＂－”关闭站点Fso功能”．将站点的fso功能关闭掉．这样子基本上就可以杜绝目前的asp木马．如果需要上传附件的话．可以通过”SAFileUp”．”aspupload”．等组件进行上传．\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e方法二:\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e辛辛苦苦做的网站突然被挂马，究其原因是因为网页带病毒，打开代码发现所有的页面的代码最后一行都多了一句：\u003c/p\u003e\n\u003cp\u003e引用内容\u003c/p\u003e\n\u003cp\u003e\u0026lt; IFRAME src=”http://www.xxx.xxx “\u0026gt;\u0026lt; /IFRAME \u0026gt;\u003c/p\u003e\n\u003cp\u003e打开引用页面一看防病毒软件一顿乱响，找到元凶了这可怎办？\u003c/p\u003e\n\u003cp\u003e最后一行怎么弄都不行？！！\u003c/p\u003e\n\u003cp\u003e其实很简单我们只需要在 \u0026lt; STYLE \u0026gt;\u0026lt; / STYLE \u0026gt; 之间加上一句\u003c/p\u003e\n\u003cp\u003e完整如下：\u003c/p\u003e\n\u003cp\u003e程序代码\u003c/p\u003e\n\u003cp\u003e就可以了其实这是用了CSS样式表来对网页中所有的FRAME对象进行”洗脑”把iframe中的src属性的值换成空白页这样加进去的iFRAME 代码就不起作用了。\u003c/p\u003e\n\u003cp\u003e这个解决方案除了IFRAME里面的JS代码alert方法不能屏蔽之外，其他任意JS都可以不起作用。\u003c/p\u003e\n\u003cp\u003e如果要使自己的IFRAME显示在网页里，别人挂的IFRAME马都不起作 …\u003c/p\u003e"

"\u003cp\u003efunction imagePreload() {\nvar imgPreload = new Image();\nfor (i = 0; i \u0026lt; arguments.length; i++) {\nimgPreload.src = arguments[i];\n}\n}\n\u003cstrong\u003eimagePreload(‘001.gif’, ‘002.gif’, ‘003.gif’, ‘004.gif’, ‘005.gif’)\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e这个是js中的arguments.主要是可以对输入的参数进行跟踪。\n这如作者所举出的例子:imagePreload函数出入了5个参数，所以在js代码中的\narguments.length会知道你输入的了5个参数。并可以通过索引器获得五个参数的值。\u003c/p\u003e"

"\u003cp\u003e   FCKEditor是一个功能强大的开源在线编辑器，所以是非常适合我等兜兜无啥银子的人拿来“把玩”的~~~呵呵。一个产品即使功能再强大也不能满足所有用户的需求，当然FCKEditor也不例外咯。就拿我现在所开发的一个系统（工作流）来说，就遇到了FCKEditor不能满足我的要求的情况。因为我想在工具栏中加入自己的操作控制按钮，配置当然搞不定咯，就只有改源代码了。可一看FCKEditor经过处理后的JS源码，头立刻就大了——无换行无注释，一大堆JS代码堆在那里，想看懂几乎没门。当然它这样做也是有好处的，要不这大的一个东西加载怎么会那么快呢。看不懂处理后的JS源码，我们可以看有格式的源码嘛，所以就上网down了一个2.4的FCKEditor。好了，现在就让我们开始怎么一步一步的加入我们自己的操作菜单到工具栏中去。\u003c/p\u003e\n\u003cp\u003e    比如我想加一个我自己的输入框用来控制日期的输入，即该输入框只能通过选择来选择日期，这个我们结合日期控件my97来做，呵呵，充分利用已有的成果。有人会说，我直接改它的对话框不就得了，当然这也是可以的，可我们今天要做的就是如何加入自己的工具栏操作，这样以后就可以依次类推， …\u003c/p\u003e"

"\u003cpre tabindex=\"0\"\u003e\u003ccode\u003emootools【一】- 起步篇\n以前一直在用prototype.js，最近发现了mootools,据说也相当不错，它是个纯OO的javascript 框架，所以拿来学习学习，把学习经过记录下来。\n粗略看了下，mootools很貌似prototype,所以用过prototype框架的人应该很容易上手的。\nmootools提供的功能高度模块化，可以根据实际需要来裁剪。\n它的核心库是Moo.js和Utility.js，Moo.js里包含了实现OO的基础类,Utility.js提供了最常用的工具函数的封装。\n---------------------------Moo.js-------------------------------------\nprototype.js里提供了如下形式来创建我们的对象:\nvar Cat = Class.create();\nPerson.prototype = {\ninitialize: function(name){\nthis.name = name;\n}\n};\nvar cat = new Cat (\u0026#39;kitty\u0026#39;); …\u003c/code\u003e\u003c/pre\u003e"

"\u003ch1 id=\"top-xhrjs\"\u003e\u003ca href=\"http://www.seoeye.org/mootools/XHR.htm#MainTopic\"\u003etop\u003c/a\u003e XHR.js\u003c/h1\u003e\n\u003cp\u003e包含了基本的 XMLHttpRequest 类的包装〿\u003c/p\u003e\n\u003ch4 id=\"license\"\u003eLicense\u003c/h4\u003e\n\u003cp\u003eMIT-style license.\u003c/p\u003e\n\u003cp\u003e概要\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"http://www.seoeye.org/mootools/XHR.htm#XHR.js\"\u003eXHR.js\u003c/a\u003e\n包含了基本的 XMLHttpRequest 类的包装〿\n\u003ca href=\"http://www.seoeye.org/mootools/XHR.htm#XHR\"\u003eXHR\u003c/a\u003e\n基本皿XMLHttpRequest的包装类\n\u003ca href=\"http://www.seoeye.org/mootools/XHR.htm#XHR.Properties\"\u003e属怿/a\u0026gt;\u003c/a\u003e\u003ca href=\"http://www.seoeye.org/mootools/XHR.htm#XHR.setHeader\"\u003esetHeader\u003c/a\u003e\n添加/修改请求的Header\n\u003ca href=\"http://www.seoeye.org/mootools/XHR.htm#XHR.send\"\u003esend\u003c/a\u003e\n打开XMLHttpRequest连接并发送数捿/td\u0026gt;\n\u003ca href=\"http://www.seoeye.org/mootools/XHR.htm#XHR.cancel\"\u003ecancel\u003c/a\u003e\n取消正在执行的请汿\u003c/p\u003e\n\u003ch2 id=\"top-xhr\"\u003e\u003ca href=\"http://www.seoeye.org/mootools/XHR.htm#MainTopic\"\u003etop\u003c/a\u003e XHR\u003c/h2\u003e\n\u003cp\u003e基本皿XMLHttpRequest的包装类\u003c/p\u003e\n\u003ch4 id=\"参数\"\u003e参数\u003c/h4\u003e\n\u003cp\u003eoptions\u003c/p\u003e\n\u003cp\u003e一个请求的配置对象。参考下面的可选项\u003c/p\u003e\n\u003ch4 id=\"可选项\"\u003e可选项\u003c/h4\u003e\n\u003cp\u003emethod\u003c/p\u003e\n\u003cp\u003e’post’ 房‘get’ – 请求的协访 可选，默认丿lsquo;post’.\u003c/p\u003e\n\u003cp\u003easync\u003c/p\u003e\n\u003cp\u003e是否是异步。默认为true.\u003c/p\u003e\n\u003cp\u003eencoding\u003c/p\u003e\n\u003cp\u003e数据编码。默认为utf-8.\u003c/p\u003e\n\u003cp\u003eautoCancel\u003c/p\u003e\n\u003cp\u003e自动取消前一个正在执行的请求。默认为false.\u003c/p\u003e\n\u003cp\u003eheaders\u003c/p\u003e\n\u003cp\u003e一个请求头的配置对豿\u003c/p\u003e\n\u003ch4 id=\"事件\"\u003e事件\u003c/h4\u003e\n\u003cp\u003eonRequest\u003c/p\u003e\n\u003cp\u003e请求发送时触发\u003c/p\u003e\n\u003cp\u003eonSuccess\u003c/p\u003e\n\u003cp\u003e请求完成时触叿\u003c/p\u003e\n\u003cp\u003eonStateChange\u003c/p\u003e\n\u003cp\u003eXMLHttpRequest状态发生改 …\u003c/p\u003e"

"\u003cp\u003e一.教程/文章/代码实例：\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"http://clientside.cnet.com/wiki/mootorial/\"\u003ehttp://clientside.cnet.com/wiki/mootorial/\u003c/a\u003e — The Mootorial：比较完整的mootools教程\n　　\u003ca href=\"http://solutoire.com/2007/02/16/mootools-ajax-xhr-classes/\"\u003ehttp://solutoire.com/2007/02/16/mootools-ajax-xhr-classes/\u003c/a\u003e — ajax 和 XHR\n　　\u003ca href=\"http://solutoire.com/2007/01/31/mootools-10-whats-new/\"\u003ehttp://solutoire.com/2007/01/31/mootools-10-whats-new/\u003c/a\u003e — Mootools 1.0: What’s new\n　　\u0026quot; \u003ca href=\"http://solutoire.com/2006/12/25/porting-prototype-enumerable-functions-to-mootools-array-objects/\"\u003ehttp://solutoire.com/2006/12/25/porting-prototype-enumerable-functions-to-mootools-array-objects/\u003c/a\u003e — 将 Prototype的Enumerable移植到Mootools Array\n　　\u003ca href=\"http://www.coryhudson.com/blog/2006/09/12/extending-objects-and-classes-with-mootools/\"\u003ehttp://www.coryhudson.com/blog/2006/09/12/extending-objects-and-classes-with-mootools/\u003c/a\u003e — 用mootools …\u003c/p\u003e"

"\u003cp\u003e以前写过一个js包,里面的tab和tree都是纯粹用js的function手写,没有使用框架,\u003c/p\u003e\n\u003cp\u003e存在几个问题\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\n\u003cp\u003e扩展比较困难\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e接下去在添加新的控件,没有一个统一的实现方式,显得混乱,不好管理\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003e基于以上理由,重新基于 mootools1.1 重写了tab和tree控件,为将来添加更多的控件打个好的基础\u003c/p\u003e\n\u003cp\u003e代码中有详细的注释,也有demo,一看全明白了\u003c/p\u003e\n\u003cp\u003e下面附上源码和效果图\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ca href=\"http://www.javaeye.com/topics/download/1a5be506-47ce-44c7-b946-8efad4f8304f\"\u003edemo.rar\u003c/a\u003e (80.1 KB)\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e描述: 示例和源码\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e下载次数: 708\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ca href=\"http://www.javaeye.com/topics/download/d7a07383-d8f5-4c5a-8e20-7293a5ba52b6\"\u003e\u003cimg src=\"http://www.javaeye.com/upload/attachment/7132/d7a07383-d8f5-4c5a-8e20-7293a5ba52b6-thumb.jpg?1199174530\" alt=\"D7a07383-d8f5-4c5a-8e20-7293a5ba52b6-thumb\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e描述: tab效果图\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e大小: 5.1 KB\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e查看次数: 240\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ca href=\"http://www.javaeye.com/topics/download/3a4bfaa8-907a-4e09-b8e4-e3cc4b1c68e4\"\u003e\u003cimg src=\"http://www.javaeye.com/upload/attachment/7133/3a4bfaa8-907a-4e09-b8e4-e3cc4b1c68e4-thumb.jpg?1199174530\" alt=\"3a4bfaa8-907a-4e09-b8e4-e3cc4b1c68e4-thumb\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e描述: tree效果图\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e大小: 2 KB\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e查看次数: 117\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e"

"\u003cp\u003e如果给div元素设置了宽度时，比如width:100%，此时div在IE中（IE6，IE7）将占据物理空间，而在FF中不占据物理空间（正确理解）。为了表述直观，将样式直接写在元素标签内：\u003c/p\u003e\n\u003cp\u003e此时在IE中到底是什么在影响着最终的显示，又是如何解析的呢？\u003c/p\u003e\n\u003cp\u003e可能的影响因素：字体大小（font-size），字体行高（line-height），高度（height），溢出（overflow）\u003c/p\u003e\n\u003cp\u003e我们对上面的代码逐一添加过滤属性（具体的过程有兴趣的朋友，可以私下里实验一下，“自己动手，丰衣足食”！）\u003c/p\u003e\n\u003cp\u003e在测试的过程中，你会发现IE6和IE7的解析也不尽相同，比如在给div设置了line-height:0; height:0; 的样式后，IE7中显示正常了，不再占据物理空间了，而IE6却依然我行我素，亦或是悲！\u003c/p\u003e\n\u003cp\u003e最终的测试结果，最简单的方法是，给div设置高度（height）和溢出（overflow）属性：\u003c/p\u003e"

"\u003cp\u003eHTTP \u003ca href=\"/?tag=404\"\u003e404\u003c/a\u003e 错误意味着链接指向的网页不存在。在网站建设中想要完全避免这种情况是不可能的，比如说，我们常常需要对网站进行调整、改版，便会有网页被删除、改名或移动位置，这时候，虽然相应内容的网页还存在于网站中，但使用原来的地址访问则无法访问。——当然，对这类情况首先要考虑的是为原来页面地址做301重定向，以尽可能地减小对\u003ca href=\"/?tag=seo\"\u003eSEO\u003c/a\u003e效果的影响。——其次，在别人建立指向网站的链接时，也可能会由于出现拼写错误而使其成为一个无效的链接：在网站内找不到相应的内容页面。\u003c/p\u003e\n\u003cp\u003e简单说来，这类无效链接是由web服务器自动处理的：当Web 服务器接到类似的数据请求量，会返回一个 \u003ca href=\"/?tag=404\"\u003e404\u003c/a\u003e 状态码，告诉对方其要请求的资源并不存在。但是，Web服务器默认的404错误页面，无论\u003ca href=\"/?tag=apache\"\u003eApache\u003c/a\u003e还是\u003ca href=\"/?tag=iis\"\u003eIIS\u003c/a\u003e，均十分简陋、呆板且对用户不友好，无法给予用户寻找相应信息的更多线索，用户看到这类页面往往最直接的反应并是关闭浏览器窗口离开，这在很大程度上给网站造成损失。毕竟，对网站来说，用户永远是最重要的资源，以这种方式损失用户更意味着某种程度的失败。\u003c/p\u003e\n\u003cp\u003e这也是许多网站使用自定义\u003ca href=\"/?tag=404\"\u003e404\u003c/a\u003e 错误页面的原因。通过良好的自定义404页面，可以包 …\u003c/p\u003e"

"\u003cp\u003e      在“通过HTTP状态码查看搜索引擎蜘蛛如何爬行你的网站”一文中，我介绍了一些经常涉及到的HTTP状态码及含义，譬如大家经常探讨并且与本文相关的Http状态码：\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"/?tag=404\"\u003e404\u003c/a\u003e：服务器找不到指定的资源，请求的网页不存在(譬如浏览器请求的网页被删除或者移位，但不排除日后该链接有效的可能性)；\n410：请求的网页不存在(注意：410表示永久性，而404表示临时性)；\n200：服务器成功返回请求的网页；\n301：网址永久性重定向\n302：网址临时性重定向\u003c/p\u003e\n\u003cp\u003e注意：大部分搜索引擎将“404”与“410”状态同等对待，如Google。(参见Matt Cutts的说明)\u003c/p\u003e\n\u003cp\u003e对HTTP404状态码的理解\u003c/p\u003e\n\u003cp\u003e　　HTTP 404 错误意味着链接指向的网页不存在，即原始网页的URL失效，这种情况经常会发生，很难避免，比如说：网页URL生成规则改变、网页文件更名或移动位置、导入链接拼写错误等，导致原来的URL地址无法访问；当Web 服务器接到类似请求时，会返回一个404 状态码，告诉浏览器要请求的资源并不存在。但是，Web服务器默认的404错误页面，无论Apache还是IIS，均十分简陋、呆板且对用户不友好， …\u003c/p\u003e"