第三篇《性能优化》

减少体积

• 利用webpack等压缩工具（js压缩，css压缩，img压缩）
• 提供公共方法，第三方库
• gzip压缩
• http2

合理分配CDN资源和域名

每个游览器的同一域名下的在相同时间段内有一个最大连接数
合理分配不同的域名，可以让游览器更快的进行请求，不至于堵塞

缓存

网络资源，缓存，更快的进入页面
对第一次进入页面美业影响，对第二次及为需要更新时，影响最为明显
如果需要更新：
进入页面时判断当前版本号是否与所需版本号一致，不一致进行更新
还可以部分数据缓存，例如：localStorage

对资源进行后加载或者换种方法加载

瀑布流图片，懒加载，先出现骨架屏
webp图片，判断UA头，加载不同后缀的图片
兼容js可以判断UA头，进行加载
单页面应用按需加载

减少DNS查询

避免重定向

js性能提升

• 减少dom操作
• 避免阻塞
• 适当使用节流和防抖，可以提升很大的用户体验
• 动画优先考虑css动画
• 代码优化
  • 作用域

访问当前作用域之外的变量时间会增加，所以 访问全局变量总是比访问局部变量要慢，因为需要遍历作用域链。只要能减少花费在作用域链上的时间，就能增加脚本的整体性能。

​ // 通过创建一个指向document的局部变量，就可以通过限制一次全局查找来改进此函数的性能。function updateUI() {
var doc =  document,
imgs = doc.getElementByTagName("img");
for(var i = 0, len = imgs.length; i < len; i++) {
    imgs[i].title = doc.title + " image " + i;
}}

• 减少DOM操作

DOM操作应该是脚本中最耗性能的一类操作，例如增加、修改、删除 元素或者对 DOM集合进行操作。如果脚本中包含了大量的 DOM操作则需要注意

限制使用JavaScript来修饰网页布局，把针对访问元素的引用缓存起来。有时，当你的网站依赖大量的DOM改动时，就应该考虑限制你的标记。这

DOM操作还需要考虑浏览器的 Reflow和Repaint ，因为这些都是需要消耗资源的

对不同游览器区别对待

• babel-prollfill并不是所有游览器都需要的
• 还有目前有绝大多数的游览器已经支持语法
• 可以对不支持的使用不支持的语法
• 支持的使用支持的语法
• 一个是代码量减少，
• 一个是运行速度也会加快