1.用户体验和性能优化的理解
html部分:
a、要避免代码的深层级嵌套。因为层级越深的节点在初始化时更占内存。
b、尽量不要使用h5摒弃的iframe标签,因为在页面加载的时候iframe标签会阻塞父文档onload事件的触发,这恰恰影响了初始化UI
c、诸如img、link、script等元素的src或href属性的值不为空,因为就算我们写为src=""浏览器仍会发送http请求
d、为页面中的图片设置宽高,这样做的好处是在页面加载完前就完成了布局,如若未指定宽高,在图片加载后还要调整其大小,影响时间。
e、在html文档开始就指定文档字符集,这样做的目的是在有助于浏览器加载时就能立即解析html代码
f、标签语义化的使用
css部分:
a、将样式表置顶,这样做的好处是文档加载完毕之前样式就已经加载完,不用等页面加载完毕后再重新加载样式
b、避免使用css表达式
c、使用外部css并且精简css,移除无用的css样式
d、避免使用filter滤镜:这种滤镜的使用会导致图片在下载的时候阻塞网页绘制,另外使用这种滤镜会导致内存使用量的问题。IE9中已经不再支持。
e、用link来代替@important
f、少用id,!important,用class
g、公共样式抽取,减少冗余的,重复的样式
h、CSS3 模拟图像,图标base64(降低请求数)
js部分:
a、将脚本置底,避免script标签加载的时候页面等待加载
b、使用外部脚本以及精简后的去除重复的脚本
c、尽量减少dom访问,在《高性能JavaScript》中这么比喻:“把DOM看成一个岛屿,把JavaScript(ECMAScript)看成另一个岛屿,两者之间以一座收费桥连接”。所以每次访问DOM都会教一个过桥费,而访问的次数越多,交的费用也就越多。所以一般建议尽量减少过桥次数。
d、使用json格式来进行数据交换,因为JSON是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript原生格式,这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。
e、尽量减少js文件的数量
f、尽量减少多余的代码,公共的代码进行封装
g、尽量减少全局变量,全局方法的定义
h、用setTimeout来避免页面失去响应
i、多个变量合并声明
j、启用 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方面:
1. 使用CDN
2. 添加Expires或者Cache-Control响应头
3. 对组件使用Gzip压缩
4. 配置ETag
5. Flush Buffer Early
6. Ajax使用GET进行请求
7. 避免空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小并且可缓存
移动方面:
1. 保证组件小于25k
2. Pack Components into a Multipart Document