摘要：
我们在上一篇介绍了JS Object的实现，这一篇将进一步介绍JS Array的实现。 在此之前，笔者将Chromium升级到了最新版本60，上一次是在元旦的时候下的57，而当前最新发布的稳定版本是57。57是三月上旬发布的，所以Chrome发布一个大版本至少用了两、三个月的时间。Chrome 60 阅读全文
摘要：
什么是页面卡顿？如下： 当拖动页面或者滚动的时候页面一卡一卡的，看起来不连贯，我们就说页面卡了，这是一种非常不友好的体验，怎么衡量页面卡顿的情况呢？ 1. 失帧和帧率FPS 如果你家里买了电视盒的话，在设置里面应该会有一个输出设置： 上面选中的60Hz就是帧率(frame per second)，即 阅读全文
摘要：
在上一篇《从Chrome源码看浏览器如何构建DOM树》介绍了blink如何创建一棵DOM树，在这一篇将介绍事件机制。 上一篇还有一个地方未提及，那就是在构建完DOM之后，浏览器将会触发DOMContentLoaded事件，这个事件是在处理tokens的时候遇到EndOfFile标志符时触发的： C+ 阅读全文
摘要：
最近下了Chrome的源码，安装了一个debug版的Chromium研究了一下，虽然很多地方都一知半解，但是还是有一点收获，将在这篇文章介绍DOM树是如何构建的，看了本文应该可以回答以下问题： IE用的是Trident内核，Safari用的是Webkit，Chrome用的是Blink，到底什么是内核 阅读全文
摘要：
什么是代码耦合？代码耦合的表现是改了一点毛发而牵动了全身，或者是想要改点东西，需要在一堆代码里面找半天。由于前端需要组织js/css/html，耦合的问题可能会更加明显，下面按照耦合的情况分别说明： 1. 避免全局耦合 这应该是比较常见的耦合。全局耦合就是几个类、模块共用了全局变量或者全局数据结构， 阅读全文
摘要：
本文介绍https连接的过程，通过抓包工具一步步分析https连接建立过程，尝试回答下面的问题：1.为什么https是安全的，安全在哪里？2.https是通过证书保证它的安全的么？3.如何检验证书的合法性？4. 证书为什么要购买？相信看了本文会有一个答案 阅读全文
摘要：
伪元素是一个好东西，但是很多人都没怎么用，因为他们觉得伪元素太诡异了。其实使用伪元素有很多好处，最大的好处是它可以简化页面的html标签，同时用起来也很方便，善于使用伪元素可以让你的页面更加地简洁优雅。 更好的阅读体验移步：http://yincheng.site/using-before-afte 阅读全文
摘要：
三角形的场景很常见，打开一个页面可以看到各种各样的三角形： 由于div一般是四边形，要画个三角形并不是那么直观。你可以贴一张png，但是这种办法有点low，或者是用svg的形式，但是太麻烦。三角形其实可以用CSS画出来。如上图提到，可以分为两种三角形，一种是纯色的三角形，第二种是有边框色的三角形，先 阅读全文
摘要：
由于前端是不能直接操作本地文件的，要么通过<input type="file">用户点击选择文件或者拖拽的方式，要么使用flash等第三方的控件，但flash日渐衰落，所以使用flash还是不提倡的。同时html5崛起，提供了很多的api操控，可以在前端使用原生的api实现图片的处理，这样可以减少后 阅读全文
摘要：
借用Effective之名，开始写Effective系列，总结一些前端的心得。 有些人写页面会走向一个极端，几乎页面所有的标签都用div，究其原因，用div有很多好处，一个是div没有默认样式，不会有margin、background等初始化设置，另外可能会觉得不用div还能用啥。所以看他的页面，一 阅读全文
摘要：
借用Effective之名，开始写Effective系列，总结一些前端的心得。 为什么说能使用html/css解决的问题就不要使用JS呢？两个字，因为简单。简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验，下面介绍几个实例。 1. 导航高亮 导航高亮是一种很常见的问题，包括当前页面 阅读全文
摘要：
在上一篇《webpack从入门到上线》介绍了wepack的配置和相关的概念，这一篇介绍怎样写一个webpack loader. 通过写一个js的html模板为例子。 上篇文章已提及，loader加载器就是对各种非正常资源的解析，转化成浏览器可以识别的js/css文件等，甚至可以说loader就是一个 阅读全文
摘要：
webpack是目前一个很热门的前端打包工具，官网说得很清楚，webpack的出现就是要把requirejs干掉。同时它还提供了十分便利的本地开发的环境。网上并不容易找到一个讲解得比较详细完整的教程，本文结合实践经验，总结一套可用的开发和上线的配置和流程。 首先，Require JS有什么问题 Re 阅读全文
摘要：
我们经常使用地图查位置、看公交、看街景，同时地图还开放第三方的API给开发者。利用这些API进行地图的个性化的展示和控制，例如北京被水淹了，开发一个网页显示北京被淹的地图，地图上面标志被水淹的位置、严重程度，或者我是交警，想要在地图上标志发生车祸、被交通管制的路段，甚至是利用地图的街景，控制街景的位 阅读全文
摘要：
本文介绍使用图标字体和SVG取代雪碧图的方法。雪碧图是很多网站经常用到的一种技术，但是它有缺点：高清屏会模糊、无法动态变化如hover时候反色。而使用图标字体可以完美解决上述问题，同时具备兼容性好，生成的文件小等优点。 阅读全文
摘要：
比较深入全面地介绍了什么是同源策略，同源策略的影响以及如何绕过同源策略进行CSRF攻击。同时跨域请求的实际应用，通过案例分析跨域请求的几种办法：cors、jsonp、子域域父域、iframe跨父域、postMessage实现frame和父窗口的通信 阅读全文
摘要：
依据w3c标准，重点介绍html5语义性标签的章节(outline)作用，以及使用html5新标签的好处 阅读全文
摘要：
logstash是一个强大的分析后端日志的开源软件，本文详细介绍了logstash的配置和图表使用，通过对访问日志的分析，能够抓取用户的地域分布、使用的终端、感兴趣的功能，接口的访问时间排序，或者是异常检测等等，而这些可以通过图表的方式很直观地展示出来，还可以进行关联操作。 阅读全文
摘要：
写了一个跨浏览器的html5表单验证插件，能够支持老的浏览器，并且统一错误文案提示的UI，提供了自定义文案、自定义样式的功能，支持多种错误类型的检验，同时支持自定义检验和异步检验。已经在生产环境得到很好的尝试 阅读全文
摘要：
居中在切图的时候是一个经常遇到的问题，有些时候不太好处理。这篇博客通过一个案例的变化，讨论了几种常见的左右和垂直居中的方式。一方面是做个总结，另一方面是寻求更好更合适的居中方式。 阅读全文