Houdini:CSS 领域最令人振奋的革新

原文链接:Houdini: Maybe The Most Exciting Development In CSS You’ve Never Heard Of 已得到原文作者 Phil Walton 以及原文发布平台 smashingmag 授权翻译 想要使用某种 CSS 特性,但是因为浏览器兼容性问题而没法使用?更糟糕一点,所有浏览器都支持这种特性,但支持度不完全,在某些情况下会有 bug 出现、支持性不一致,甚至于完全不兼容。如果你曾经遇到过上述情况(我肯定你一定遇到过),那你得好好关注 Houdini。 Houdini 是 W3C 新成立的一个任务小组,它的终极目标是实现 css 属性的完…Continue Reading →

Javascript 的 Debounce 和 Throttle 的原理及实现 · Issue #7 · lishengzxc/bblog

分析_的.debounce和.throttle DOM 上有些事件是会频繁触发的,比如mouseover、scroll、resize…。以前有个需求,是做一个图表,是用canvas画的,最初,如果图表画完,用户拖拽浏览器窗口,改变浏览器大小的话,图表并不会自适应的变化,所以就需要监听resize事件,每当窗口大小变化后,再重新绘制。但是resize是频繁触发的,这就导致了页面的明显的卡顿,因为每次resize后的回调要执行大量的计算。 当时比较急,遇到这个问题以后,直接就查了.debounce和.throttle,就直接用了lodash。现在回过头了,看下源码,看看它的实现。 De…Continue Reading →

说说 Javascript 的 Date · Issue #5 · lishengzxc/bblog

基础的 Date() 就不说了~ 如何获得某个月的天数? 不知道大家遇到过这个问题吗?我想如果你们写过日期组件一定有这个问题,我当时的解决方案是这样的: 以下的三个方法,month 参数我都根据 JS 本身对于 Date 的月份定义,采用0为1月 最老实的办法 const EVERY_MONTH_DAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; function getDays(year, month) { if (month === 1 && isLeap(year)) return 29; return EVE…Continue Reading →

【前端性能】高性能滚动 scroll 及页面渲染优化 – ChokCoco – 博客园

最近在研究页面渲染及web动画的性能问题,以及拜读《CSS SECRET》(CSS揭秘)这本大作。 本文主要想谈谈页面优化之滚动优化。 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动。因为本文涉及了很多很多基础,可以对照上面的知识点,选择性跳到相应地方阅读。      滚动优化的由来 滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件。简单的看看: 1 2 3 4 var i = 0; window.addEventListener(‘scroll’,functio…Continue Reading →

「理解HTTP」之常见的状态码 – 魅族科技开发团队 – SegmentFault

状态码的职责是当客户端向服务器端发送请求时,描述返回请求结果。借助状态码,用户可以知道服务器端是正常处理了请求,还是出现了什么错误。 RFC2616定义的状态码,由3位数字和原因短信组成。 数字中的第一位指定了响应类别,后两位无分类。响应类别有以下5种: Type Reason-phrase Note 1XX Informational 信息性状态码,表示接受的请求正在处理 2XX Success 成功状态码,表示请求正常处理完毕 3XX Redirection 重定向状态码,表示需要客户端需要进行附加操作 4XX Client Error 客户端错误状态码,表示服务器无法处理请求 5XX S…Continue Reading →

HTTP header详解_PHP程序员,雷雪松的博客

HTTP(HyperText Transfer Protocol)即超文本传输协议,所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。HTTP协议采用了请求/响应模型,浏览器或其他客户端发出请求,服务器给与响应。HTTP header 大体分为Request和Response两部分。 Requests部分 Header 解释 示例 Accept 指定客户端能够接收的内容类型 Accept: text/plain, text/html Accept-Charset 浏览器可以接受的字符编码集。 Accept-Charset: iso-8859-…Continue Reading →

可伸缩的同构Javascript代码 | EFE Tech

原文:http://blog.nodejitsu.com/scaling-isomorphic-javascript-code/ 译者注:这是一篇2011年的老文了,最近苦恼于单页面应用的首屏速度与SEO问题,期望本文能给有同样烦恼的同学们带来些启示。 先花点时间想想你是有多么频繁地听到“Model-View-Controller”(MVC)这词儿,但你真正明白它的意义吗?在较高层次上而言,它是指在一个基于图像系统(非光栅化图像,比如游戏)以展示为主的应用中对功能的关注点分离(separation of concerns)。进一步看,它就是一堆表示不同事物的专有名词。过去,许多开发者社区都创造…Continue Reading →

前端文本截断 | EFE Tech

误区 在设计产品时,由于不少产品经理、工程师并没有「字符不一定等宽」的概念,往往会给出「超过 n 个字符截断显示,英文数字算一个字符,汉字算两个字符」这样的需求。要知道,这里面的问题有很多: 为了显示效果,前端往往会采用优先西文字体族的 font-family 设置,即西文字符用西文字体,汉字用中文字体,这就很容易使得文本的宽度不好根据字符数来控制。首先,非代码的内容本身就不一定适合用等宽西文字体显示。其次即使用了等宽西文字体,汉字也基本不可能正好是其两倍宽。满足这个需求的,只能放弃西文字体,让西文字符也使用中文字体,并且使用中易系列的几个字体了(比如 SimSun,也就是 Windows 下…Continue Reading →

使用 AMD、CommonJS 及 ES Harmony 编写模块化的 JavaScript

模块化 解耦应用程序的重要性 当我们称一个应用程序是模块化的的时候,我们通常是指它由一组高度解耦的、存放在不同模块中的独特功能构成。你可能已经知道,松散耦合通过尽可能地去除依赖性来让可维护性更加简单易得。当这一点被有效实现的时候,系统中某一部分的变化将如何影响其它部分就会变得显而易见。 然而,与一些更传统的编程语言不同的是,JavaScript 的当前版本(ECMA-262) )并没有为开发者们提供以一种简洁、有条理地的方式来引入模块的方法。规范的一大问题,就是未曾在这方面投入足够多的考量。直到近年来,人们对更为有序组织的 JavaScript 应用的需求变得越来越显著,这一情况才有所改观。 …Continue Reading →

JavaScript API 设计原则 – 码农网

前段时间组织优化我们的原生模块 API(iOS、Android 模块封装成 JavaScript 接口),于是学习了几篇 JavaScript API 设计的文章,尽管是旧文,但受益匪浅,这里记录一下。 好的 API 设计:在自描述的同时,达到抽象的目标。 设计良好的 API ,开发者可以快速上手,没必要经常抱着手册和文档,也没必要频繁光顾技术支持社区。 流畅的接口 方法链:流畅易读,更易理解 //常见的 API 调用方式:改变一些颜色,添加事件监听 var elem = document.getElementById(“foobar”); elem.style.background = “r…Continue Reading →