页面性能优化

博客地址：https://ainyi.com/15

在chrome浏览器，对于同一域名，最多支持6个请求的并发，其他请求会推入到队列中等待或停滞不前，直到6个请求之一完成后，队列中新的请求才会放出。

可以看到，六个绿色条并发请求，四个灰色条等待请求，最下面三个绿色条3.4s后才触发请求

1. html、css、js 代码压缩
2. 公共文件（js/css）合并、请求合并
3. 浏览器缓存（强缓存、弱缓存）
4. CDN（Content Delivery Network，内容分发网络）加速。通过将静态资源(例如javascript，css，图片等等）缓存到离用户很近的相同网络运营商的CDN节点上，不但能提升用户的访问速度，还能节省服务器的带宽消耗，降低负载（因此，一个地区内只要有一个用户先加载资源，在 CDN 中建立了缓存，该地区的其他后续用户都能因此而受益）
5. loading 动画
6. 页面骨架屏
7. 减少操作 dom 方法
8. 优化图片加载
9. 懒加载和预加载

减少操作 dom 方法

1. 插入大量dom元素时，可以使用innerHTML替代逐个构建元素
2. 处理列表子元素的事件时，可以使用事件委托

优化图片的加载

1. 图片懒加载，优先加载浏览器可视区域的图片
2. 小图片或图标，可用SVG、Iconfont、Base64等技术，多个图标也可以制作成雪碧图（CssSprites）
3. 加载时预先加载一张特别小的通用略缩图，正式图片加载完成后替换略缩图
4. 服务端根据业务需要可以对图片进行压缩 （不影响用户体验的情况下）
5. 为项目添加骨架屏
6. Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。可查看RFC2045～RFC2049，上面有MIME的详细规范。

懒加载原理

首先将页面上的图片的 src 属性设为空字符串或者一个加载中的图片，而图片的真实路径则设置在 data-original 属性中，

当页面滚动的时候需要去监听 scroll 事件，在 scroll 事件的回调中，判断我们的懒加载的图片是否进入可视区域，

如果图片在可视区内，将图片的 src 属性设置为 data-original 的值，这样就可以实现延迟加载

预加载

1. 纯 css 实现预加载
   不在浏览器可视范围内加载图片，直接 css 加载，
   但图片会随文档一起加载，此时可能会降低文档的加载速度
2. 纯 js 实现预加载
   js 脚本提前加载图片 src 或使用 image 对象提前加载图片
3. css 和 js 实现预加载
   如 img 标签最初设置为 display: none，要加载的时候显示
   或者滚动条到达可视范围内，js 为目标 div 加上这个已经加载好的 css 属性
4. ajax 预加载
   提前 ajax 请求获取数据
   场景有个 tab 标签页，当鼠标放到某个 tab，立刻 ajax 加载该 tab 的数据
   当点击这个 tab 标签页的时候，就可以立刻加载出来，再将数据缓存起来或加入全局变量，下一次使用直接从缓存读取

图片转为base64

1. 图片的 base64 编码就是可以将一幅图片的二进制编码成一串字符串，使用该字符串代替图像地址
2. 可以减少http请求，base64可以随着html的下载同时下载
3. 适用于小图片和简单图片

节点

element.parentNode 返回元素的父节点

element.childNodes 返回元素的一个子节点的数组

element.nodeName 返回元素的标记名（大写），用的时候转换小写（element.nodeName.toLowerCase()）

event.target：返回触发此事件的元素（事件的目标节点）

详看：https://www.cnblogs.com/ainyi/p/8794159.html

HTML DOM 元素对象：http://www.runoob.com/jsref/dom-obj-all.html

HTML DOM 事件对象：http://www.runoob.com/jsref/dom-obj-event.html

工作中对于广告编辑页的优化

优化加载速度 1.4s

优化的具体

1. 公共接口合并，减少 http 请求，后端做缓存
2. promise all 解决根据请求顺序顺序获取的问题（当前接口的数据展示需要依赖上一个接口数据的情景）旧版本是 若有依赖关系的接口，是等待上一个接口请求完毕，才发送当前接口请求
3. 数据预加载（第四个模块的数据默认收起，点击展开的时候预先加载。不用等待）
4. 公用数据下沉到领域模型，多个模块复用的数据，不用再次请求接口
5. 实现页面 MVC 结构 可看这里数据处理单独抽出来放在 service 层，（vuex mutation）
6. 数据处理（数据量很大的时使用数据字典，可以使用 obj.key 得到想要的数据，需要的数据 key 值与数据字段作关系映射）
7. 组件化、ESLint 代码规范，便于维护旧版本是 循环使用 if 等于需要的 key 来获取数据
8. for 循环的使用，数组循环使用 for of，对象使用 for in
9. 路由方面，使用路由懒加载
10. 一开始页面需要加载多条请求，在 axios 统一请求拦截加上loading，和接口请求计数器+1，统一响应拦截计数器-1，当等于零就关闭 loading
11. 渠道组件和多选省市级三级联动组件的优化（重写 Element 的穿梭框组件）具体看 关于 Element 组件的穿梭框的重构

博客地址：https://ainyi.com/15