WebSocket 技术已经逐渐成熟，在生产环境下也已经带给我们非常多的便利。本文首先会努力阐明 WebSocket 的基本原理，然后会结合实际叙述如何使用它。 首先需要明确的是 WebSocket 的定位。WebSocket 是建立在 HTTP 基础上，为客户端与服务端之间提…

想必你一定使用过易企秀或其它微场景生成工具制作过炫酷的h5页面，除了感叹其神奇之处有没有想过其实现方式呢？从设计者的角度来看待问题，会有不一样的收获，本文将从零开始，使用node技术来设计实现一款精简版的易企秀 Github: 传送门演示地址：传送门 目录 实例实现 实例模板化…

什么是响应式？同一个页面在不同屏幕尺寸下有不同的布局。 传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就好了，缺点是CSS比较重。 栅格系统用于处理页面多终端适配的问题。栅格的响应式能力，得益于CSS3媒体查询（Media Queries）的强力…

CSS动画实现的一些注意事项。 对于web原生的滑动，当内容的尺寸大于容器尺寸的时候结合overflow属性就可以出现漂亮的滚动条了，然后我们可以监听scroll事件。但是在移动端，太多的情况下可能并不能满足我们的需求。 值得庆幸的是，better-scroll.js的作者就在…

前端性能优化可以分为三个level：静态资源优化、接口访问优化、页面渲染速度优化，在操控门槛上依次递增，优化效果上越发没有这么明显，所以很多小团队只会做到了第一个level追求极致的前端性能体验，提升自己的level，come on ~ 目录 一、静态资源优化 二、接口访问优化…

为什么还要提到面向切面，我第一次听到这个词还是在写 java 的时候，它是 spring 的核心思想之一（不得不说，前端从石器时代发展到今天的工业时代，大量借鉴了后台的编程思想，所谓触类旁通，那个道理就是这么讲来着）。发挥想象力，所谓的钩子，是不是在框架工具的某个阶段，切一刀，…

web 前端图片懒加载实现原理

解题思路：1.给div一个动画效果2.给每个方向添加一个自定义属性false3.当按下键盘事件左（37）上（38）右（39）下（40）所对应的值时条件变成true4.按键松开后条件变回false希望对