前端性能内容及优化方案

1.用户体验和性能优化的理解

html部分：

1. 要避免代码的深层级嵌套。因为层级越深的节点在初始化时更占内存。
2. 尽量不要使用h5摒弃的iframe标签，因为在页面加载的时候iframe标签会阻塞父文档onload事件的触发，这恰恰影响了初始化UI
3. 诸如img、link、script等元素的src或href属性的值不为空，因为就算我们写为src=""浏览器仍会发送http请求
4. 为页面中的图片设置宽高，这样做的好处是在页面加载完前就完成了布局，如若未指定宽高，在图片加载后还要调整其大小，影响时间。
5. 在html文档开始就指定文档字符集，这样做的目的是在有助于浏览器加载时就能立即解析html代码
6.  标签语义化的使用

 

css部分：

1.  将样式表置顶，这样做的好处是文档加载完毕之前样式就已经加载完，不用等页面加载完毕后再重新加载样式
2.   避免使用css表达式
3. 使用外部css并且精简css，移除无用的css样式，减少css文件的数量并压缩代码
4. 避免使用filter滤镜：这种滤镜的使用会导致图片在下载的时候阻塞网页绘制，另外使用这种滤镜会导致内存使用量的问题。IE9中已经不再支持。
5. 用link来代替@important（因为link是异步，@import是同步）
6.  少用id，!important，用class
7. 公共样式抽取，减少冗余的，重复的样式
8. CSS3 模拟图像，图标base64（降低请求数）

 

js部分：

1. 将脚本置底，避免script标签加载的时候页面等待加载
2.  使用外部脚本以及精简后的去除重复的脚本
3. 尽量减少dom访问，在《高性能JavaScript》中这么比喻：“把DOM看成一个岛屿，把JavaScript(ECMAScript)看成另一个岛屿，两者之间以一座收费桥连接”。所以每次访问DOM都会教一个过桥费，而访问的次数越多，交的费用也就越多。所以一般建议尽量减少过桥次数。
4. 使用json格式来进行数据交换，因为JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript原生格式，这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。
5. 尽量减少js文件的数量并压缩代码（等于减少请求js的次数）
6. 尽量减少多余的代码，公共的代码进行封装
7. 尽量减少全局变量，全局方法的定义
8. 用setTimeout来避免页面失去响应
9.  多个变量合并声明
10. 启用 HTTP/2（多路复用，并行加载）

2.优化网站的性能

content方面：

1. 减少HTTP请求：合并文件、CSS精灵、inline Image
2. 减少DNS查询：DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方 法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询
3. 避免重定向：多余的中间访问
4. 使Ajax可缓存
5. 非必须组件延迟加载
6. 未来所需组件预加载
7. 减少DOM元素数量
8. 将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量
9. 减少iframe数量
10. 不要404

server方面：

• 使用CDN
• 添加Expires或者Cache-Control响应头
• 对组件使用Gzip压缩
• 配置ETag
• Flush Buffer Early
• Ajax使用GET进行请求
• 避免空src的img标签

cookie方面：

1. 减小cookie大小
2. 引入资源的域名不要包含cookie

css方面：

1.  将样式表放到页面顶部
2. 不使用CSS表达式
3. 不使用IE的Filter

Javascript方面：

1. 将脚本放到页面底部
2. 将javascript和css从外部引入
3. 压缩javascript和css
4. 删除不需要的脚本
5. 减少DOM访问
6. 合理设计事件监听器

图片方面：

1. 优化图片：根据实际颜色需要选择色深、压缩
2. 优化css精灵
3. 不要在HTML中拉伸图片
4. 保证favicon.ico小并且可缓存
5. 图片懒加载

移动方面：

1. 保证组件小于25k
2. Pack Components into a Multipart Document
    

补充：

1.减少闭包的使用、如果需要使用，需要在使用后，对该变量进行销毁。

2.尽量减少浏览器的重绘和重排。

3.避免JS的嵌套循环。

4.减少对css标签选择器的使用。css选择器的解析规则是从右向左解析。例如：

.container .link a{
    // 先找到所有的a, 再筛选是在.link样式类中的，再次筛选是在.container样式中...，先找到的是所有的a，操作起来是耗性能的，我们在使用css选择器的时候尽可能的减少对标签选择器的使用
}

5.页面初始化时，如果有音视频，需要在页面加载完成后，然后再加载音视频（如果同步加载会使页面加载速度变慢）。

方案：只需要设置preload='none'即可。

6.在js内减少递归的使用

7.css处理动画优于js，在动画方面如果css可以实现，优先使用css。