性能优化

• 网页内容
  
  • 减少 http请求次数
  • 减少 DNS查询次数
  • 避免页面跳转
  • 缓存 Ajax
  • 延迟加载
  • 提前加载
  • 减少 DOM元素数量
  • 根据域名划分内容
  • 减少iframe数量
  • 避免 404
• 服务器
  
  • 使用CDN(内容分发网络)
  • 添加Expires或Cache-Control报文头
  • Gzip压缩传输文件
  • 配置ETags
  • 尽早flush(刷新输出)缓冲
  • 使用GET来完成AJAX请求
  • 避免空的图片src
• Cookie
  
  • 减少Cookie大小
  • 页面内容使用无cookie域名
• CSS
  
  • 将样式表置顶
  • 避免使用CSS表达式(Expression)
  • 用代替@import
  • 避免使用Filters(滤镜)
• JavaScript
  
  • 把脚本置于页面底部
  • 使用外部JavaScript和CSS
  • 精简JavaScript和CSS
  • 去除重复脚本
  • 减少DOM访问
  • 开发智能事件处理程序
• 图片
  
  • 优化图像
  • 优化CSS Spirite
  • 不要在HTML中缩放图片
  • favicon.ico要小而且可缓存
• 移动客户端
  
  • 保持单个内容小于25KB
  • 打包组建成复合文档

1. 性能优化
项目讲求：

• 稳定性
• 可维护性
• 性能优化

性能分类：

• 执行性能
• 网络性能

2. 重排 && 重绘
页面优化

(1) 重排(reflow)
即重新生成布局，重排必然导致重绘。
会触发重排的属性：
盒子模型相关属性

• width
• height
• padding
• margin
• display
• border-width
• border
• min-height
  定位属性及浮动
• top
• bottom
• left
• right
• position
• float
• clear
  改变节点内部文字结构
• text-align
• overflow-y
• font-weight
• overflow
• font-family
• line-height
• vertival-align
• white-space
• font-size
  (2) 重绘
  即重新绘制，重绘不一定需要重排。
  会触发重绘的属性：
• color
• border-style
• border-radius
• visibility
• text-decoration
• background
• background-image
• background-position
• background-repeat
• background-size
• outline-color
• outline
• outline-style
• outline-width
• box-shadow
  3. 图层
  浏览器layout和paint是在每一个图层上进行的，当有一个元素经常变化，为了减少这个元素对页面的影响，我们可以为这个元素创建一个单独的图层，来提供页面的性能。

• 什么时候会创建图层

  • 3D或透视变换（perspective transform）CSS属性（例如translateZ(0)/translate3d(0,0,0)）
  • 使用加速视频解码的节点
  • 混合插件（如Flash）
  • 对自己的opacity做CSS动画或使用一个动画webkit变换的元素
  • 拥有加速CSS过滤器的元素
  • 元素有一个包含复合层的后代节点（一个元素拥有一个子元素，该子元素在自己的层里）
  • 元素有一个z-index较低且包含一个复合层的兄弟元素（换句话说就是该元素在复合层上面渲染）
  • position为fixed也会创建图层，而absolute则不会

  利用GPU来加速页面渲染(硬件加速)

• 触发CSS硬件加速

  • translate3d(0,0,0)
  • rotate3d(0,0,0,0)
  • scale3d(0,0,0)
  • translateZ(0)【可能】
    4. 执行性能优化
  • 不用的东西删除
  • 尽量不用全局变量(命名冲突，耗资源)
  • 能用系统自带的一定不用自己写的(eg:getByClass)

  • 尽量使用正则操作字符串

  • DOM操作耗性能，尽量减少DOM操作

  • 属性用的越多，性能越低

  • css耗性能属性：expression、filter、border-radius、box-shadow、gradients

Math.floor比parseInt快
变量性能消耗：属性 > 全局变量 > 局部变量

5. 网络性能优化
查看网络性能 F12 -> network

• Status 状态码
• Type 资源类型
  
  • 主类型/次类型
  • text/html
  • text/css
  • image/png/gif
• Initiator 发起人
• Size 资源大小
• Time 请求耗时
• Timeline 时间轴
  
  • Queueing 排队
  • Stalled 停滞
  • Request sent 请求发送
  • Waiting 等待
  • Content Download 内容下载

工具

• FF -> firebug -> yslow(网站评分)
• Chrome -> Audits(查看网络性能)

网络性能提升方法

• 减少http请求 -> 合并
  
  • js -> 合并
  • css -> 合并，避免@import方式引入css文件
  • 图片 -> css sprites
• http请求越小越好 -> 压缩
  
  • js -> 压缩
  • css -> 压缩
    - css值缩写(margin,border等)
    - 省略值为0的单位
    - 色值用最短的表示
  • 图片 -> 压缩

工具
站长工具

• 图片延迟加载
• CDN(Content Delivery Network, 内容分发网络)加速
• 加载顺序
  
  • 阻塞加载(同步加载)
  • js
    解决：引用其他网站的js放在body最后

非阻塞加载(异步加载，并行加载)
css、html、图片
6. 垃圾回收 GC(Gabage Collection)

• js中的垃圾回收：(宿主环境)
  
  • 浏览器会自动回收垃圾
• 底层语言不会自动回收垃圾

垃圾的评判标准：生存周期
生存周期：作用域

• 全局变量：生存周期长，直到浏览器关闭时清除 占资源
• 局部变量：生存周期短，方法调用完即清除
• 闭包(子函数可以使用父函数的全局变量)

子函数若没有释放，整条作用域链上的局部变量都会保留
作用域链：从内一级一级往外找，知道全局
7. 递归
函数自己调用自己
核心思想：化大为小，逐一解决

斐波那契数列(Fibonacci sequence)
以递归的方法定义：
F0=0，F1=1，Fn=F(n-1)+F(n-2)（n>=2，n∈N*

原文地址