苏南

引言　今天我们来聊聊Mock，随着互联网发展，这两年前后端分离的开发模式兴起，Mock也从以住的幕后走上了台面，让更多的人而得知，以前传统的开发方式Mock大多局限在后端人员接触较多一些。　Mock已经是老生常谈了，网上一搜索就很多，各位前辈们都讲的很到位，但今天我只讲它——easy-mock。　为什么会突然来聊它，这个就说来话长了，个人简介里就说过，专注于分享工作中遇到的坑，但这一次不是我的坑，来源于QQ群友（# 如果您有想知道的故事，而正好我也会，那么就由我为您讲出来吧，欢迎留言哦 # ），请看下图：这里是@IT·平头哥联盟，我是首席填坑官—苏南,用心分享 做有温度的攻城狮。什么是Mock　什么是Mock?? Mock其实就是真实数据存在之前，即调试期间的代替品，是个虚拟的存在，用人话讲它就是个备胎，如女生长的好看，追她的人多，但又不是很满意但也不拒绝，在自己心仪的小哥哥出现之前，一直吊着你????！如何Mock数据？不要告诉我 new 一个哦，对象可以 new，备胎可new不出来呢????；方法一：最low的方式将 Mock 数据写在代码里、json文件里；方法二：利用 Charles 、Fiddler等代理工具，将 URL 映射到本地文件；方法三：本地起 Mock Server，即mockjs，有点麻烦每次修改了后还要重启服务，nodemon能解决，但开的东西多了，电脑卡出翔，维护也麻烦；方法四：规范些的公司自己已经集成了一套mock数据体系；重点来了：easy-mock一个在线 Mock 平台，活儿好又性感是你备胎的最佳选择。当然优秀的你可能还有很多其他的方式，欢迎补充。//mock 基本使用示例import Mock from “mockjs”;Mock.mock({ “code”: 0, “message”: “请求成功”, “data|20”: [{ “name”: “@cname”,//cname 中文，name 英文 “userId”: “@id”, “lastDate”: “@datetime” }]})什么是easy-mock，能给我们带来什么？Easy Mock 是一个可视化，并且能快速生成 模拟数据 的持久化服务，Easy Mock 支持基于 Swagger 创建项目，以节省手动创建接口的时间；简单点说：Easy Mock就是一个在线创建mock的服务平台，帮你省去你 配置、安装、起服务、维护、多人协作Mock数据不互通等一系列繁琐的操作， 它能在不用1秒钟的时间内给你所要的一切，呼之即来、挥之即去的2018最优秀备胎没有之一，完全不用担心负任何责任哦。更多优点它在等你去发现哦……深入浅出 - 简介就跟人一样长的再好看，了解过后才懂，一样东西也是如何，谁用谁知道；Easy Mock支持团队协作，也可以是个人项目，以下以个人项目为例，与多人协作没有区别，只是少了成员邀请；深入浅出 - Mock语法回顾@ip -> 随机输出一个ip；@id -> 随机输出长度18的字符，不接受参数；“array|1-10” -> 随机输出1-10长度的数组，也可以直接是固定长度；“object|2” -> 输出一个两个key值的对象，"@image()" 返回一个占位图url，支持size, background, foreground, format, text；等等，这里就不再一一介绍。深入浅出 - 创建一个接口它的写法，跟Mock.js一模一样,上面代码已经展示过，更多示例使用Easy Mock创建一个接口，请看下图：深入浅出 - 高阶用法 Function在线编辑，它也能支持 function ，是不是很优秀，能获取到全部请求头，可以让我们像写在js里一样写逻辑，写运算，当然它肯定是还有很多局限性的，如并不支持ES6，有一点需要注意的是 function 里要写传出Mock对象，不能直接@…，来看示例：对象描述MockMock 对象_req.url获得请求 url 地址_req.method获取请求方法_req.params获取 url 参数对象_req.querystring获取查询参数字符串(url中?后面的部分)，不包含 ?_req.query将查询参数字符串进行解析并以对象的形式返回，如果没有查询参数字字符串则返回一个空对象_req.body当 post 请求以 x-www-form-urlencoded 方式提交时，我们可以拿到请求的参数对象…_req.cookies、ip、host等等，我只是一个代码的搬运，更详细请看这里//简单模拟登录，根据用户传入的参数，返回不同逻辑数据{ defaultName:function({_req}){ return _req.query.name; }, code: function({_req}){ return this.defaultName ? 0 : -97; }, message: function({_req}) { return this.defaultName ? “登录成功” : “参数错误”; }, data: function({req,Mock}){ return this.defaultName ? { token: Mock.mock("@guid()"), userId: Mock.mock("@id(5)"), cname: Mock.mock("@cname()"), name: Mock.mock("@name()"), avatar: Mock.mock("@image(200x100, #FF6600)"), other:"@IT·平头哥联盟-首席填坑官∙苏南 带你再谈Mock数据之easy-mock" }:{} }}深入浅出 - 在线调试再优秀的工程师写出的代码也一样要测试，没有人敢说自己的代码无Bug，Easy Mock 它是真的懂你的，已经为你准备好了，接口编写好后，立马就能让你测试，是不是觉得很棒棒呢？？如果是你自己本地写mock数据，你需要重启服务、手动写参数、可能还需要整个测试页，知道你已经非常饥渴迫切的想要知道，具体的调试方式了：看不清吗？？已经为你备好在线调试链接，支持POST、GET、PUT等方式，因gif图加载比较大，就不一一演示了结尾：　天下无不散之宴席，又到说再见的时候了，以上就是今天苏南为大家带来的分享，您GET到了吗？Easy Mock更多强大之处自己去折腾吧，#用心分享 做有温度的攻城狮#，希望今天的分享能给您带来些许成长，如果觉得不错记得点个赞哦，，顺便关注下方公众号就更棒了呢，每周为您推最新分享????????。更多文章：immutability因React官方出镜之使用总结分享！小程序项目之做完项目老板给我加了6k薪资～小程序项目之填坑小记面试踩过的坑，都在这里了～你应该做的前端性能优化之总结大全！如何给localStorage设置一个过期时间？动画一点点 - 如何用CSS3画出懂你的3D魔方？动画一点点 - 手把手教你如何绘制一辆会跑车SVG Sprites Icon的使用技巧作者：苏南 - 首席填坑官链接：https://blog.csdn.net/weixin…交流群：912594095、公众号：honeyBadger8本文原创，著作权归作者所有。商业转载请联系@IT·平头哥联盟获得授权，非商业转载请注明原链接及出处。 ...

引言 大家好，这里是@IT·平头哥联盟，我是首席填坑官——苏南(South·Su)，今天是国庆节的第二天，这个假期没有外出(不要问我为什么，自己脑补～????)，前些天分享了一篇前端面试汇总的文章，有些同学在群里问了其中的一些细节，其中大家最关心的性能优化这块，今天整理了公司项目中的一些认为不错的点，跟大家一起分享，如有理解错误，请纠正。优化概括1、首先最基本的，CSS样式表放在页面头部Head内且link链式引入，javascript放在底部body结束标签前避免阻塞。2、js/html/css/图片都做压缩合并，图片预加载、懒加载，也是老生常谈了，在这里推荐一个图片无损极限压缩的工具，能压小60～80%左右,比较麻烦的是每次要手动操作——TinyPNG，有兴趣的同学了可以了解一下他们的API，自己封装一个服务调用压缩，不过免费次数有限制哦。3、减少DOM元素数量，减少DOM的操作：减少 DOM 元素数量，合理利用:after、:before等伪类，避免页面过深的层级嵌套;优化javascript性能,减少DOM操作次数(或集中操作)，能有效规避页面重绘/重排;如何才算少？抱歉，这个没有办法给出一个标准精确的答案，只能说尽可能去做优化，如数据分页、首屏直出、按需加载等。4、静态资源CDN分发：CDN的意图就是尽可能的减少资源在转发、传输、链路抖动等情况下顺利保障信息的连贯性；通俗的讲就是CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上———曾经人们都说距离产生美，后来变了都说距离产生小三，在这里距离产生的是用户跑路了，所以足以说明CDN的重要性；CDN采用各节点缓存的机制缓存很严重，当我们项目的静态资源(只是之前存放在cdn上的资源)修改后，如果CDN缓存没有做相应更新，则看到的还是旧的网页，解决的办法是刷新缓存，七牛云、腾讯云都可单独针对某个文件/目录进行刷新；广告常说：XX酒虽好，可不要贪杯哦，CDN托管也是如此，合理使用：图片、常用js组件、css重置样式等，即不常改动的文件即可走CDN，包括项目内的一些介绍页；img标签要设置高宽,同样这么做它也能减少页面重绘/重排，使用 WebP 格式图片，它能对原图(png)做到近98%压缩，当然它也不是完美的：WebP最初在2010年发布，目标是减少文件大小，支持无损、有损压缩，动态、静态图片，压缩比率优于 GIF、JPEG、JPEG2000、PNG 等格式，非常适合用于网络等图片传输，现在开始已经被越来越多的浏览器支持，当然 WebP 格式也有它的缺点，算法相对其他格式更加复杂，会在节省流量资源的同时会占用计算资源，对计算机造成更大的负担,WebP支持的像素最大数量是16383x16383。有损压缩的WebP仅支持8-bit的YUV4:2:0格式。而无损压缩（可逆压缩）的WebP支持VP8L编码与8-bit之ARGB色彩空间。又无论是有损或无损压缩皆支持Alpha透明通道、ICC色彩配置、XMP诠释数据，更详细支持说明:caniuse.com优势：体积小几乎可以毫不夸张的说，已经小的不能再小了；小而美的同时，还质量好，几乎看不出来与原图差别；曾经的动态图gif、jpeg压缩都会不清晰，但现在对它来说都是so easy～。缺点/困难：目前并不是所有浏览器都支持WebP，因此需要解决浏览器适配问题；<br/>对于已上线的项目，采用WebP需要替换大量图片，工作量太大(不确定后台程序是否能搞定)。5、域名拆分：什么叫拆分域名？很多公司初始项目搭建，都只申请了一个域名，站点的所有内容(html/php/jsp、js、css、img等都放在一个域名下)，域名拆分主要为了增加浏览器资源请求的并行度即并发问题，让浏览器能同时发起更多的请求，也解决了请求默认携带的cookie问题，减少了数据传输字节；如何拆分？以现在前后端分离式开发为例，建议分为三大类：前端类 - 项目业务本身的htm、css、js、图标/片等；静态类 - 即上述提到的CDN资源类；动态类 - 可归为后端API接口类；以下为各浏览器请求并发数，数据来源于chorme搜索，珍爱生命，远离某……????：浏览器HTTP/1.1HTTP/1.0Chrome66火狐66Safari44IE1166IE91010………………6、 减少http请求次数是的，你没有看错，就是减少http请求次数，节省网络请求时间，但你可能又会问，前面不是让拆分域名吗？？一个是部署拆分，一个是请求减少，没毛病哦；首先我们来了解一下http的请求过程（简单通俗的阐述一下）：DNS 域名解析 - 1. 拿出电话，找到某个接头人的号码；发起 TCP 的 3 次握手 - 2. 接通后暗号：A)、你好，你好，我是长江一号，请问能听到吗？B),你好，我是长江二号，能听到你讲话，你能听到我说什么吗？A)、能听到，我们开始讲正事吧……;正常数据传输中…… - 3. 聊的很嗨；结束传输断链的 4 次挥手 - 4. 聊完了，准备告别：A)、(可以是服务端，也可以是客户端)该说的我都说完了，你自己看着办吧；B)、好的我也说完了；B)、(B紧接着又跟A发了条信息)，再见；A)、然后A收到B的话，而B那边已经放下手机挂了，A等了一下听B没有再说啥，也就挂了(挂个毛啊，婊子无情，戏子无义，陪你唠嗑这么久，都不给个好评～????)；当然，现在的HTTP/2.0的处理有所不同，2.0过程还有TLS/SSL的处理，HTTP是超文本传输协议，信息是明文传输，HTTPS则是具有安全性的SSL(Certificate Authority，申请证书)加密传输协议,HTTPS加密传输、身份认证的网络协议,内容传输经过完整性校验、内容经过对称加密，每个连接生成一个唯一的加密密钥、第三方无法伪造服务端(客户端)身份等众多优势，同时也有劣势因为做的事情多了中间对接的次数同样需要时间，这也是HTTPS更慢的根本原因。上两图吧，这样大家看着清晰一些，但暂时只列了HTTP/1.0的，HTTP/2.0的图下次有时间再补，是有一个大佬指点我的哦，说这样看起来更骚气，大家会更喜欢，哈哈～：结论：从上面的这个过程可以看出，每一次请求都这么复杂，减少http的请求次数是不是很有必要呢？？答案是肯定的，我们会以以下几个维度来进行优化：合并 JS、CSS 文件；图片/图标 sprites 合并，或使用iconfont字体图标，或者SVG Sprites；什么是Svg Sprites?；资源按需加载，即当前页面用到什么，就加载什么，避免加载与当前页面无关的事情，这一点现在的React/Vue/Angular等MVVM框架，基于webpack编译打包工具，做的很好；前端数据的缓存（如：一个列表页，进入详情，再返回，这个用户的交互行为是很频繁的，可以对列表的数据进度一个缓存，不用每次返回都进行加载，比如5分钟更新一次。7、 数据设置缓存，好累写不动了，http缓存的设置，之前的面试汇总????如何设置http缓存？吧；8、 站点服务端开启Gzip压缩，当然还可以了解一下Brotli 或 Zopfli ，据说 Brotli 比 Gzip 和 Deflate更有效，有兴趣的同学可以了解一下；8、 避免重定向，尽量减少 iframe 使用，它会阻塞主页面的渲染;9、 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性);10、 合理使用dns-prefetch、prefetch、 preload、 defer、async：dns-prefetch：使用dns-prefetch对项目中用到的域名进行 DNS 预解析，减少 DNS 查询，如： <link rel=“dns-prefetch” href="//honeybadger8.github.io"/>；BAT各大巨头都是这么干的，请看下图，dns的详细解析过程今天先不讲了，码字码不动了，写分享比加班做项目还累，望体谅～；prefetch： 它是一个优先级非常低的资源加载标识，浏览器会在空闲时(即主进程资源加载完成后)下载带有 prefetch标识的资源并缓存到disk，在后续模块使用到这个文件的时候，会直接从缓存读取；该功能webpack有个插件，配置后编译能自动插入到页面上;preload：没错，它就是一个可以预加载资源的属性，详细说明请看官方API,一般情况下我们可能会对接下来的业务需要的audio、img、font、script等资源进行预先加载（甚至是下一个路由页面哦），这样能达到0秒打开页面的效果！暂时就想到这么多了，欢迎补充……总结：推荐几个工具：WebPagetest、Lighthouse、SpeedCurve、New Relic 等主动/被动监测工具，都能高效帮助我们分析发现问题的所在，从而对症下药;DNS预解析的是非重要的，它是一个url到解析IP，到查询根服务器的一个过程，可能会在下一次单独总结出来分享，有兴趣的同学也可以自行先了解一下，要把一个项目做好，每一个细节都很重要，希望今天的分享能给大家的工作带来些许帮助，谢谢！文章分享计划：　最近一直在思考，如何有规化的分享工作中的积累，国庆这些天也一直看了很多大神写的博客，最后综合自身的能力及时间，决定先尝试写一个# 动画 #系列文章，动画可能主要包含（CSS/Canvas）两部分，欢迎大家持续关注！　以上就是今天的分享，新手上路中，我会努力让自己变得更优秀、写出更好的文章，文章中有不对之处，烦请各位大神斧正。如果你觉得这篇文章对你有所帮助，请记得点赞哦～。作者：苏南 - 首席填坑官来源：@IT·平头哥联盟链接：https://honeybadger8.github.i…交流群：912594095[资源获取/交流群]、386485473(前端) 、260282062(测试)本文原创，著作权归作者所有。商业转载请联系@IT·平头哥联盟获得授权，非商业转载请注明原链接及出处。 ...