DOM 事件是前端开发者习以为常的东西. 事件的监听和触发使用起来都非常方便, 但是他们的原理是什么呢? 浏览器是怎样处理 event绑定和触发的呢? 让我们通过实现一个简单的event 处理函数, 来详细了解一下. 当我们点击上面这段 html 代码中的 a 标签时. 浏览器…

前端路由是现代SPA应用必备的功能,每个现代前端框架都有对应的实现,例如vue-router、react-router。 我们不想探究vue-router或者react-router们的实现，因为不管是哪种路由无外乎用兼容性更好的hash实现或者是H5 History实现，与框…

大家好，我是神三元，这一次，让我们来以React为例，把服务端渲染(Server Side Render，简称“SSR”)学个明明白白。 这一部分来简要实现一个React组件的SSR。 一. SSR vs CSR 废话不多说，直接起一个express服务器。 启动之后打开loc…

由DOM或者布局的变动而触发。 如你改变了一个div的位置，或者是改变了这个div的width, height, position 或者布局类的样式。 通过一次完整的web请求和渲染过程以及如何优化网页，我们可以知道页面渲染的时候，会忽略掉display: none这一类的不占…

之前面试了几个开发者，他们确实做过不少项目，能力也是不错的，但是发现js基础不扎实, 于是决定写一下这篇javascrip数据类型相关的基础文章，其实也不仅仅是因为面试了他们，之前自己在面试的时候，也曾经被虐过，面试官说过的最深刻的一句话我到现在都记得。 作者简介：koala，…

前端要以正确的姿势学习编译原理（上篇）

在 Superhuman，我们正在打造世界上最快的电子邮件体验。您可以体验到以两倍于以前的速度浏览您的收件箱，并且保持收件箱为零！ 暗色主题是应用程序设计的最新趋势。macOS 去年推出了黑暗模式。Android 上月也推出了黑暗主题。在过去的两周中，iOS 也紧跟而上。 曾经…

width和margin实现。margin: 0 auto; table标签配合margin左右auto实现水平居中。使用table标签（或直接将块级元素设值为display:table），再通过给该标签添加左右margin为auto。 inline-block实现水平居中方法…

刮刮卡是大家非常熟悉的一种网页交互元素了。实现刮涂层的效果，需要借助canvas来实现，想必每个前端工程师都清楚。实现刮刮卡并不难，但其中却涉及很多知识点，掌握这些知识点，有助于我们更深刻理解原理，对于提升举一反三的能力很有帮助。本期以实现刮刮卡为例，分享下如何科学合理地封装函…