前端优化三续：用script存放html代码来减少DOM节点数

前端优化三续：美团的实践——用script存放html代码来减少DOM节点数. 玉伯在《 淘宝详情页的 BigRender 优化与存放大块 HTML 内容的最佳方式》中提到，. 与前面  textarea 存放 html 代码 一样，你也可以 用 script 来存放，目的都是减少 DOM 节点数.

我们常用的script标签，有两个和性能、js文件下载执行相关的属性：defer和async. defer的含义【摘自 https://developer.mozilla.org/En/HTML/Element/Script】. This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed..

进入正题之前，先考大家一个问题：defer 属性现在有哪些浏览器支持. 除了 defer 属性，script 还新增了一个 async 属性，请看 MDC：. If the script cannot be executed asynchronously, or the browser doesn’t support this attribute, the script is executed synchronously (and loading the content blocks until the script finishes running).

学习Shell Script. 1 什么是Shell Scipt. 2.2 例2 按日期建立相似名字的文件. 3.2.4 整数，字符串，多重条件判断. 4 Shell Script 参数. 5.2 if else 结构. 8 shell script的追踪与Debug. 1 什么是Shell Scipt.

优点：直接使用浏览器内存的缓存数据，减少网站后台压力，用户体验（速度）好. 缺点：对于时时变化的动态页面，这种情况就不能容忍了，因为每次访问的都是第一次访问的内容，这样即使所请求的页面已经变化了，用户也不可能知道，所以此场景必须要消除这种缓存的影响. 延迟加载，将资源延迟到需要的时候的加载，例如detail页面，相关产品推荐，当用户浏览更多的信息往下拉动滚动时，才进行加载，异步加载可以大幅减少对后端资源的使用，在需要的时候加载，是资源合理使用常用的方式，但是也带来一个问题，当往下拉才去加载，如果性能不够好，用户的体验其实是不好的，“菊花”转动的时间会比较长，同时异步加载对前端性能的作用也是非常明显的，渲染的节点数量大幅减少.

　　在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出. 　　一个正常HTTP请求的流程简述：如在浏览器中输入" www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行.

还有 Jason, Bixuan, 曦, 推荐，查看全部 8 个推荐. 博评 - Sting的网经发表于2010-08-08 08:41:10. Google的前端优化最佳实践 Yahoo的前端优化最佳实践. Web前端优化最佳实践之Content篇. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests).

在前端领域中，对Javascript和CSS的优化一直是大家关注的焦点，相应的压缩优化工具也非常丰富，相对而言对HTML优化的关注则显得有些冷淡. 在 Steve Souders的大作《Even Faster Web Sites》中谈到非常多有效的前端优化方法，例如Javascript的加载、CSS选择符、图片优化、gzip、iframe问题等，唯独没有细说HTML优化.

曾经有位朋友自己做了个小网站，刚开始没什么人气，后来不小心把流量搞大了，用户抱怨访问缓慢，就让我帮忙看看哪里可以优化. 那时 Steve Souders 老师的 YSlow 14条军规刚刚新鲜出炉，开宗明义第一句便是：网页性能 80% 消耗在前端. 于是运用 Firefox+Firebug+YSlow 工具，轻松找到那些大图小用、过期时间太短、JS/CSS位置不正确、没有精简压缩的罪恶之源.

每个参与过开发企业级 web 应用的前端工程师或许都曾思考过前端性能优化方面的问题. 我们有雅虎 14 条性能优化原则，还有两本很经典的性能优化指导书：《高性能网站建设指南》、《高性能网站建设进阶指南》. 经验丰富的工程师对于前端性能优化方法耳濡目染，基本都能一一列举出来. 这些性能优化原则大概是在 7 年前提出的，对于 web 性能优化至今都有非常重要的指导意义.