关键词：
发现关于前端性能优化的博文，比XX军规好太多，详细很多。
原文地址：http://cnodejs.org/topic/55e31bd6898f6bdc7e5551ac
###AJAX优化
- 缓存
AJAX：
- -
异步并不等于即时。- 请求使用
GET：
- - 当使用
XMLHttpRequest时，而URL长度不到2K，可以使用GET请求数据，GET相比POST更快速。
- -
POST类型请求要发送两个TCP数据包。
- - 先发送文件头。
- - 再发送数据。
- -
GET类型请求只需要发送一个TCP数据包。
- - 取决于你的
cookie数量。
###COOKIE专题
- 减少
COOKIE的大小。- 使用无
COOKIE的域。
- - 比如图片
CSS等静态文件放在静态资源服务器上并配置单独域名，客户端请求静态文件的时候，减少COOKIE反复传输时对主域名的影响。
###DOM优化
- 优化节点修改。
- 使用
cloneNode在外部更新节点然后再通过replace与原始节点互换。var orig = document.getElementById('container'); var clone = orig.cloneNode(true); var list = ['foo', 'bar', 'baz']; var content; for (var i = 0; i < list.length; i++) content = document.createTextNode(list[i]); clone.appendChild(content); orig.parentNode.replaceChild(clone, orig);- 优化节点添加
多个节点插入操作，即使在外面设置节点的元素和风格再插入，由于多个节点还是会引发多次reflow。
- - 优化的方法是创建
DocumentFragment，在其中插入节点后再添加到页面。
- 如
JQuery中所有的添加节点的操作如append，都是最终调用DocumentFragment来实现的，createSafeFragment(document) var list = nodeNames.split( "|" ), safeFrag = document.createDocumentFragment(); if (safeFrag.createElement) while (list.length) safeFrag.createElement( list.pop(); ); ; ; return safeFrag; ;- 优化
CSS样式转换。如果需要动态更改CSS样式，尽量采用触发reflow次数较少的方式。
- 如以下代码逐条更改元素的几何属性，理论上会触发多次
reflow。element.style.fontWeight = 'bold' ; element.style.marginLeft= '30px' ; element.style.marginRight = '30px' ;- 可以通过直接设置元素的
className直接设置，只会触发一次reflow。element.className = 'selectedAnchor' ;- 减少
DOM元素数量
- 在
console中执行命令查看DOM元素数量。`document.getElementsByTagName( '*' ).length`- 正常页面的
DOM元素数量一般不应该超过1000。-
DOM元素过多会使DOM元素查询效率，样式表匹配效率降低，是页面性能最主要的瓶颈之一。DOM操作优化。
- -
DOM操作性能问题主要有以下原因。
- -
DOM元素过多导致元素定位缓慢。- - 大量的
DOM接口调用。
- -
JAVASCRIPT和DOM之间的交互需要通过函数API接口来完成，造成延时，尤其是在循环语句中。- -
DOM操作触发频繁的reflow(layout)和repaint。- -
layout发生在repaint之前，所以layout相对来说会造成更多性能损耗。
- -
reflow(layout)就是计算页面元素的几何信息。- -
repaint就是绘制页面元素。- - 对
DOM进行操作会导致浏览器执行回流reflow。- - 解决方案。
- - 纯
JAVASCRIPT执行时间是很短的。- - 最小化
DOM访问次数，尽可能在js端执行。- - 如果需要多次访问某个
DOM节点，请使用局部变量存储对它的引用。- - 谨慎处理
HTML集合（HTML集合实时连系底层文档），把集合的长度缓存到一个变量中，并在迭代中使用它，如果需要经常操作集合，建议把它拷贝到一个数组中。- - 如果可能的话，使用速度更快的API，比如
querySelectorAll和firstElementChild。- - 要留意重绘和重排。
- - 批量修改样式时，
离线操作DOM树。- - 使用缓存，并减少访问布局的次数。
- - 动画中使用绝对定位，使用拖放代理。
- - 使用事件委托来减少事件处理器的数量。
- 优化
DOM交互在
JAVASCRIPT中，DOM操作和交互要消耗大量时间，因为它们往往需要重新渲染整个页面或者某一个部分。
- - 最小化
现场更新。
- - 当需要访问的
DOM部分已经已经被渲染为页面中的一部分，那么DOM操作和交互的过程就是再进行一次现场更新。- -
现场更新是需要针对现场（相关显示页面的部分结构）立即进行更新，每一个更改（不管是插入单个字符还是移除整个片段），都有一个性能损耗。- - 现场更新进行的越多，代码完成执行所花的时间也越长。
- - 多使用
innerHTML。
- - 有两种在页面上创建
DOM节点的方法：
- - 使用诸如
createElement()和appendChild()之类的DOM方法。- - 使用
innerHTML。
- - 当使用
innerHTML设置为某个值时，后台会创建一个HTML解释器，然后使用内部的DOM调用来创建DOM结构，而非基于JAVASCRIPT的DOM调用。由于内部方法是编译好的而非解释执行，故执行的更快。对于小的
DOM更改，两者效率差不多，但对于大的DOM更改，innerHTML要比标准的DOM方法创建同样的DOM结构快得多。- 回流
reflow。
- - 发生场景。
- - 改变窗体大小。
- - 更改字体。
- - 添加移除stylesheet块。
- - 内容改变哪怕是输入框输入文字。
- - CSS虚类被触发如 :hover。
- - 更改元素的className。
- - 当对DOM节点执行新增或者删除操作或内容更改时。
- - 动态设置一个style样式时（比如element.style.width=“10px”）。
- - 当获取一个必须经过计算的尺寸值时，比如访问offsetWidth、clientHeight或者其他需要经过计算的CSS值。
- - 解决问题的关键，就是限制通过DOM操作所引发回流的次数。
- 在对当前DOM进行操作之前，尽可能多的做一些准备工作，保证N次创建，1次写入。
- 在对DOM操作之前，把要操作的元素，先从当前DOM结构中删除：
- - 通过removeChild()或者replaceChild()实现真正意义上的删除。
- - 设置该元素的display样式为“none”。
- 每次修改元素的style属性都会触发回流操作。
element.style.backgroundColor = "blue";
- - 使用更改
className的方式替换style.xxx=xxx的方式。- - 使用
style.cssText = '';一次写入样式。- - 避免设置过多的行内样式。
- - 添加的结构外元素尽量设置它们的位置为
fixed或absolute。- - 避免使用表格来布局。
- - 避免在
CSS中使用JavaScript expressions(IE only)。- 将获取的
DOM数据缓存起来。这种方法，对获取那些会触发回流操作的属性（比如offsetWidth等）尤为重要。- 当对HTMLCollection对象进行操作时，应该将访问的次数尽可能的降至最低，最简单的，你可以将length属性缓存在一个本地变量中，这样就能大幅度的提高循环的效率。
###eval优化
- 避免
eval：
- -
eval会在时间方面带来一些效率，但也有很多缺点。
- -
eval会导致代码看起来更脏。- -
eval会需要消耗大量时间。- -
eval会逃过大多数压缩工具的压缩。
###HTML优化
- 插入
HTML。
- -
JavaScript中使用document.write生成页面内容会效率较低，可以找一个容器元素，比如指定一个div，并使用innerHTML来将HTML代码插入到页面中。- 避免空的
src和href。
- - 当
link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。- 为文件头指定
Expires。
- - 使内容具有缓存性，避免了接下来的页面访问中不必要的HTTP请求。
- 重构HTML，把重要内容的优先级提高。
- Post-load（次要加载）不是必须的资源。
- 利用预加载优化资源。
- 合理架构，使DOM结构尽量简单。
- 利用
LocalStorage合理缓存资源。- 尽量避免CSS表达式和滤镜。
- 尝试使用defer方式加载Js脚本。
- 新特性：will-change，把即将发生的改变预先告诉浏览器。
- 新特性Beacon，不堵塞队列的异步数据发送。
- 不同之处：网络缓慢，缓存更小，不令人满意的浏览器处理机制。
- 尽量多地缓存文件。
- 使用HTML5 Web Workers来允许多线程工作。
- 为不同的Viewports设置不同大小的Content。
- 正确设置可Tap的目标的大小。
- 使用响应式图片。
- 支持新接口协议（如HTTP2）。
- 未来的缓存离线机制：Service Workers。
- 未来的资源优化Resource Hints(preconnect, preload, 和prerender)。
- 使用Server-sent Events。
- 设置一个Meta Viewport。
###JIT与GC优化
untyped（无类型）。
-
JAVASCRIPT是个无类型的语言，这导致了如x=y+ｚ这种表达式可以有很多含义。
- -
y，z是数字，则+表示加法。- -
y，z是字符串，则+表示字符串连接。而JS引擎内部则使用“
细粒度”的类型，比如：
- - 32-bit* integer。
- - 64-bit* floating-point。
这就要求js类型-js引擎类型，需要做“boxed/unboxed（装箱/解箱）”，在处理一次
x=y+z这种计算，需要经过的步骤如下。
- . 从内存，读取
x=y+z的操作符。- . 从内存，读取
y，z。- . 检查y，z类型，确定操作的行为。
- .
unbox y，z。- . 执行操作符的行为。
- .
box x。- . 把
x写入内存。只有第
5步骤是真正有效的操作，其他步骤都是为第5步骤做准备/收尾，JAVASCRIPT的untyped特性很好用，但也为此付出了很大的性能代价。
查看详情前端project与性能优化（长文）
...og/2014/03/fis-optimize/ 每一个參与过开发企业级web应用的前端project师也许都曾思考过前端性能优化方面的问题。我们有雅虎14条性能优化原则。还有两本非常经典的性能优化指导书：《高性能站点建设指南》、《高性能站点建设... 查看详情
网站前端性能优化终极指南(代码片段)
性能黄金法则:80-90%的终端用户响应时间花在下载前端，即页面上的所有组件:img、stylesheets、scripts等1.缩小HTML、CSS和JavaScript减少资源意味着从HTML、JavaScript和CSS中删除不必要的、不需要加载的字符，如空白字符、换行字符... 查看详情
网站前端性能优化终极指南(代码片段)
性能黄金法则:80-90%的终端用户响应时间花在下载前端，即页面上的所有组件:img、stylesheets、scripts等1.缩小HTML、CSS和JavaScript减少资源意味着从HTML、JavaScript和CSS中删除不必要的、不需要加载的字符，如空白字符、换行字符... 查看详情
性能优化指南：性能优化的一般性原则与方法
...优化是常有的事情，不管是桌面应用还是web应用，不管是前端还是后端，不管是单点应用还是分布式系统。本文从以下几个方面来思考这个问题：性能优化的一般性原则，性能优化的层次，性能优化的通用方法。本文不限于任何... 查看详情
前端性能优化指南
发现关于前端性能优化的博文，比XX军规好太多，详细很多。原文地址：http://cnodejs.org/topic/55e31bd6898f6bdc7e5551ac###AJAX优化缓存AJAX：- 异步并不等于即时。请求使用GET：-当使用XMLHttpRequest时，而URL长度不到2K&#... 查看详情
vue项目性能优化—实践指南（网上最全）(代码片段)
...e框架通过数据双向绑定和虚拟DOM技术，帮我们处理了前端开发中最脏最累的DOM操作部分，我们不再需要去考虑如何操作DOM以及如何最高效地操作DOM；但Vue项目中仍然存在项目首屏优化、Webpack编译配置优化等问题，... 查看详情
C++ 性能/内存优化指南
】C++性能/内存优化指南【英文标题】：C++Performance/memoryoptimizationguidelines【发布时间】：2010-03-3118:19:26【问题描述】：有人有C++内存优化指南的资源吗？最佳实践、调优等？举个例子：Classxxxpublic:xxx();virtual~xxx();protected:private:;由... 查看详情
spark性能优化指南——高级篇
Spark性能优化指南——高级篇2016年05月12日 作者:李雪蕤 文章链接 23095字 47分钟阅读继基础篇讲解了每个Spark开发人员都必须熟知的开发调优与资源调优之后，本文作为《Spark性能优化指南》的高级篇，将深入... 查看详情
spark性能优化指南——高级篇
Spark性能优化指南——高级篇[TOC]前言继基础篇讲解了每个Spark开发人员都必须熟知的开发调优与资源调优之后，本文作为《Spark性能优化指南》的高级篇，将深入分析数据倾斜调优与shuffle调优，以解决更加棘手的性能问题。数据... 查看详情
linux性能优化的全景指南
Linux性能优化性能优化性能指标高并发和响应快对应着性能优化的两个核心指标：吞吐和延时应用负载角度：直接影响了产品终端的用户体验系统资源角度：资源使用率、饱和度等性能问题的本质就是系统资源已经到达瓶颈，但... 查看详情
spark性能优化指南——高级篇(代码片段)
Spark性能优化指南——高级篇2016年05月12日 作者:李雪蕤 文章链接 23095字 47分钟阅读继基础篇讲解了每个Spark开发人员都必须熟知的开发调优与资源调优之后，本文作为《Spark性能优化指南》的高级篇，将深入... 查看详情
spark性能优化指南——高级篇
...都必须熟知的开发调优与资源调优之后，本文作为《Spark性能优化指南》的高级篇，将深入分析数据倾斜调优与shuffle调优，以解决更加棘手的性能问题。数据倾斜调优调优概述有的时候，我们可能会遇到大数据计算中一个最棘手... 查看详情
spark性能优化指南——高级篇
...都必须熟知的开发调优与资源调优之后，本文作为《Spark性能优化指南》的高级篇，将深入分析数据倾斜调优与shuffle调优，以解决更加棘手的性能问题。数据倾斜调优调优概述有的时候，我们可能会遇到大数据计算中一个最棘手... 查看详情
spark性能优化指南——高级篇
...都必须熟知的开发调优与资源调优之后，本文作为《Spark性能优化指南》的高级篇，将深入分析数据倾斜调优与shuffle调优，以解决更加棘手的性能问题。数据倾斜调优调优概述有的时候，我们可能会遇到大数据计算中一个最棘手... 查看详情
spark性能优化指南——高级篇
...都必须熟知的开发调优与资源调优之后，本文作为《Spark性能优化指南》的高级篇，将深入分析数据倾斜调优与shuffle调优，以解决更加棘手的性能问题。数据倾斜调优调优概述有的时候，我们可能会遇到大数据计算中 查看详情
网站性能优化
...高性能网站优化指南》，里面介绍了不少有用的方法，有前端的也有后端，有些我们平时开发的时候一直在用，但是没有觉得能提高网站的性能，有些就 查看详情
arm算子性能优化上手指南(代码片段)
前言做arm侧算子开发时，不能不关心的就是性能。本文主要就是介绍arm算子性能优化的常用思路，做为一个入门级的参考。文章以ARMCortexa55上的GaussianBlur优化为例展开，并在文末对arm性能优化思路做了一个总结。GaussianBlur的优化... 查看详情