flying meng的菜鸟居

单页面应用程序将所有的活动局限于一个Web页面中，在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成，单页面应用不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容，从而实现UI与用户的交互。

高度共享，是高度共享和宽度共享的总称。是笔者总结的一个针对某些问题解决的思路。并不是一个新的技术点或模式 —— 至少目前来说。甚至可能你已经在项目中用过类似的。它的核心就是：降低 js 复杂计算和耗时操作在类似场景中的比重。没啥说的，通过两个业务场景描述一下即可。

默认 Mixin 上会首先被注册，组件上的接着注册，这样我们就可以在组件中按需要重写 Mixin 中的语句。它的优势也是为人诟病的一点就是“使用这两个API，祖先组件不需要知道哪些后代组件在使用它提供的数据，后代组件也不需要知道注入的数据来自哪里。再来看第二个场景，其实我们很清楚地知道：这时候我们需要的不是一个可以传值的组件，而是一个类似于插件一样的 js 代码（这么说能够理解吧）！有了上面的实践，我突然觉得能够继续完成之前的一个畅想：有一个方法能够在不深入侵入业务代码的同时完成任意组件联动的功能。....

之前写过一篇文章「小tips：如何摆脱浏览器下12px的限制」，不少人觉得“有点东西”。文中提到的“transform: scale()”方法也是利用了CSS中 transform 的特点，可以说兼顾了效果和性能。但是它必须考虑height甚至在“动态多行”效果时要用 JS 辅助的特点也很是让人头疼。其实还可以用两种方法解决这个限制：SVG解决文字12px限制SVG 本质上你可以看成是一张图片，给图片设置width:100%就能够跟随容器尺寸拉伸，SVG 也是如。并且由于 SVG 是矢量的，因此，再

在有了基础做保障之后的面试确实是提升自己扩展视野的绝好手段。面试官的问题可能会让你眼前一亮或者你知道但是压根没有联系到一起过。而这些可能是对于工作非常有帮助的。面试官：“请实现一个数组去重？”我：“有什么特别的要求吗？”面试官：“没有。”我：let newArr = [...new Set(arr)];面试官：“…能换一种方式吗？用原生的、es5的方式实现？”我：function unique(arr) { if (!Array.isArray(arr)) { .

你一定知道 JS 动画的优先级 < css 动画。即使必要，用 JS 操作class的优先级也一定 > 用 JS 直接修改具体样式。但是如果问到：“你了解css动画的性能么？如何优化？”你该怎么解决？CSS中有两个至关重要的概念 —— 重排和重绘。由此，通常会有一个问题：“为什么重排比重绘更耗性能？”要解释这个，还要回到浏览器的渲染原理上：自上而下解析 DOM，生成 DOM 树；解析 CSS，生成 CSSOM 树；（加载js代码）DOM 树和 CSSOM 树节点一一对应，结合生成

图片渲染优化以前谈过许多次图片问题。也给出了几种方案。在实际使用中这几种无疑是可行而且方便的：loadingconnection API + promise.all()异步加载图片骨架屏懒加载 + 占位图但是在电商场景下，第一种方案是不可以的：我们不能为了一张图片而放弃整个内容对用户的正常展现。（尤其是这个图片还只是个背景图）第二种方案在首页是有奇效的，但是笔者觉得限制太多 —— 如果对于“通用型”的方案来说，骨架屏似乎更适合中大型项目。这个方案当时提出的场景是：在我校的实验系统首页会有

alternate？你没搞错吧？这不就是“交替、替换”吗？这有什么好说的？但是如果我问出来：alternate在HTML中的用法，具体作用，可能你只能说：“诶这不是那啥么”。说实话我一开始也压根不知道有这个东西，但是就在前两天这玩意解决了我的一大“难题”，顿时这兴趣不就来了么！alternate在网站换肤方面的应用好吧想来你也遇到过这种情况：网页换肤！其实我们的选择还是挺多的，比如：设置不同颜色，用JavaScript去一个一个的操控、替换（或者设置“全局的”class名）用JavaScr

我们都知道 “输入 url 并回车后” 或者说 “向服务端发请求” 浏览器并不是直接将请求内容送达服务端，这里有一步 “url解析，进行 dns 查找 ip 地址” 的过程：如果你对这张图有一点不解，那么请看下面这张图：显然我们应该将目光放在这里！DNS优化DNS也是有缓存的 —— 如果之前你解析过这个域名，会在本地/某个dns服务器上有缓存（一定时间内）。DNS解析有三种方法：递归查询：客户端向DNS服务器A查询，A向B查询、B向C查询。C将结果返回给B、B将结果返回给A，A将结果返回给

最近玩三国志战略版时发现它上面占领土地候一段时间内的动画效果不错，进而引发了一些探究：原动画可以简化为一个方块上有一个类似遮罩的白色的光晕，而且不断膨胀收缩，我开始一想，这不是css的scale么？然后一定时间后将其remove掉。然后发现其每隔一段时间颜色还会变淡一些，这里“理所当然”地用了“多次setTimeout”。但写完后我就立刻想到了“由于浏览器eventLoop和消息队列机制的原因，setTimeout通常不能准时，而且嵌套的setTimeout越多延时越大”。怎么解决呢？既然和时间相关

我们大概经常能听到“执行环境”、“作用域”、“原型（链）”、“执行上下文”等内容，它们都在描述什么？JS代码的运行我们知道了js是弱类型语言，在运行时才确定变量类型。js引擎在执行js代码时，也会从上到下进行 词法分析、语法分析、语义分析 等处理，并在代码解析完成后生成AST（抽象语法树），最终根据AST生成CPU可以执行的机器码并执行。除此之外，JS引擎在执行代码时还会进行其它处理，如 V8 中还有两个阶段：编译阶段：该阶段会进行执行上下文的创建，包括创建变量对象、建立作用域链、确定 this

事情是这样的：大家都知道“内存泄露”这回事吧。它有几个常见的场景：闭包使用不当引起内存泄漏（未声明的）全局变量分离的DOM节点（随意的）控制台的打印遗忘的定时器循环引用其中第 3 点引起了我的注意 —— 我当然清楚地知道它说的是比如：“假设你手动移除了某个dom节点，本应释放该dom节点所占用的内存，但却因为疏忽导致某处代码仍对该被移除节点有引用，最终导致该节点所占内存无法被释放”的情况<div id="root"> <div class="child">

首先仍然不得不提的是 “在客户端拿到 HTML 后的处理”：从上到下解析 HTML 文档生成DOM树；加载解析样式构建CSSOM树；加载并执行JavaScript代码；根据DOM树和CSSOM树，生成 render 树；渲染；布局；绘制我们可能很多次听到过：“要尽可能地减少重排和重绘，因为它们会影响浏览器性能。”但，为什么呢？事实上，一个页面是由许多层级组成的（就像千层饼一样） —— 这里的“层级”指的是“ DOM 元素渲染层（Layer）”。一个页面在构建完 render tree

今天面试官问的我这个问题，说实话，我当时懵逼了。我第一个想法竟然是：嘶~这问题挺简单的啊，不就是用 Date 对象判断是否大于某个时间差么？于是写出了下面这段代码：let rest=function(){ // 开始是放在外面的，但是面试官说要尽可能不单独暴露值，于是鬼迷心窍（紧张）杀都没想就直接扔进来了... let date=Date.now(); return new Promise((resolve,reject)=>{ let _date=Date.now(); if(_d

相信不少人都看过圆明园破损后的图片，残垣败壁，令人惋惜。一些网站为了增加对比程度，将圆明园被毁前后的图片放在一起，这样确实非常鲜明。“对比”已经越来越多地被用来在偏设计的网站中了，而最常见的布局方案是将两张图并排/并列放置。但由此带来的问题是：就像“找不同”一样，人通常只能观察到非常明显的差异 —— 正如上面所说“圆明园对比图”一样。于是还有的网站干脆把两张对比图弄成一张图片展示，简直无语。跟上面描述场景相似的还有一个离谱的解决方案：把两张图放在一个位置上，然后定时来回变换 —— 开发者人为制造一个突兀

最近使用Ajax，发现API中 open() 的第三个参数（是否同步执行）中的false值被禁用了？在console中可以看到，虽然能正常发送请求：但是并不会正常执行 onreadystatechange 回调函数中的语句：这也就意味着：ajax只能支持异步模式了！这当然是好事：因为发送一个同步请求会让浏览器进入暂时性的假死状态，特别是请求需要处理大量数据、长时间等待的接口。这会导致“失败”的用户体验。前两天被淘系电面时面试官问了我一个问题：在你做过的项目中如果需要发送多个请求获取不同数据而

笔者曾在大量的关于页面加载分析的文章中提到过图片加载对页面展示（速度）的影响 —— 这是毋庸置疑的。事实上，不管是通过实际感知还是各类API在遇到图片时提供的 onload 处理我们都能知道这样一件事：图片在网页中总是靠后被加载并渲染的，其速度受图片本身大小的影响，并且直接阻塞了页面的展现！通过 network ，我们又知道了另一件事：图片的加载是一个 client 向 server 发送请求的过程！既然如此，它一定还受到当前网速的限制！过去很长时间内，我们针对网页优化提供了众多方法 —— 图片懒加

页面中的锚点各位想必都“了如指掌”，其基于a链接“同页面跳转”和“id属性标签的历史问题”。可能有人不知道的是：HTML中的“id”非常神奇：id属性的元素不仅可以在js中直接使用，而不必先获取；还可以和url相关联。直接用id访问是旧版本js遗留下来的特性，浏览器会建立window实例的id同名属性，这是为了兼容旧的网页。但不要依赖这个特性，在含有特殊字符或者和window实例的其他属性有冲突时可能失效。我们都知道，锚点应该这样用：<a href="这里写#号+id名">去这里&l

在 本专栏 的 这一篇文章 中，给各位引出了一个“不同寻常的”性能体验优化方式 —— 离线缓存，并介绍了它的简单用法，本文来详细说说！啥是离线缓存离线缓存又叫“ApplicationCache”，是从浏览器缓存中分出来一块缓存区，用来存储一定的资源。它是HTML5的新特性。你可以使用它将构成web应用程序的资源，如HTML、css、JavaScript、图片等存储到本地缓存中，这样不仅可以使以后进来时更加方便，还可以在离线状态时“无差别”继续使用web应用！离线缓存和普通的浏览器网页缓存有明显的区别

最近一直在研究音视频流，正好想要做一个“有声提示”，增强页面交互和用户体验的功能。（以后打算引入前端AI，让整个页面真正实现“语音控制”，嘿嘿）。不说废话，实现过程中倒是遇到了一点小问题：本来嘛以为是很简单的：就像一般给网页添加背景音乐，先动态创建一个audio元素，让其隐藏起来，然后用js添加一个event事件，并触发（事实上现在普遍认为的是：不能给网页添加背景音乐。但经过猜想和实践发现，也可通过下文第一种解决方式实现）：let event = new MouseEvent("click"); /

我们大概都知道的是：精确度问题不仅在前端，甚至在整个编程领域都是“由来已久”的。前端的精确度问题大概要从 Math.floor(number) 向下取整、 Math.round(number) 四舍五入但是round函数在正数和负数表现竟然有差异为开端。这里不得不提一句：Math.round的实现原理其实是“将参数加上0.5再向下取整”，也就是说并不是真正的“四舍五入”！同样的还有因为二进制转换和存储问题导致的0.1+0.2！=0.3的问题。但是这不是重点：我们将以此引出它们在浏览器中的使用：浏览

先说说我为什么有这种“奇怪”的想法。它基于这样一个场景：我最近闲来无事完善了一个小demo：音乐播放器。在里面有一个功能 —— 点击列表某一项弹出音乐播放弹框。我原先一直是“为每一项单独加一个click事件监听”。这很糟糕！<div id="videob"></div>//js代码videob.onclick=function(){ let video=document.createElement('video') video.setAttribute('src','x

我们都知道，页面加载是有顺序的。让我们先来理一下页面的展示过程：当你输入url并按下回车时首先从本地查找域名，有的话直接用hosts文件里的ip地址，否则查询DNS，得到ip地址建立TCP连接——进行“三次握手”客户端发送http请求服务端处理，并返回结果给客户端关闭TCP连接——需要“四次挥手”浏览器收到结果，开始解析资源（JS、CSS、HTML），解析HTML生成的dom树，和同时解析css生成的cssom树结合生成渲染树根据渲染树渲染页面当然，再详细的比如：如何解析生成DOM树、

Canvas表示屏幕上一个空白矩形区域,应用程序可以在该区域内绘图，或者可以从该区域捕获用户的输入事件。HTML5的canvas元素使用JavaScript在网页上绘制图像。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。...模糊的说，canvas是一种“可编辑的”图片格式。

猛的发现最近做了超多关于音乐的东西：Web-app、微信小程序、Electron、TS...emmmmmmm还缺一个最重要的：我们不妨再来看看原生JS中是如何帮助浏览器解决音乐和视频的困惑的！

众所周知，前端无法像原生APP一样直接操作本地文件 —— 否则打开一个网页操控JS就能把用户电脑上的文件偷光。所以需要通过用户触发：通常，用户可选择以下两种方式触发 1. 通过`input type="file"` 选择本地文件 2. 通过拖拽方式把文件“拉到”指定地方第一种是最常用的手段，通常还会自定义一个按钮，然后盖在他上面：因为`type="file"` 的input不容易改变样式。

说起来ajax，相信诸位都不会陌生 —— 这可是当下前端最火的技术之一。ajax请求数据，将数据拿到前端页面上，通过一定手段展示给用户，造成“不必刷新页面”的局部数据刷新。这是ajax最主要的功能。一直以来使用ajax都是“横冲直撞”：不管三七二十一，调用就完了。拿到数据后也是直接放到页面区域上——一般来说没有什么问题，直到遇见了分页：一个大数据量重复请求的场景。于是，我们对ajax的使用做了优化：（本文所说皆基于“切换分页”场景）ajax分页缓存这个可是个“明星人物”。它基于这样一个背景：

数据传递在项目中是个很重要的话题，因为它牵扯到了一个APP，或者web-app的最重要一步：功能联动。丝毫不隐瞒的说，笔者曾经迫切的想要学node.js的动力之一就在于它可以作为后端去进行数据的处理和传递使用。这在之前是不可能单单通过前端实现的。

众所周知：if-else在复杂、多选择、大数据量情况下的“反应”总是不如人意。本文给出了几种改善if带来的问题的方案。。。其实，这篇文章算是粉丝福利吧，嘿嘿（本文默认java代码）

页面加载完全之前这段时间，还真的挺重要...有比如loading效果可以“稳住”用户，适当的动画也可以让用户“眼前一亮”。这里笔者分享一下原生&vue中页面加载完全之前那点事，咱也来唠唠...

本文，笔者将以一个登录模块的开发流程，向各位说明穿插在其中的知识点 —— 【单例模式】和【发布-订阅模式】的使用。OK，步入正题。加入你是一个大型网站的前端开发人员，经过激烈地讨论以后，决定让你负责登录模块的开发。先说，这个网站很大，所以有很多模块，比如：header头部、nav导航、消息列表、购物车… 这些模块有一个共同的特点，就是必须先用ajax异步请求获取用户的登录信息 —— 这是正...

要说谁在网站、web APP等前端应用中起到越来越重要的作用，那绝对很多人第一时间想到的就是：【缓存】！面对越来越要求高质量、快应用的前端，缓存越来越成为当之无愧的“无冕之王”！与其相关的，一直活跃在前端“视野”中的有两个非常重要的应用：【享元模式】中的对象池Ajax分页中的信息缓存请诸位随笔者一探究竟：笔者曾经提到过 Java 中 的 String 对象池，下面就来学习这种共享的...

each —— 算是JavaScript中的一个“语法糖”API了。它的作用是“遍历数组/对象中的每一个元素/属性，操作想要操作的事情（执行回调函数）”。其中在jQuery中使用的尤其广泛：var arr=[1,2,3,4];$.each(arr,function(i,v){ console.log(i+", "+v); if(i===2){ return false; }})...

最近看了好多关于nginx的内容，和文章，也试着用了些。想着总结一下，方便以后查阅。毕竟像这种琐碎的知识点，不可能说在不用的情况下还能一直牢记。本文即是这样而来。其中的知识点都是常用的——不管是初学者，还是有些许经验的开发者。但是笔者实在不认为它适合“零基础小白”，因为笔者不觉得能比文档之类的更能把基础知识点讲明白。nginx环境“nginx是一款轻量级HTTP服务器，采用事件驱动的异步...

为什么说是“ 前端 ”“ 跨域 ” ？跨域方式有三种：jsonp、cors，以及动态代理。相比之“基于”前端的前两种方法，最后一种不太常用 —— 没错，cors一般来讲是后端设置，但是完全可以让前端“一力以担之”。前文推荐（不了解“跨域”的可以先看这里）：https://blog.csdn.net/qq_43624878/article/details/95853615jsonp方式解决...

本文是一篇纯干货前端分享，也算是笔者最近一段时间的思考总结。（顺便为1024庆祝！）

以前没怎么觉得，但最近频繁的用div去使用一些“无伤大雅”的分割线、包裹圈之类的东西。今天恰好翻开了曾经学习过的“伪元素”这一章。不觉惭愧，写此文章记录一下。什么是伪元素首先，伪元素是一个元素的子元素 ，并且 是inline行内元素 。伪元素最常用的也就before和after两个。我们加上之后，在浏览器中查看，发现对于一个标签的before成了这个标签的第一个子元素，而after成为了它...

众所周知：前端页面上的图片是优化时最重要也是最令人头疼的部分。图片的优化有两种方式： 预加载 和 懒加载。本文结合实际案例，为大家讲述网站中图片的优化妙方。文章不短，但没有废话，肯定令你耳目一新啦

越来越着迷于优化，上一次写了 前端项目分析：我是如何做图片优化的（预加载和懒加载）最近发现不管是性能的，还是图片加载的，都很有趣，故写此篇，纪念（记录）一下。加载优化的意义页面的打开速度对网站的优化有极大的意义，那么，如何评价一个页面打开的快不快，可以用两个指标描述：1、ready时间； 2、load时间这个可以从控制台看到，这里交大家一个方法:我们可以在控制台输入window.p...

负责域名解析的DNS服务我们大概都不陌生TCP/IP四层协议：应用层、传输层、网络层（网络互联层）、链路层（网络接口层）DNS（Domain Name System，域名系统），和FTP（FIile Transfer Protocol，文本传输协议），同为TCP/IP四层协议中 应用层 内的两大原则。用户通常使用主机名或域名访问计算机，因为字母配合数字的表示形式更符合人类的记忆习惯，但计算机...