闰土月下追猹

安装：npm install --save-dev webpack-bundle-analyzer在vue.config.js中配置：const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports = { chainWebpack: config => { // 打包分析 if (process.env.IS.

从一次报错说起Vue项目开发中安装使用了一个富文本编辑器插件vue-html5-editor，页面安装使用之后出现如下错误：错误中提示，该插件使用的编译模式和项目中默认使用的编译模式不一样，即插件使用的编译模式是Runtime Compiler，而项目默认使用的是Runtime Only，因此就出现了上述问题。Runtime Only我们在使用 Runtime Only 版本的 Vue.js 的时候，通常需要借助如 webpack 的 vue-loader 工具把 .vue 文件编译成 Jav

去搭建好的Sentry上，新建一个项目安装依赖包@sentry/browser# Using yarn$ yarn add @sentry/browser# Using npm$ npm install @sentry/browser安装依赖包sentry/integrations# Using yarnyarn add @sentry/integrations# Using npmnpm install @sentry/integrationsmain.j..

问题描述项目换成了@vue/cli 3.x之后，有些资源的加载有些异常，登录的时候会加载内页的CSS和js，不知道是不是路由懒加载配置出了问题，还是Vue-cli 3.0配置有问题。问题原因Webpack默认开启了“prefetch”选项，即预载功能，可以在配置中关闭module.exports = { chainWebpack: config => { config.plugins.delete('prefetch') }}也可以在需要的页面上面打开此功能。impo

Vue.js生命周期uni-app生命周期除了Vue.js的生命周期外，uni-app增加了页面生命周期和应用生命周期。应用生命周期：页面生命周期：组件生命周期：uni-app不同端生命周期支持情况：相关文章详解vue生命周期...

This talk is about how Chrome turns web content into pixels. The entire process is called “rendering”.We’ll describe what we mean by content, and what we mean by pixels, and then we’ll explain the magic in between.这个演讲主要介绍chrome是如何把web content转成像素点的，整.

场景再现业务中需要为一组iview日期选择器（开始日期+结束日期）添加一个验证，开始日期小于等于结束日期。两个日期选择器的比较函数中，需要将两个输入的字符串类型的日期（2019-03-13）转换为日期格式，然后通过>和<进行日期的比较遇到的问题字符串格式的日期’2019-03-13’用new Date()转换成日期格式的时候会自动加上了08:00:00，iview选择日期之后，默认转成date类型的日期，同时加上了时间，但是是从00:00:00开始，这样第一次选择一个日期

示例 let device = { name: '设备1', code: '867725031691391', date: '1525835791000' } const obj = (({name, date}) => ({name, date}))(device) console.log(obj) // { name: '设备1', date: '1525835791000' } let { code

官网????实例 <% if (user) { %> <h2><%= user.name %></h2> <% } %>????用法 var template = ejs.compile(str, options); template(data); // => 输出绘制后的 HTML 字符串 ejs.render(str, data, options); // =

优势之处固定或者弹性的轨道尺寸无论在水平方向还是竖直方向都能够做到自适应定位项目每一个组件都能作为一个项目被定位到相应的位置上面去创建额外的轨道来保存内容对齐控制和Flexbox相似控制重叠内容可以像z-index一样控制重叠Grid VS FlexboxFlexbox是一维布局，只能在一条直线上放置内容区块，Grid是一个二维布局，根据设计需求将内容块放置到任何地方Flexbox可以和Grid很好的配合使用，页面整体使用Grid布局，局部使用Flex

概览消息堆叠如果控制台输出的消息连续重复，而不是在新行上输出每一个消息实例，控制台将“堆叠”消息并在左侧外边距显示一个数字，此数字表示该消息已重复的次数。如果想要输出的每一个条目都单独展示，可以在DevTools设置中启用Show timestamps此时，每一条消息都会有一个时间戳，且会各自占用一行。保留历史记录启用控制台顶部的Preseve log可以在页面刷新或更改之间保留控制台历史记录。 消息将一直存储，直至您清除控制台或者关闭标签。或者通过在控制台点击鼠标右键，选择save

安装yum i nodejs -y安装Node.jsnpm i -g n版本升级安装最新版$ n latest安装指定版本$ n 8.11.3切换nodejs版本$ n选择已安装的版本 ο node/8.11.3 node/10.4.1查看当前版本node -v，下面表示已切换成功v8.13.3切换后，查看版本还是原来的v6.13.3，看下面 使用n切换nodejs版本失效的解决办法切换失效的解决办法查看node当前安装路径$ which node/u

Attention Seekers（晃动效果）bounceflashpulserubberBandshakeswingtadawobblejelloheartBeatBouncing Entrances（弹性缓冲效果-入场）bounceInbounceInDownbounceInLeftbounceInRightbounceInUpBouncing Exits（弹性缓冲效果-退场）bounceOutbounceOutDown

相关概念测试方法 黑盒测试黑盒测试一般也被称为**功能测试**，黑盒测试要求测试人员将程序看作一个整体，不考虑其内部结构和特性，只是按照期望验证程序是否能正常工作。黑盒测试更接近用户使用的真实场景，因为对于用户来说，程序的内部是不可见的。常用测试方法：* **等价类划分**等价类划分主要是在已有输入规则的情况下，确定合法输入与非法输入区间来设计测试用例如：如网站登录密码必须由6位数字构成有效等价类：6位数字无效等价类：位数>6，位数<6，全角数字，字母、特殊字

您可能已无数次听人提及性能的重要性，以及网页应用的运行速度十分关键。但是，当您尝试回答“我的应用有多快？”这个问题时，您就会意识到，“快”是一个很模糊的概念。 我们所谓的“快”究竟是指什么？其情境为何？ 为谁提供高速度？相关视频： Shubhie Panicker 在 Google I/O 2017 上就此主题发表的演讲讨论性能时务求精确，以免产生误解或散布谬见，从而导致出于善意的开发者朝着错误的方向优化，最终影响而非改善用户体验。例如，我们现在常常听到人们这样说：我已经测试我的应用，加载时间

如果您发现自己在控制台中重复运行相同的代码，请考虑将代码保存为代码片段。Snippets是您在“源”面板中创作的脚本。他们可以访问页面的JavaScript上下文，您可以在任何页面上运行他们。Snippets是书签的替代。火狐开发工具有一个类似于代码片段的特性，叫做草稿栏。例如，图1在左边显示了开发工具主页，在右边显示了一些代码片段源代码。图1。运行代码片段前页面的外观。下面是图1中的代码片段源代码:console.log('Hello, Snippets!');document.body.i

如何用 Vue 实现前端权限控制

原文：Speed Up JavaScript Execution

原文：Timeline Event Reference

原文：Performance Analysis Reference[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-djQXQOp9-1606201247311)(https://images.fengjiaheng.top/images/20190827/04/01-record.svg)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FZG7T8Qf-1606201247313)(https://images.fengjiaheng..

原文：Analyze Runtime Performance

原文：Optimize Website Speed With Chrome DevTools这篇文档将会帮助你让你的网站应用加载更快，继续阅读或者查看本文章的视频版本。https://youtu.be/5fLW5Q5ODiE写在前面：你必须有基础Web开发经验，类似于 Introduction to Web Development class 里面说的一样。不需要了解任何关于加载性能的知识，因为你将会在本篇教程里面学会这些。做个介绍：这是Tony，Tony是在社交网络上非常有名的一只.

原文：Get Started With Analyzing Runtime Performance开始动手在本教程中，你将在实时页面上打开开发工具，并使用性能面板来查找页面上的性能瓶颈。以匿名模式打开谷歌浏览器。匿名模式确保Chrome在无其他干扰的状态下运行。例如，如果你安装了许多插件，这些插件可能会在你的性能监测中产生结果干扰。在匿名窗口中打开后面给出的链接页面。你可以用这个页面作为一个实践小demo。这个网页上展示了一堆上下移动的蓝色小方块。https://googlechrome.g.

先看下图，如果对图中的(a)(b)©(d)四个过程的处理方式都很清楚了，那么请不用再看本文了。两个概念强缓存用户发送的请求，直接从客户端缓存中获取，不发送请求到服务器，不与服务器发生交互行为。协商缓存用户发送的请求，发送到服务器之后，由服务器判定是否从缓存中获取资源。两者共同点客户端获得的数据最后都是从客户端缓存中获得。两者的区别从名字就可以看出，强缓存不与服务器交互，而协商缓存则需要与服务器交互。四个过程详解浏览器判定是否有缓存先理解个概念，所谓客户端缓存，就是用户设备中本地资

相关资料三分钟看完JavaScript原型与原型链JavaScript’s Pseudo Classical Inheritance diagramJavascript inheritance behind the scene proto, ‘prototype’ and prototype我来重新学习 javascript 的面向对象（part 4）...

Impress.js官网GitHubDeck.js官网GitHubTacion.js官网GitHubFathom.js官网GitHubReveal.js官网GitHubPresenteer.js官网GitHubJmpress.js官网GitHubDZ Slides官网GitHubPerkele.js官网GitHubHTML Slidy官网

字体使用字体压缩完整的字体库文件对于Web应用来说太过庞大解决方案一：字蛛所谓字体库，就是要包含尽可能多的字体，其实应用中可能根本用不到这么多，这时候就可以使用字蛛压缩一下，它会识别html中的所有用到该字体的文字，去除没有用到的字体。使用方法：安装npm install font-spider -g把所有可能用到的字体都写到一个html文件index.html中，同时用CSS设置引入并使用外部字体 /*声明 WebFont*/ @font-face { font-f

引子相关资料拿JS异步函数返回值的几种方式Javascript异步调用时，回调函数内用到了函数外的变量，这些变量应该怎么保护？

引子日常开发中之所以使用数据mock工具生成数据，大致有以下几种原因，直接把假数据写入代码中（所谓开发侵入），数据写死，不便于修改。还有团队协作，没有约定，前后端不能准确描述接口长什么样。还有就是手写假数据没有规则，就不能批量生成大量数据，靠手工肯定不行。或者不单单是开发使用，也可以测试，或者其他用到数据的地方。下面有些工具，简单聊一下，具体使用看文档就可以了。YApi官网GitHub来自去哪网，基于mock.js语法规则，也可自定义规则，功能强大，适合团队协作使用，出现比较晚，吸收了Nei、E

相关资料三分钟看完JavaScript原型与原型链JavaScript’s Pseudo Classical Inheritance diagramJavascript inheritance behind the scene proto, ‘prototype’ and prototype我来重新学习 javascript 的面向对象（part 4）...

字体使用字体压缩完整的字体库文件对于Web应用来说太过庞大解决方案一：字蛛所谓字体库，就是要包含尽可能多的字体，其实应用中可能根本用不到这么多，这时候就可以使用字蛛压缩一下，它会识别html中的所有用到该字体的文字，去除没有用到的字体。使用方法：安装npm install font-spider -g把所有可能用到的字体都写到一个html文件index.html中，同时用CSS设置引入并使用外部字体 /*声明 WebFont*/ @font-face { font-f

服务器准备Linux版本：Centos 7.6Docker安装清理Dockersudo yum remove docker \ docker-client \ docker-client-latest \ docker-common \ docker-latest \ docker-latest-logrotate \ docker-logrotate \ docker-selinux \

单点登录原理与简单实现

引子相关资料拿JS异步函数返回值的几种方式Javascript异步调用时，回调函数内用到了函数外的变量，这些变量应该怎么保护？