李宇仓 | Li Yucang

详谈防抖和节流

增强用户体验的小招数

详谈防抖和节流在我们的日常开发中，经常会出现这种情况：实现了 dom 拖拽功能，但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数，导致浏览器直接卡死。给一个按钮绑定了表单提交的 post 事件，但是用户有些时候在网络情况极差的情况下多次点击按钮造成表单重复提交。为了应对如上场景，便出现了函数防抖和函数节流两个概念。函数防抖(debounce...

Posted by Li Yucang on December 29, 2017

JS实现HTML实体与字符的相互转换

字符转换的小技巧

JS 实现 HTML 实体与字符的相互转换前端开发工作中，经常需要将 HTML 的左右尖括号等转义成实体形式。我们不能把<，>，&等直接显示在最终看到的网页里。需要将其转义后才能在网页上显示。不转义直接将用户输入写到网页上往往是行不通的，很容易出现 XSS 漏洞。转义字符（Escape Sequence）也称字符实体(Character Entity)。定义转义字...

Posted by Li Yucang on November 4, 2017

http缓存机制解析

网络缓存的那些事

http 缓存机制解析 Http 缓存机制作为 web 性能优化的重要手段，对于从事 Web 开发的同学们来说，应该是知识体系库中的一个基础环节。针对浏览器的 http 缓存的分析也算是老生常谈了，每隔一段时间就会冒出一篇不错的文章，其原理也是各大公司面试时几乎必考的问题。 http 相关知识 HTTP 请求的过程我们知道，在浏览器地址栏敲入域名后，会发生 DNS 解析，得到实际 ...

Posted by Li Yucang on October 3, 2017

web项目通知实现

给web加个酷炫的提醒吧

web 项目通知实现在一般的 web 项目中，通知可以说是比较常见的。私信、在线提问、或者一些在线即时通讯工具我们总是希望第一时间知道对方有了新的反馈，这个时候，就需要页面给予即使的通知。传统的通知实现在以前，我们的通知实现主要是修改页面的标题内容来实现，实现原理其实很简单，就是定时器不断修改 document.title 的值来产生视觉上的提示效果。闪烁效果 setInt...

Posted by Li Yucang on September 11, 2017

页面的重绘与回流

理解页面的渲染机制

页面的重绘与回流写在前面资源加载执行循序关于 JS 和 CSS 资源在 html 中的位置对自己以及其他资源加载的影响，这一块笔者一直存在疑惑，翻阅了很多资料，发现不同浏览器对资源的加载有一套自己的优化方案，所以并没有明确的答案。但不管怎么优化，有几个加载过程都会遵守的守则： JS 有可能会修改 DOM, 比如 document.write. 这意味着，在当前 JS 加载...

Posted by Li Yucang on July 21, 2017

Javascript作用域和变量提升

探索变量的生命周期

Javascript 作用域和变量提升 js 作用域 js 作用域分析 ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景：内层变量可能会覆盖外层变量。用来计数的循环变量泄露为全局变量。 ES6 在这个基础上引申出来一个叫做“块级作用域”的概念，即“ {} 中间的部分是一个块级作用域”。例如：for 循环、 if 逻辑判断、while 循环等...

Posted by Li Yucang on April 11, 2017

深入理解CSS中的层叠上下文和层叠顺序

理解页面元素层叠的奥秘

深入理解 CSS 中的层叠上下文和层叠顺序什么是层叠上下文层叠上下文，英文称作”stacking context”. 是 HTML 中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在 z 轴上就“高人一等”。这里出现了一个名词-z 轴，指的是什么呢？ z 轴表示的是用户与屏幕的这条看不见的垂直线。层叠上下文是一个概念，跟「块状格式化上下文(BFC)」类似。...

Posted by Li Yucang on February 13, 2017

http状态码

常见状态码必备手册

http 状态码基本介绍状态码和状态码的英文名称用于简单描述请求的结果。常见的比如: 200 OK，表示请求成功。 404 Not Found，表示请求的资源未找到。形如 200 这样的状态码，这里的 3 位数字中第 1 位数字，通常表示响应的类别（会有一两个例外），大致可以分成以下几类: 状态码含义 ...

Posted by Li Yucang on December 2, 2016

简单明了区分escape、encodeURI和encodeURIComponent

js编码的几种方式

简单明了区分 escape、encodeURI 和 encodeURIComponent 前言讲这 3 个方法区别的文章太多了，但是大部分写的都很绕。本文试图从实践角度去讲这 3 个方法。 escape 该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。所以就不讨论了。 encodeURI(URI) 由该方法...

Posted by Li Yucang on October 22, 2016

彻底搞懂white-space、word-break、word-wrap

解析页面文本换行机制

彻底搞懂 white-space、word-break、word-wrap 今天我们来讲一下 css 中三个让人迷惑而傻傻分不清的属性，在平时我们可能有用到过这些属性，但我们真的有把它们弄懂吗？今天我来带大家把这三个属性彻底搞清楚！本篇文章使用的测试代码如下： .box{ width: 180px; border: 1px solid black; } <div cl...

Posted by Li Yucang on August 13, 2016

Li Yucang