酒浓码浓

ios/android微信浏览器获取视频时长相信很多开发为此苦恼，百度答案都不尽人意。经历种种磨难不负有心人，ios、android都可获取视频时长，亲测生效。正解思路：↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

前端自动化测试背景：前端测试是前端工程中很重要的一部分，但是对于大多数开发而言这应该是个名词。因为没用到，据不知名数据统计，不会做自动化测试的开发占据一半之多！因为前端自动化测试要写测试脚本，大多数中小型公司由于开发周期短，项目也不长期维护，工程管理的不规范，所以就只是打印调试，用户测试，左点点右点点，各个机型各浏览器看一看，没啥问题就OK了。对于小项目而言它的时间成本及可靠度还是人力测试靠谱一点。所以这部分知识也愈来愈不那么重要了，但是作为前端分支的一部分。以及自己技术广度的拓展，对一些基

Docker与VM推荐好文：https://www.freecodecamp.org/news/a-beginner-friendly-introduction-to-containers-vms-and-docker-79a9e3e119b/

JS关闭微信内置浏览器微信浏览器内，是有个内置对象WeixinJSBridge的执行 WeixinJSBridge.call("closeWindow") 会关闭微信内置浏览器但是你会发现偶尔好使，偶尔不好使。这应该是依赖的方法是异步导致的，有时还没加载出来调用就会不生效，所以我业务中给个定时器去执行是可以解决的setInterval(()=>{WeixinJSBridge.call("closeWindow")},300)不想把精力放在翻阅这方面的源代码上...

HTTP性能优化衡量服务器性能的主要指标有三个：吞吐量（requests per second）吞吐量就是我们常说的 RPS，每秒的请求次数，也有叫 TPS、QPS，它是服务器最基本的性能指标，RPS 越高就说明服务器的性能越好。并发数（concurrency）并发数反映的是服务器的负载能力，也就是服务器能够同时支持的客户端数量，当然也是越多越好，能够服务更多的用户。响应时间（time per request）响应时间反映的是服务器的处理能力，也就是快慢程度，响应时间越短，单位时

Weex，Rax，Taro区别Weex 阿里开源跨端渲染框架https://weex.apache.org/zh/Vue/Rax开发后，构建 Android、iOS 和 Web 应用它像浏览器，或node一样是个容器。Rax 阿里开源跨容器渲染框架，它如同vue是个业务开发的框架https://rax.js.org/最开始Weex只支持vue，后来觉得翅膀硬了想开放出来给大家用。尝试与react结合失败，遂封装了基于react的框架Rax。react偏向解决前端.

前端陀螺仪deviceorientation文档：https://developer.mozilla.org/en-US/docs/Web/API/Window/deviceorientation_event前端陀螺仪，可以获取到手机当前指向，及手机水平朝X，Y轴翻转的值，默认为0。API显示兼容性蛮好，仅对IE未知。代码简单如下：只需要将event.beta及event.gamma值赋给首屏定位的背景图上即可达到王者荣耀首屏进入游戏页面的效果，晃动手机背景跟着晃动，晃动幅度的大小可调整基.

前端websocketwebsocket文档：https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket/WebSocket以下为笔者封装的js，喜欢的可以直接拿去用/** * @title Socket-client * @author Mason<mason.meng@wehotelglobal.com>...

meta标签http-equiv="X-UA-Compatible"<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>最近看到很多人使用，X-UA-Compatible 定义浏览器的渲染方式如果安装了 Google Chrome Frame （谷歌浏览器內嵌框架）则使用谷歌浏览器内核模式，否则使用最...

前端性能之预读取DNS浏览器的 DNS 预读取功能前端是可控的，一般常见两种方式：<meta http-equiv="x-dns-prefetch-control" content="off"><link rel="dns-prefetch" href="//www.spreadfirefox.com">强制对域名进行预读取在一些情况下很有用, 比如, ...

前端性能之performanceperformance是前端性能监控的API它可以检测到白屏时间、首屏时间、用户可操作的时间节点，页面总下载的时间、DNS查询的时间、TCP链接的时间等。浏览器打印一下 window.performance，可以看到如下：memory内存相关jsHeapSizeLimit 该属性代表的含义是：内存大小的限制。 totalJSHeapSiz...

nginx常用配置1. 基础配置main # 全局配置events { # nginx工作模式配置}http { # http设置 .... server { ...

正向代理与反向代理的区别牛A与牛C要交换东西，但是俩人碰不着。 所以出现了中间传话人牛B。牛A是客户端（你）牛B是代理服务器（中间商）牛C是服务器（目标）正向代理：牛A将诉求告诉牛B，牛B告诉牛C，牛C解决将结果给牛B，牛B给牛A反向代理：牛B将牛C的本事学会，牛A找牛B直接解决正向：牛C不知道谁来找他平事（服务端不知道实际发起请求的客户端）反向：牛A不知道谁给他平...

ios/android微信浏览器video自动播放相信很多开发为此苦恼，经历种种磨难不负有心人，ios、android都可实现自动播放。首先须知JS动态添加的video标签，JS执行play，是可以直接全屏播放的，但是这种上禁止全屏等属性都无用。正解思路：DOM中先写上video标签，上个autoplay。 引入wx文档 https://res.wx.qq.com/open/js/...

Ant Design Pro官方称秉承Ant Design的理念做出的升级版，并已应用于阿里内部上百个项目正在尝试，应该还在逐步优化的阶段。样例：https://preview.pro.ant.design/profile/basic?primaryColor=daybreak重大弊端：官方地址首次加载缓慢。浏览器loaded近2min文档：https://pro.ant.desi...

npm与node版本不匹配官网可以查询对应版本：https://nodejs.org/zh-cn/download/releases/

给video控制按钮设置样式打开浏览器控制台做如下设置设置好，就可以选中DOM进行查看了。此时可以看到其DOM都是通过pseudo属性来添加的样式，此时我们就可以根据CSS属性选择器进行更改样式。例：隐藏进度条video::-webkit-media-controls-timeline{ display：none；}...

sass-resources-loader在前端项目中，比如用less/scss想要封装一个公共的文件，或统一引用一个公共变量会发现在入口文件，引入或声明是无效的，用的时候还是会报错。那么sass-resources-loader恰好解决了这个问题它在打包的时候将资源放在每个文件中，而无需一一引用，例如：const loader = [ 'vue-style-loader...

CSSOMThe CSS Object Model is a set of APIs allowing the manipulation of CSS from JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows users to read and modify CSS st...

前端调微信分享官方地址：微信SDK微信已经提供了很全面的SDK，可以调用方法设置各自媒体端的分享内容。首先你应具备个微信公众号。公众号应将你要做这件事的地址加入白名单。允许你授权！然后前端的业务场景调用后端的接口，传参为当前调用地址的URL。后端验证成功后将appId返回给你，此为公众号的唯一标识。以及一些时间戳，随机串，签名码。用于与微信做签名验证。具备了以上条件后...

H5浏览器分享到微信/QQ/微博随着自媒体社交的发展。移动端的分享功能已是家家所需，身为一个被生活所逼的办公室底层劳动工人，不敢掉以轻心赶紧跟上步伐~~o(╥﹏╥)o可是浏览器端想设置自媒体端的分享内容却不是个简单活~大家都知道浏览器未被垄断，各家争奇斗艳！想兼容所有的浏览器~ ，停 打住 别想了~有些浏览器默认会抓取网页的title 当前地址及第一张图片。做为分享内容，但...

前端音视频技术实施、性能、及兼容性调研最近公司上个项目，希望里面有视频功能，之前知道H5 支持video 标签，拿过来一用，结果在移动端出现了各种兼容问题。于此展开调研。来吧，让我们看一下开发之最有趣又有意义的历史故事????历史：基础篇：适用一些短视频的默认兼容问题。很多开发在做视频的时候，PC端已相对成熟，在移动端就会碰见各种兼容问题。例如想进入页面自动播放视频之类的。全屏播...

前端音视频之移动端/微信浏览器腾讯微信内嵌的浏览器，打开H5页面下拉时我们可以发现其实质上是QQ浏览器X5内核。X5开头的，表示在微信浏览器中可以打开专有的H5模式，以下介绍的属性中有些前缀带X5的需设置H5模式后才可生效，文档也提供了在全屏及退出时等的回调事件，安卓兼容要求浏览器版本>=7.1，具体参阅文档X5同层播放器。常见问题：微信浏览器中默认非全屏播放（A...

前端判断图片加载完毕首先普及一个技术点，img的onload事件及complete属性前者为image加载完毕事件，后可以做回调后者为image加载状态的属性，监听或在onload里打印也可以获取其是否加载完毕。那么如下调用前者，用promise判断所有图片都加载好了再做事~const arr = ["/static/img/123.png","/static/img/123...

前端css3 animate动画只展示第一帧，最后一帧及图片丢失问题最近项目里要用animate加动画。 ios问题真多在safari浏览器 animate 在使用 css3 的 transform 属性会与z-index发生冲突z-index不仅失效，偶尔还会出现transform 动画玩过的地方，z-index层级较低的图片DOM会消失。那针对这点网上目前感觉唯一好用的解决办法...

前端生成图片功能及相关插件调研首先丢出几个业务调研的相关插件，后续再详细介绍各个插件的坑html2canvashttps://github.com/niklasvh/html2canvas/domtoimagehttps://github.com/tsayen/dom-to-image#readmerasterizehtmlhttps://github.com/cbur...

ios移动端进入页面怎么自动弹出键盘最近做的H5页面业务上有个需求，要在移动端，进入到某个页面自动聚焦input的焦点并弹出软键盘！！！查了一圈，发现autofocus，在android上只能聚焦不弹键盘，ios上不聚焦也不弹键盘。也用了N种方式，什么settimeout，什么模仿button触发click触发input的focus，什么自行封装touch事件等等等等！！全尼玛不好...

当前分支与某分支合并git cherry-pick <commitId>这是一个神奇的命令，可以拯救merge错代码的人们！！！只需知道commitID ， 它还可以跨分支进行合并。如果这不是你想要的也可以自行百度一下 git rebase i<commitId>此命令也可以合并多条分支，选择更多！...

请求头都有什么？不知道哪位大侠总结的，觉得挺全的就搬过来了，方便大家参考 Header 解释 示例 Accept 指定客户端能够接收的内容类型 Accept: text/plain, text/html,application/json Accept-Cha...

es6展开运算符...展开运算符：意如其名，粗俗的理解就是把一个数组给展开了

cookie，sessionStorage，localStorage小叙：我们都知道在日常开发中，cookie会帮助我们记忆一些信息。那最开始是没有storage的，那为什么会出现呢？那还不是因为cookie存在着缺点。如下方cookie 的缺点。记忆的信息有很多种，用户的登录信息（例如我叫张三），用户在网站上的一些行为（我不喜欢广告，关掉它）。对于网站来说，知道你叫张三可以让...

es7 async awaitasync 表示这是一个async函数，await只能用在这个函数里面。await 表示在这里等待promise返回结果了，再继续执行。await 后面跟着的应该是一个promise对象（当然，其他返回值也没关系，只是会立即执行，不过那样就没有意义了…）await看起来就像是同步代码，所以可以理所当然的写在for循环里，不必担心以往需要闭包才能解决...

es6 Promise干货小叙：都说es6是语法糖，那么说promise是es6的经典那就一点毛病都没有！！！本人认为promise最突出的作用就是极致的增强了代码的易读性。then（）的机制，取代了原有层层嵌套的函数的繁琐，让代码一目了然；then就是new一个新的promise对象，所以可以无数then下去catch（）的报错机制本人认为catch就不要...

Object方法https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

html实体符号代码

堆VS栈栈：当定义一个变量时，变量会在内存中开辟一块存储空间，如果这个变量的类型属于值类型，这块空间叫做栈（一个栈，存一个变量）堆：当定义一个变量时，这个变量中如果存放多个数据，会将这个变量存入堆中（堆中存放的是引用类型，引用类型：对象类型object）引用类型再赋值时，传递的是变量的地址此时这两个变量共享同一个存储空间，所以一改全改计算机中有一种特殊的变量，这个变量...

获取浏览器的类型const explorer=window.navigator.userAgent;if (explorer.indexOf('MSIE')&gt;=0) { return'ie';}else if (explorer.indexOf('Firefox')&gt;=0) { return'Firefox';}else if (explorer...

canvas标签canvas 画布默认大小300*150context是一个封装了很多绘图功能的对象 画笔获取方法 var context = canvas.getContext("2d")画布基本属性：context.fill（）填充context.stroke（）绘制边框context.fillStyle 填充的样式context.strokeStyle边框...

iframe标签下载需求分析：用ID找iframe标签，判断找没找到，找到了就给src赋值，没找到就创建一个let iframe = document.getElementById('xxx');if(!iframe) { iframe = document.createElement("iframe"); iframe.style = 'display: non...

React事件行为React中无法用return false去阻止事件的默认响应行为必须用event.preventDefault();阻止浏览器默认行为， 例如标签不跳转注： IE不认，在IE下需要用window.event.returnValue= false;event.stopPropagation();阻止冒泡； 例如上级点击事件不生效不是你想要的答案，也...