莫问前程F1的博客

命名规范语义化：包括文件名，变量名，方法名，参数名、css选择器、path路径名，语义时应根据业务优先考虑通用的、熟知的、简洁的英文。如登录模块通常用login、logout、userName、phone、password、register、inviteCode等命名权限模块通常用user、role、function、menu等命名获取列表数据，常用getXXXList、getXXXs、getXXXData等命名获取详情数据：常用getXXX、getXXXInfo、getXXXDetail等

标记清除js中最常见的垃圾回收方式是标记清除标记清除的概念也好理解，从根部出发看是否能达到某个对象，如果能达到则认定这个对象还被需要，如果无法达到，则释放它，这个过程大致分为三步垃圾回收器创建roots列表,roots通常是代码中保留引用的全局变量，在js中，我们一般认定全局对象window作为root，也就是所谓的根部 从根部出发，检查所有的roots，所有的childs也会被递归检查，能从root到达的都会被标记为active 未被标记为active的数据被认定为不再需要，垃圾回收器开始

变量回收原则：1.全局变量不会被回收2.局部变量会被回收，也就是函数一旦运行完以后，函数内部的东西就会被销毁3.只要被另外一个作用域所引用就不会被回收两个实例：一function a(){　　var b= 10;　　return function(){　　　　b++;　　　　console.log(b);　　}}a()(); //11a()(); //11分析：在函数a中返回了一个匿名函数，在这个匿名函数中我们num++了一下，然后在函数外面执行了这个匿名函

1.js事件循环(同步=>异步(微运动=>宏运动))2.JS事件委托（事件冒泡，事件捕获）3.js闭包4.js作用域(var声明提交，const, let块级作用域，函数声明提升)5.原型和原型链(prototype和__proto__)6.this指向(指向调用对象的上下文环境，如果找不到，就指向window，严格模式是undefined)7.http和https的区别（证书机制，对称加密，非对称加密）8.浏览器渲染(三次握手，四次挥手，DNS..

API 参考使用绘图```js // 创建一个 Mapbox GL JS 地图var map = new Map ( mapOptions ) ; // 创建一个 Draw 控件var draw = new MapboxDraw ( drawOptions ) ; // 将 Draw 控件添加到您的地图map 。addControl （绘制）；``只画出Mapbox GL JS地图加载之后的作品，所以你必须只绘制互动后地图的’负荷’事件：```js地图。on(‘load’,function(){

前言在过去的几年中，得益于Node.js的兴起，JavaScript越来越广泛地用于服务器端编程。鉴于JavaScript语言已经走出了浏览器，程序员发现他们需要更多传统语言（比如C++和Java）提供的工具。这些工具包括传统的数据结构（如链表，栈，队列，图等），也包括传统的排序和查找算法。本文主要是总结什么情况下使用何种数据结构较好，并没有细讲里面的原理和实现方式，仅仅提供给阅读过《数据结构和算法》的同学作为总结和参考笔记，如果未细究过数据结构和算法的同学，本文也可以作为一个方向，希望能引导你去深究数

<button bindtap='startConnect'>创建连接</button><button bindtap='sendOne'>发送内容</button><button bindtap='closeOne'>关闭连接</button>//创建连接startConnect: function () { //本地测试使用 ws协议 ,正式上线使用 wss 协议 var url = 'ws://localho.

简要：整个在浏览器的渲染过程中（页面初始化，用户行为改变界面样式，动画改变界面样式等）reflow(回流)和repaint(重绘) 会大大影响web性能，尤其是手机页面。因此我们在页面设计的时候要尽量减少reflow和repaint。什么是reflow和repaint（原文链接：http://www.cnblogs.com/Peng2014/p/4687218.html）reflow：例如某个子元素样式发生改变，直接影响到了其父元素以及往上追溯很多祖先元素（包括兄弟元素），这个时候浏览器要重新去渲染

需求场景1.长列表，大约超过1000行数据2.每一行至少8列，每一列都不是单纯的文本节点，都是input，select，checkbox之类的复杂组件，可以理解成可编辑表格。3.列表可以进行拖拽排序4.每行最后一列有删除按钮，可以进行删除行操作。5.每一行有序号标识，序号不能去除，且必须显示出来。6.锁列问题1.每次打开这个长列表，过多的数据，造成大量组件节点需要渲染，200行数据渲染大约需要12s2.点击删除某一行的时候，行数越靠前，删除，需要重新渲染的节点越多，由于序

HTML 经过解析生成 DOM树； CSS经过解析生成　Style Rules。 二者一结合生成了Render Tree。 通过layout计算出DOM要显示的宽高、位置、颜色。 最后渲染在界面上，用户就看到了浏览器的渲染过程：解析 HTML 构建 DOM(DOM 树)，并行请求 css/image/js CSS 文件下载完成，开始构建 CSSOM(CSS 树) CSSOM 构建结束后，和 DOM 一起生成 Render Tree(渲染树) 布局(Layout)：计算出每个节点在屏幕中的位置

1.styles中source的配置2.styles中layer的配置3.popup的实现4.marker的实现5.geoserver矢量切片6.glyphs和sprite离线

1.控制包的大小提升体验最直接的方法是控制小程序包的大小，基本上可以说，1M的代码包，下载耗时1秒左右。控制包的大小的措施压缩代码，清理无用的代码 图片放在cdn 采用分包策略 分包预加载 独立分包（版本要求有点高） 除了上面讲的控制包的大小，对异步请求的优化也很重要。2.优化异步请求onLoad 阶段就可以发起请求，不用等ready 请求结果放在缓存中, 下次接着用 请求中可以先展示骨架图 先反馈，再请求。比如说，点赞的按钮，可以先改变按钮的样式，再发起异步请求。

一、运行环境的不同H5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，因为小程序的开发过程中只用到一部分H5技术。小程序的运行环境是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对性做了优化，配合自己定义的开发语言标准，提升了小程序的性能。二、开发成本的不同开发一个微信小程序，由于微信团队提供了开发者工具，并且规范了开发标准，则简单得多。前端常见的HTML、CSS变成了微信自定义的WXML、WXSS，WXML，官方文档中都有明确的使用介绍，开发者按照说

state 和 props有什么区别state 和 props都是普通的JavaScript对象。尽管它们两者都具有影响渲染输出的信息，但它们在组件方面的功能不同。即props是一个从外部传进组件的参数，主要作为就是从父组件向子组件传递数据，它具有可读性和不变性，只能通过外部组件主动传入新的props来重新渲染子组件，否则子组件的props以及展现形式不会改变。 state的主要作用是用于组件保存、控制以及修改自己的状态，它只能在constructor中初始化，它算是组件的私有属性...

# 全局安装terser命令行工具npm install -g terser# 使用terserterser ./foo.js -c pure_funcs=[console.log],toplevel=true -m -o bar.js# -c即compress表示普通的压缩代码# pure_funcs表示删除代码中的console.log方法# toplevel为true表示只在顶级作用域压缩清理变量# -m即mangle会压缩变量名等等# -o代表输出路径const Terser.

我们使用 compression-webpack-plugin 插件进行压缩。npm install compression-webpack-plugin --save-dev成功之后，在vue-config.js里配置const CompressionPlugin = require("compression-webpack-plugin")plugins:[newCompressionPlugin({asset:'[path].gz[query]',//目标资源名称。...

Vue 事件机制 本质上就是 一个 发布-订阅class Vue {constructor() {// 事件通道调度中心this._events = Object.create(null);}$on(event, fn) {if (Array.isArray(event)) {event.map(item => {this.$on(item, fn);});} else ...

export default { name: "keep-alive", abstract: true, // 抽象组件属性 ,它在组件实例建立父子关系的时候会被忽略,发生在 initLifecycle 的过程中 props: { include: patternTypes, // 被缓存组件 exclude: patternTypes, // 不被缓存组件 max: [String, Number] // 指定缓存大小 }, create.

为什么需要虚拟DOM传统网页在进行更新的时候会有一个很棘手的问题，那就是需要用繁杂的DOMApi去操作DOM，很容易出现bug且难以维护，对于如何从这种繁杂的dom操作中脱离出来，react提出了一个新的思想，-始终整体刷新页面，当数据发生变化时，react会自动更新UI, 从而让我们只关心数据以及最后UI是什么样子。这种方式虽然简单，但是有一个很明显的问题，慢。每次数据改变就重新渲染整个页面会做大量的“无用功”，而且无法保存节点状态，比如失去焦点，为了解决这个问题，react又提出了一个解决方案

function getIndex(arr,num){ var len = arr.length, st = 0, end = len-1 while(st<=end){ var mid = Math.floor((st+end)/2) if(num==arr[mid]){ return mid }else if(num>arr[mid]){ st = mid+1 }...

http缓存指的是: 当客户端向服务器请求资源时，会先抵达浏览器缓存，如果浏览器有“要请求资源”的副本，就可以直接从浏览器缓存中提取而不是从原始服务器中提取这个资源。常见的http缓存只能缓存get请求响应的资源，对于其他类型的响应则无能为力，所以后续说的请求缓存都是指GET请求。http缓存都是从第二次请求开始的。第一次请求资源时，服务器返回资源，并在respone header头中回传资源的缓存参数；第二次请求时，浏览器判断这些请求参数，命中强缓存就直接200，否则就把请求参数加到request

【1】改变this的指向并且执行调用函数call(), call(thisScope, arg1, arg2, arg3...)apply(), apply(thisScope, [arg1, arg2, arg3...]);两个参数bind 改变this的指向，返回的是函数【2】https://blog.csdn.net/xuehangongzi/article/details/80841167...

// Numberstypeof 37 === 'number';typeof 3.14 === 'number';typeof Math.LN2 === 'number';typeof Infinity === 'number';typeof NaN === 'number'; // 尽管NaN是"Not-A-Number"的缩写typeof Number(1) === 'number'; // 但不要使用这种形式! // Stringstypeof "" === 'string';.

实现目的某些组件可能会公用一些data，方法，生命周期的钩子或者事件监听，而不仅仅是js定义的一些方法，如果你希望在一些组件中重复使用这部分的语法，可以使用mixins来进行代码的优化。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。如果你需要更复杂的，你也可以将若干的公共组件作为一个混入的组件分组。选项合并对于组件中重复的数据以及方法进行合并，同名函数均执行，生命周期钩子函数，混入的先执行，其中数据冲突的部分，以当前组件优先级为高，其他的形成

1.代码包优化屏蔽sourcemap，vue.config.js里面设置productionSourceMap为false对项目代码中的js,css,svg,ico文件进行gzip压缩，在vue-cli脚手架的配置信息中，有对代码进行压缩的配置项，例如index.js的通用配置，productionGzip设置为true，但是首先需要对compress-webpack-plugin支持对路由组件进行懒加载，在router.js里面对组件进行按需加载2.源码优化v-if和v-show的选择

思路：a)比较两个相邻的元素，如果后一个比前一个大，则交换位置b) 第一轮的时候最后一个元素应该是最大的一个c) 按照第一步的方法进行两个相邻的元素的比较，由于最后一个元素已经是最大的了，所以最后一个元素不用比较。 function sort(element){ for(var i = 0;i<element.length-1;i++) { console.log("i="+element[i]) for(var

计算数组中每个元素出现的次数var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];var countedNames = names.reduce(function (allNames, name) { if (name in allNames) { allNames[name]++; } else { allNames[name] = 1; } return allNames;}, {});// cou.

例子：console.log(0.1+0.2) // 结果0.30000000000000004 而不是0.3原因：在计算机中数字无论是定点数还是浮点数都是以多位二进制的方式进行存储的。在JS中数字采用的IEEE 754的双精度标准进行存储(存储一个数值所使用的二进制位数比较多,精度更准确)解决办法想办法规避掉这类小数计算时的精度问题就好了，那么最常用的方法就是将浮点数转化成整数计算。因为整数都是可以精确表示的。0.1+0.2 => (0.1*10+0.2*10)/10...

1.（求和和乘积）var arr = [1, 2, 3, 4];var sum = arr.reduce((x,y)=>x+y)var mul = arr.reduce((x,y)=>x*y)console.log( sum ); //求和，10console.log( mul ); //求乘积，242.计算数组中每个元素出现的次数let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];let nameNum .

1.语法arr.reduce(callback,[initialValue])callback （执行数组中每个值的函数，包含四个参数） 1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue）） 2、currentValue （数组中当前被处理的元素） 3、index （当前元素在数组中的索引） 4、array （调用 reduce 的数组）initialValue （作为第一次调用 callback 的第一

el-table（表格）过滤、模糊搜索、字段复选框、动态列、分页、下拉菜单，选择，排序，超出显示省略号el-tree（树状图）过滤、选择，展开、选择高亮，点击，加图标el-dialog（弹框）设置宽高、加footer、加模态点击el-dropmenu（下拉菜单）下拉的可以是div，用visiable属性可以控制显示隐藏el-col span属性控制栅栏布局e...

api;{target:'https;//www.baidu.com',changeOrigin:true,wx:true,还有几个其它参数onProxyReq:function(proxyReq,req,res){proxyReq.setHeader('Cookie','session=12324343535')}pathRewrite：{}}sas...

1.https://blog.csdn.net/kirinlau/article/details/808338052.https://unbug.github.io/codelf/3.https://github.com/unbug/codelf#codelf-for-vs-code4.vxe-tablehttps://xuliangzhan.github.io/vxe-table/...

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <!--CSS样式--> <style type="text/css"> ...

1、介绍js的垃圾回收机制　　js的垃圾回收机制就是为了防止内存泄漏的，内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着，垃圾回收机制就是间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向的内存。所以这里又涉及到变量的生命周期，当一个变量的生命周期结束之后它所指向的内存就应该被释放。JS有两种变量，全局变量和在函数中产生的局部变量。局部变量的生命周期在函数执行过后就结束了，此时便可...

1：意外的全局变量JavaScript 处理未定义变量的方式比较宽松：未定义的变量会在全局对象创建一个新变量。在浏览器中，全局对象是window。function foo(arg) { bar = "this is a hidden global variable"; } 等价于function foo(arg) { window.bar = "thi...

function doSomething () { for (var i = 0; i < 5; i++) { console.log(i) } console.log('Finally ' + i)}doSomething()打印结果01234Finally 5i 在 for 语句里定义的，为什么在 for 语句外面仍...

一、资源加载1.首屏加载用户从点击按钮开始载入网页，在他的感知中，什么时候是“加载完成”？是首屏加载，即在可见的屏幕范围内，内容展现完全，loading进度条消失。因此在H5性能优化中，一个很重要的目的就是尽可能提升这个“首屏加载”的时间，让它满足“一秒钟法则”。2.按需加载首先要明确，按需加载虽然能提升首屏加载的速度，但是可能带来更多的界面重绘，影响渲染性能，因此要评估具体的业务...

CDN是内容分发网络，功能是将网站内容发布到最接近用户的边缘节点，使网民可就近取得所需内容，提高网站访问的响应速度和成功率，同时能够保护源站。解决由于地域、带宽、运营商接入等问题带来的访问延迟高的问题，有效帮助站点提升访问速度。CDN是各大IDC服务商在全国各地部署机房，通过在网络各处放置节点服务器，所构成的在现有的互联网基础之上的一层智能虚拟网络。用户采用CDN方案后，自己的网站就会在各...

题记“谁掌握了过去，谁就掌握了未来”——乔治.奥威尔前言发端于2013年的个人项目，已然成为全世界三大前端框架之一，在中国大陆更是前端首选。它的设计思想、编码技巧也被众多的框架借鉴、模仿。学习研究Vue的演进，对于前端同学来说，是提高自身认识和水平的法门。纪略Ø 2013年，在Google工作的尤雨溪，受到Angular的启发，从中提取自己所喜欢的部分，开发出了一...