1.用户体验和性能优化的理解
html部分:
- 要避免代码的深层级嵌套。因为层级越深的节点在初始化时更占内存。
- 尽量不要使用h5摒弃的iframe标签,因为在页面加载的时候iframe标签会阻塞父文档onload事件的触发,这恰恰影响了初始化UI
- 诸如img、link、script等元素的src或href属性的值不为空,因为就算我们写为src=""浏览器仍会发送http请求
- 为页面中的图片设置宽高,这样做的好处是在页面加载完前就完成了布局,如若未指定宽高,在图片加载后还要调整其大小,影响时间。
- 在html文档开始就指定文档字符集,这样做的目的是在有助于浏览器加载时就能立即解析html代码
- 标签语义化的使用
css部分:
- 将样式表置顶,这样做的好处是文档加载完毕之前样式就已经加载完,不用等页面加载完毕后再重新加载样式
- 避免使用css表达式
- 使用外部css并且精简css,移除无用的css样式,减少css文件的数量并压缩代码
- 避免使用filter滤镜:这种滤镜的使用会导致图片在下载的时候阻塞网页绘制,另外使用这种滤镜会导致内存使用量的问题。IE9中已经不再支持。
- 用link来代替@important(因为link是异步,@import是同步)
- 少用id,!important,用class
- 公共样式抽取,减少冗余的,重复的样式
- CSS3 模拟图像,图标base64(降低请求数)
js部分:
- 将脚本置底,避免script标签加载的时候页面等待加载
- 使用外部脚本以及精简后的去除重复的脚本
- 尽量减少dom访问,在《高性能JavaScript》中这么比喻:“把DOM看成一个岛屿,把JavaScript(ECMAScript)看成另一个岛屿,两者之间以一座收费桥连接”。所以每次访问DOM都会教一个过桥费,而访问的次数越多,交的费用也就越多。所以一般建议尽量减少过桥次数。
- 使用json格式来进行数据交换,因为JSON是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript原生格式,这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。
- 尽量减少js文件的数量并压缩代码(等于减少请求js的次数)
- 尽量减少多余的代码,公共的代码进行封装
- 尽量减少全局变量,全局方法的定义
- 用setTimeout来避免页面失去响应
- 多个变量合并声明
- 启用 HTTP/2(多路复用,并行加载)
2.优化网站的性能
content方面:
- 减少HTTP请求:合并文件、CSS精灵、inline Image
- 减少DNS查询:DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方 法:DNS缓存、将资源分布到恰当数量的主机名,平衡并行下载和DNS查询
- 避免重定向:多余的中间访问
- 使Ajax可缓存
- 非必须组件延迟加载
- 未来所需组件预加载
- 减少DOM元素数量
- 将资源放到不同的域下:浏览器同时从一个域下载资源的数目有限,增加域可以提高并行下载量
- 减少iframe数量
- 不要404
server方面:
- 使用CDN
- 添加Expires或者Cache-Control响应头
- 对组件使用Gzip压缩
- 配置ETag
- Flush Buffer Early
- Ajax使用GET进行请求
- 避免空src的img标签
cookie方面:
- 减小cookie大小
- 引入资源的域名不要包含cookie
css方面:
- 将样式表放到页面顶部
- 不使用CSS表达式
- 不使用IE的Filter
Javascript方面:
- 将脚本放到页面底部
- 将javascript和css从外部引入
- 压缩javascript和css
- 删除不需要的脚本
- 减少DOM访问
- 合理设计事件监听器
图片方面:
- 优化图片:根据实际颜色需要选择色深、压缩
- 优化css精灵
- 不要在HTML中拉伸图片
- 保证favicon.ico小并且可缓存
- 图片懒加载
移动方面:
- 保证组件小于25k
- 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。