为什么说Vue是一个“渐进式”框架
每个框架都不可避免有自己的特点，对使用者有一定要求。使用vue可以在原有的大系统上面把一两个组件改用vue实现，也可以整个用全家桶开发。可以根据场景，官方提供了方便的框架供你使用。 场景1：管理后台，日常提交各种表单，可以把vue当作js库使用，用来收集form表单，和表单验证。 场景2： 大胆的把整个页面的DOm用vue管理，列表用v-for循环，把评论抽成组件。
import和require
- 导入require导出export/module.exports是commomJS的标准，通常适合范围如Node.js
- import/export是ES6的标准。
- require是赋值过程，运行时才执行-同步加载，全局方法任何地方都能执行。import是解构过程，编译时执行-异步加载，提升到模块头部。
- require性能相对于import稍低。
移动端适配-css尺寸
- rem方案,rem是一种相对单位，值是相对于根元素字体大小（font-size）来计算。灵活性高，针对不同的设备和屏幕尺寸进行适配。
- em方案，值相对于父元素字体大小计算，通过设置父元素字体大小来控制子元素大小
- Viewport方案，是移动设备上面的一个虚拟窗口，可以让网页在移动设备上更合适，，通过设置Viewport的宽度和缩放比例来适配不同的设备。....vw布局只需要一个插件即可把px转化成vw单位
尺寸px是绝对单位 量出来就是多少 em是相对单位 相对于父元素的font-size 一般是用来做首行缩进 text-indent:2em rem是相对单位，相对于html的font-size 一般是用来做移动端适配 vw,vh 它们是把视图分为100份，1vw就是视口宽度的百分之一 vh就是视口高度的百分之一 一般的用来做移动端适配 vmin,vmax vmin取宽和高最小值 vmax取最大值
绝对长度单位
- px--像素
- cm厘米，mm毫米，in英寸,pc,pt
相对长度单位
- 相对字体单位：ex，em,rem相对html节点字体。
- 相对视口：vh,vw相对视口宽度，相对视口高度，vmin,vmax相对视口宽高中较小，较大的值
Web前端存储方式总结
localStorage
本地存储
- 生命周期：保存到数据永远存在，除非手动删除
- 存放5mb
- 仅在浏览器中保存，不参与通信
- 原生接口可以直接使用
sessionStorage
也属于本地存储
- 5MB，仅在浏览器中保存，敏感账号一次性登录
- 仅在当前会话有效，关闭页面或者浏览器后会清除
两者使用
setItem,getitem,removeItem,clear,key(index)
cookie
IndexedDB
一种在浏览器端存储数据的方式，丰富了客户端的查询方式。 对象仓库-使用objectStore，是一个灵活的数据结构可以存放多种类型数据。 事务性-
前端性能优化
页面渲染
1.减少页面重绘和回流：
回流：主要是计算节点位置和几何信息。 重绘：重新绘制节点，将渲染树的每个节点转换为屏幕上的实际像素
- 减少css属性简写（css简写会把所有值初始化为initial，但是简写带来的性能影响微乎其微）
- 复杂的动画元素定位设置为fixed或absoulte,避免引起回流
- 创建多个DOM节点时，使用DocumentFragment一次性创建
- css3硬件加速（GPU加速）
2.图片压缩，图片分割，精灵图
- 图片压缩：很多图床工具自带压缩功能。
- 图片分割：不允许压缩时，可以将图片分割，再用css布局将图片拼接在一起
- 精灵图是将很多图片合并到一张大图里面，加载页面时候只需要加载一张图片，就可以加载处理所有页面与那苏，提升加载速度。使用background-position来移动背景图，显示我们想要显示出来的部分。缺点就是调整图片就牵一发而动全身
3.字体包压缩
- 一般为丰富页面效果引用字体包时，字体包体积大，加载页面会阻塞页面渲染，导致字体包加载完全显示文字。可以使用font-spider提取使用的文字。华人开发-主要思路是采集线上网页使用到的字体，从字体文件中分离出来，完成大幅度压缩
4.懒加载、预加载资源
- 懒加载-图片出现在浏览器可视区域时，才加载图片让其显示，在此之前就是将所有图片元素路径统一设置成一张1*1px 占位图。
- 实现Resource Hints的方法-资源预加载包括预连接，资源与获取，资源预渲染。
打包优化
webpack优化resolve.alias配置
- resolve.alias配置通过别名来将原导入路径映射成一个新的导入路径。1：起别名。2：减少查找过程。
webpack优化resolve.extensions配置。
- resolve.extensions。代表后缀尝试列表。会影响构建的性能，所以后缀尝试列表要尽可能的小，不把项目中不可能存在的情况写到后缀列表里，频率出现最高就要优先放前面。
webpack缩小loader范围
- loader很消耗性能，配置loader时，使用include和expect执行范围，优化性能
代码分包
总体优化
ssr服务端渲染
- 服务端渲染-指的是渲染过程在服务端完成，最终渲染结果HTML页面通过HTPP协议发送给客户端，又叫同构。
- 好处就是seo和首屏加载速度大大提升。目前流行的Vue.react 前端框架，都已推出SSR解决方案。vue-nuxt.js - react-next.js
