页面优化

今天再次看了一些网上关于页面优化的东东， 针对本公司有用的优化记录下（有些图片懒加载等等已经实现了的，就没记）

1. 将不经常改变的资源(例如jquery、各种lib库、插件等)全部合并压缩成一个文件，命名为vender.css、vender.js。经常改变上线的文件合并压缩成一个文件，命名为index.css，index.js,并且加上hash戳，index等文件每次上线内容基本都是会改变的，那么gulp自动构建后加上的hash戳也是不一样的，而vender类型不变，这样我们就能合理利用浏览器的缓存机制了。

2. 图片可以转base64或svg （分场景使用，小图标/icon使用base64效率一定更高，大图片使用默认方式加载，可以充分利用缓存，渲染解析效率高。）

3. 除了首屏dom元素之外,将所有的dom元素用一个template元素进行包裹，等window监听到load事件后，将剩余的dom部分全部插到页面中

4. DNS预读取 DNS请求需要的带宽非常小，但是延迟却有点高;

   在某些图片较多的页面中，在发起图片加载请求之前预先把域名解析好将会有至少 5% 的图片加载速度提升
   head标签里加上

   <link rel="dns-prefetch" href="https://data.dadaabc.com/">data.dadaabc.com为静态资源的域名，如还有其他链接的域名，都一起加进去

5. 同域下浏览器能并发的请求有限，为了增加并发，尤其是一些静态资源上，可以使用多个域名。但由于域名DNS解析本身也是耗时的，所以也不是越多越好，chrome最大支持6路并发，所以一般设置
   2-4个域名较为合适。（许多图片可以从不同的域名 pic1.xxxx.com pic11.xxxx.com pic21.xxxx.com 多个跳开请求）

6. 最小化回流和重绘

var ele = document.getElementById('myDiv');ele.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';

总结：同一个DOM的多个属性改变可以写在一起（减少DOM访问，同时把强制渲染队列刷新的风险降为0）

var fragment = document.createDocumentFragment();
var li = document.createElement('li');
li.innerHTML = 'apple';
fragment.appendChild(li);
document.getElementById('#ul').appendChild(fragment)

触发大量回调函数的事件 合理使用函数防抖和函数节流机制

7. CSS选择器的解析式其实是从右到左的，例如：

.div1 a { color: red}如上面的选择器，浏览器必须遍历查找所有的a元素，再去找类名为div1的元素，这样查找的方式显然很低效 （.div1 .red）