优化

项目做过哪些性能优化？

减少 HTTP 请求数
减少 DNS 查询
使用 CDN
避免重定向
图片懒加载
减少 DOM 元素数量
减少DOM 操作
使用外部 JavaScript 和 CSS
压缩 JavaScript 、 CSS 、字体、图片等
优化 CSS Sprite
使用 iconfont
字体裁剪
多域名分发划分内容到不同域名
尽量减少 iframe 使用
避免图片 src 为空
把样式表放在link 中
把JavaScript放在页面底部

如何进行网站性能优化

• content方面

减少HTTP请求：合并文件、CSS精灵、inline Image
减少DNS查询：DNS缓存、将资源分布到恰当数量的主机名
减少DOM元素数量

• Server方面

使用CDN
配置ETag
对组件使用Gzip压缩

• Cookie方面

减小cookie大小

• css方面

将样式表放到页面顶部
不使用CSS表达式
使用<link>不使用@import

• Javascript方面

将脚本放到页面底部
将javascript和css从外部引入
压缩javascript和css
删除不需要的脚本
减少DOM访问

• 图片方面

优化图片：根据实际颜色需要选择色深、压缩
优化css精灵
不要在HTML中拉伸图片

渲染优化

• 禁止使用iframe（阻塞父文档onload事件）

iframe会阻塞主页面的Onload事件
搜索引擎的检索程序无法解读这种页面，不利于SEO
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript
动态给iframe添加src属性值，这样可以绕开以上两个问题
禁止使用gif图片实现loading效果（降低CPU消耗，提升渲染性能）

• 使用CSS3代码代替JS动画（尽可能避免重绘重排以及回流）

• 对于一些小图标，可以使用base64位编码，以减少网络请求。但不建议大图使用，比较耗费CPU

小图标优势在于减少HTTP请求避免文件跨域修改及时生效

• 页面头部的 会阻塞页面；（因为 Renderer进程中 JS线程和渲染线程是互斥的）

• 页面中空的 href 和 src 会阻塞页面其他资源的加载 (阻塞下载进程)

• 网页gzip，CDN托管，data缓存 ，图片服务器

• 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

• 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能

• 当需要设置的样式很多时设置className而不是直接操作style

• 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作

• 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳

• 对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO

一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

• 图片懒加载，在页面上的未可视区域可以添加一个滚动事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
• 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
• 如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
• 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
• 如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

base64的原理及优缺点

https://blog.csdn.net/fightingitpanda/article/details/83305100

含义

Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来标识二进制数据的方法。
Base64是一种可逆的编码方式，是一种用64个Ascii字符来表示任意二进制数据的方法。
主要用于将不可打印字符转换为可打印字符，或者简单的说将二进制数据编码为Ascii字符，

用处

1.Base64一般用于在HTTP协议下传输二进制数据，由于HTTP协议是文本协议，所以在HTTP写一下传输二进制数据需要将二进制数据转化为字符数据，
网络传输只能传输可打印字符，
在ASCII码中规定，0-31、128这33个字符属于控制字符，
32~127这95个字符属于可打印字符
那么其它字符怎么传输呢，Base64就是其中一种方式，
2.将图片等资源文件以Base64编码形式直接放于代码中，使用的时候反Base64后转换成Image对象使用。

• 优点:可以将二进制数据转化为可打印字符，方便传输数据，对数据进行简单的加密，肉眼安全。
• 缺点：内容编码后体积变大，编码和解码需要额外工作量。

重绘重排含义及如何避免

http://mengyujing.com/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E9%87%8D%E7%BB%98%E4%B8%8E%E9%87%8D%E6%8E%92/

含义

• DOM的变化影响到了元素的几何属性（宽高）,浏览器重新计算元素的几何属性，其他元素的几何属性和位置也会受到影响，浏览器需要重新构造渲染树，这个过程称为重排，浏览器将受到影响的部分重新绘制到屏幕上的过程称为重绘。

引起重排的原因有

• 添加或者删除可见的DOM元素，
• 元素位置、尺寸、内容改变，
• 浏览器页面初始化，
• 浏览器窗口尺寸改变，重排一定重绘，重绘不一定重排，
• 获取会导致渲染队列刷新的属性（offset- client- scroll-）

减少重绘和重排的方法：

• 不在布局信息改变时做DOM查询
• 使用cssText或者className一次性改变属性
• 使用fragment
• 对于多次重排的元素，如动画，使用绝对定位脱离文档流，让他的改变不影响到其他元素

PNG\GIF\JPG的区别及如何选

GIF

8位像素，256色
无损压缩
支持简单动画
支持boolean透明
适合简单动画
JPEG

颜色限于256
有损压缩
可控制压缩质量
不支持透明
适合照片
PNG

有PNG8和truecolor PNG
PNG8类似GIF颜色上限为256，文件小，支持alpha透明度，无动画
适合图标、背景、按钮

Service Worker

https://juejin.im/post/5d26aec1f265da1ba56b47ea
Service workers 本质上充当Web应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理。它们旨在（除其他之外）使得能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步API

目前该技术通常用来做缓存文件，提高首屏速度

// 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");
    })
  );
});