性能优化之浏览器篇
把 Css 放在head 中加载
在浏览器解析完head 部分后、让浏览器知道需要引入哪些css文件，开始并行的去下载css资源，一边下载Css文件一边解析Html, 能够使页面更早的开始渲染
- 让页面更早的开始渲染、避免闪屏 （DOM 结构先加载出来，css慢了一拍 页面重新渲染）
- 最好能包含关键渲染路径的样式、首页的样式应该尽快的完成加载、提高用户体验
JS放在 body 标签结束前加载
js 资源的加载会阻塞 HTML 的解析 和 Css的渲染
不使用CSS 表达式
在css属性后使用 expression() 连接一段JavaScript表达式，css属性的值是JavaScript表达式的结果。
|
看似强大， 实际性能开销很大，可能导致页面卡顿
表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给 CSS 表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到 10000 次以上的计算量。
calc() 性能待验证
移除无匹配的样式
移除无匹配的样式，有两个好处：
删除无用的样式后可以缩减样式文件的体积，加快资源下载速度；
对于浏览器而言，所有的样式规则的都会被解析后索引起来，即使是当前页面无匹配的规则。移除无匹配的规则，减少索引项，加快浏览器查找速度；
用外链的方式引入css 和 js
- 通过使用外链可以减少html 文件的体积
- 作为外链文件、Css/Js 可以作为静态资源、通过合理的利用浏览器的缓存对需要的文件进行缓存； 在第二次访问时可以加快页面的加载速度
不要重复加载JS
- 在IE中，例如在加载一个jquery以后再加载一个jquery，仍然是算作两个不同的请求，不能发挥缓存的优势
- 重复加载js意味着更长的JS执行时间
用 Get 方式发起 Ajax 请求
- Get 方式可以缓存
- 如果是获取信息 Get 更加语义化
如果是提交数据 使用Post 更加语义化
组件延迟加载
规划页面中引用的姿态资源加载顺序、优先级的能力
保障关键页面资源的优先加载: 浏览器的并发数限制
在同一个域名下面，一般现代浏览器的并发数为6
按需加载 Lazyload 典型： 电商网站
在图片比较多的电商网站中，lazyload 十分实用 data-src -> src
避免在页面中使用iFrame
- 会阻塞父文档的
onload事件 - 即使是空白iFrame 也比较耗时
减少COOKIE体积
- COOKIE每次请求都会全都带上
COOKIE了解更多每次请求跟主文档相关的信息，所有的cookie都会带上
减少 JS 中的 DOM 访问
JS中对DOM 的访问是不可避免的, 但可以进行一下优化
- 对于查找到的元素， 先将其缓存在变量中
- 节点增加时合理利用
DocumentFragment - 不要用JS 去频繁修改样式
使用常见的图片优化手段
相比代码， 图片的体积很大
不要在HTML中缩放图片
在实际中使用什么尺寸的图片就提供多大尺寸的图片