前端新能优化

有没有做过性能优化，怎么性能优化（具体措施有哪些），怎么确定要从什么方面优化

传输数据时间优化

页面加载时间优化

怎么确定首屏加载时间

  1. 设置缓存，浏览器缓存，http缓存，cdn缓存，nginx缓存等
  2. 压缩代码（css，js，html）
  3. 使用gzip（nginx设置）
  4. dns预解析 <link rel='dns-prefetch' href='#'>（不能滥用，对多页面使用dns预解析，会增加dns查询数）
  5. 优化代码（合理的拆分代码），减少dom操作（合理布局，减少重绘和回流）与优化js逻辑, (例如使用vnode，代码解耦)

1）使用 translate 替代 top
2）使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局）
3）把 DOM 离线后修改，比如：先把 DOM 给 display:none (有一次 Reflow)，然后你修改100次，然后再把它显示出来
4）不要把 DOM 结点的属性值放在一个循环里当成循环里的变量

for(let i = 0; i < 1000; i++) {
// 获取 offsetTop 会导致回流，因为需要去获取正确的值
console.log(document.querySelector('.test').style.offsetTop)

}
5）不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
6）动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用 requestAnimationFrame
7）CSS 选择符从右往左匹配查找，避免 DOM 深度过深
8）将频繁运行的动画变为图层，图层能够阻止该节点回流影响别的元素。比如对于 video 标签，浏览器会自动将该节点变为图层。

  1. 合理分配http请求
  2. 多域名并行请求资源，增加cdn
  3. 使用异步js，css等
  4. 使用首屏加载，懒加载和预加载
  5. 合理缓存数据和不常变动的资源，使用浏览器的localStoage与sessionStorage，或者indexDB等
  6. js事件的节流与防抖

  7. 使用 service worker，缓存文件，提高首屏速度

    // index.js
    if (navigator.serviceWorker) {
    navigator.serviceWorker

    .register("sw.js")
.then(function(registration) {
console.log("service worker 注册成功");
})
.catch(function(err) {
console.log("servcie worker 注册失败");
});

    }
    // sw.js
    // 监听 install 事件，回调中缓存所需文件
    self.addEventListener(“install”, e => {
    e.waitUntil(

    caches.open("my-cache").then(function(cache) {
return cache.addAll(["./index.html", "./index.js"]);
})

    );
    });

    // 拦截所有请求事件
    // 如果缓存中已经有请求的数据就直接用缓存，否则去请求数据
    self.addEventListener(“fetch”, e => {
    e.respondWith(

    caches.match(e.request).then(function(response) {
if (response) {
    return response;
}
console.log("fetch source");
})

    );
    });

  8. 优化图片等资源，例如使用webp，雪碧图等

1）CSS或者svg 去代替可以替代的图片
2）小图使用 base64 格式
3）选择正确的图片格式：
使用雪碧图

对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量，缺点就是兼容性并不好

小图使用 PNG，其实对于大部分图标这类图片，完全可以使用 SVG 代替

照片使用 JPEG

  1. 执行 JS 代码过长会卡住渲染，对于需要很多时间计算的代码可以考虑使用 Webworker。Webworker 可以让我们另开一个线程执行脚本而不影响渲染或者可以考虑切片，把每分js异步切片，尽量使之运行时间小于16ms

  2. chorme开发者工具，cmd + shift + p，搜索coverage，可以看到哪些代码没有用到