前言对于BFC的概念以及应用场景一直都不是很明白，今天着重去了解了一下，做了以下总结。 什么是BFCBFC（Block Formatting Context）直译为“块级格式化范围”。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成B...

Read More

前言对于前端开发人员，在开发过程中经常需要监控某些表达式或变量的值，如果使用用 debugger 会显得过于笨重，最常用的方法是会将值输出到控制台上方便调试。最常用的语句就是console.log(expression)了。 traceconsole.trace()用来追踪函数的调用过程。 在大型项目尤其是框架开发中，函数的调用轨迹可以十分复杂，console.trace()方法可以将函数的被调用过程清楚地输出到控制台上。 1<button onclick="myFunction()...

Read More

如果我们想要提高我们的前端性能,那么首先你得先只知道怎么测量你的前端性能。但是哪些前端的性能指标我们应该关注呢?在Web1.0时代当我们讨论到前端性能指标用的最多的就是page load time。到了单页应用程序越来越多的时代,单一的page load time指标已经无法完全衡量前端性能了,因为一个单页应用程序page load time可能只触发了一次,但是用户会跟程序有很多的交互,每一个交互或者动作都需要有指标来衡量他的性能。 接下来就介绍几个比较重要的前端性能指标: first...

Read More

探究javascript Map什么是Map，此处说的Map，非js中的map( )方法,下文会详细解释。Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。ECMAScript6原生实现了Map类，即我们所说的字典，字典和集合很像，不过集合是以值值得形式存储元素，字典则是以键值的形式存储元素。字典也叫映射。 语法1new Map([iterable]) iterable (可迭代传参)Iterable 可以是一个数组或者其他 iterable 对象，其元素为键值...

Read More

随着web浏览器的发展,浏览器的性能越来越好,WebGL和WebAssembly提供越来越多的可能性。很多原本只能在终端运行的程序都开始开发web版本例如CAD的web版本,PS的web版本,figma。这一个个的设计协作平台原本在终端都有插件机制。那么如果在web端能提供一个插件机制,对于有一点编程能力的用户,就可以提供更好的用户体验和开发更多的可能性。如何开发一个好的插件系统呢? 一个javascript的插件系统需要满足以下几个方面: 安全性 插件不可以发送请求 插件和程序模块不可以...

Read More

前言前端开发的时候，在网页刷新的时候，所有数据都会被清空，这时候就要用到本地存储的技术，前端本地存储的方式有三种，分别是cookie，localstorage和sessionStorage ，这是大家都知道的。 使用方式cookie： 保存cookie值 123var dataCookie='110'; document.cookie = 'token' + "=" +dataCookie; 获取指定名称的cookie值...

Read More

前言其实大多数的时候作为javascript开发者不需要太关心内存的使用和释放,因为所有的javascript环境都实现了各自的垃圾回收机制(garbage collector(GC)),但是随着现在的SPA越来越多也越来越大,越来越追求极致的性能渐渐也要求开发者能够适当的了解一些垃圾回收机制内部的实现原理,在性能优化和追踪内存泄漏的时候都能够起到一点帮助。看一段内存泄漏的代码 1234567891011121314151617181920var theThing = null;var r...

Read More

前言==在js中用到的很多，大家都知道两个等于号只判断值，===值和类型都会判断，接下来我们就来看看==是如何判断的 探究==1234567891011121314151617181920212223242526272829303132333435363738 对象 \ 字符串 布尔值 \ / 数值1. 对象和布尔值比较对象和布尔值进行比较时，对象先转换为字符串，然后再转换为数字，布尔值直接转换为数字...

Read More