切图崽的自我修养－如何提高项目的加载速度

前言我的项目没问题，是用户的网络环境不够好前端作为一个最贴近用户的技术工种，毫无疑问应该把户体验放在第一位. 而用户体验，基本正比于页面的打开速度，特别是做移动端的同学，所以如何优化自己的项目，提高页面的加载速度成为重中之重.资源的下载及解析对前端同学来说，弄清楚页面上资源的下载和解析顺序是及其重要的，知道了它们的加载顺序，就知道对于特定的场景，应该如何去优化. 一般来说，

业界 2016年07月05日

前端开发之单一职责原则

单一职责原则（SRP：Single responsibility principle）又称单一功能原则，面向对象五个基本原则（SOLID）之一。它规定一个类应该只有一个发生变化的原因。在前端开发的过程中，一个需求总会有多种解决方法，如果多人开发，其实我觉得单一职责挺适合前端的，前阵子看了下实习生的代码，就想举这个例子来说说。需求描述：两个input框作为查询条件，一个按照名

业界 2016年07月05日

切图崽的自我修养－页面加载Js的常见方式

前言我就想随便找个地方放东西不行吗？看别人写的代码，中写原生js无一例外加了window.onload, jquery示例中无一例外的加了 $(function(){}) But why? 从此这两尊神秘的大佛让我畏惧了很久，今天写的博文，就是为了崇尚科学破除迷信，撕下'规则' 的神秘面纱. 而这神秘的面纱，本质就是浏览器加载js的方式总的来说，浏览器加载js通常就这么

业界 2016年07月05日

onselect 与 onselectstart 的区别

onselect 与 onselectstart 都属于 JavaScript 当中的 DOM 事件，由于它们二者的拼写比较相似，所以最初使用时弄混了两个事件的效果，在此做一个简单的记录。背景之前在公司的前端项目中，自己写了一个基于 jquery 的分页器，在测试的时候发现了一个问题：当鼠标连续快速点击【下一页】按钮的时候，会将按钮上的文字选中，变成蓝色，体验不是很好。因为

业界 2016年07月05日

杂(css)

本用于记录个人学习记录： http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B

业界 2016年07月05日

浏览器渲染的那些事（三）

终于到了布局的部分了！布局当渲染对象被创建并添加到树中，是没有位置和大小的，计算这些值的过程称为layout或reflow。布局是一个递归过程，由根渲染对象开始，对应html文档元素，布局继续递归的通过一些或所有的frame层级，为每个需要几何信息的渲染对象进行计算。跟渲染对象位置是0，0。所有渲染对象都有一个layout或reflow方法，每个渲染对象调用需要布局的chi

业界 2016年07月05日

浏览器渲染的那些事（三）

终于到了布局的部分了！布局当渲染对象被创建并添加到树中，是没有位置和大小的，计算这些值的过程称为layout或reflow。布局是一个递归过程，由根渲染对象开始，对应html文档元素，布局继续递归的通过一些或所有的frame层级，为每个需要几何信息的渲染对象进行计算。跟渲染对象位置是0，0。所有渲染对象都有一个layout或reflow方法，每个渲染对象调用需要布局的chi

业界 2016年07月05日

AngularJS自定义表单验证

Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox)，也实现了很多指令做为验证(required, pattern, minlength, maxlength, min, max)。在自定义的指令中，我们可以添加我们的验证方法到ngModelController的$val

业界 2016年07月05日

阿拉伯-汉字-数字转换

说明本文实现了一个从阿拉伯数字到中文数字，以及从中文数字到阿拉伯数字的转换算法。同时用Vuejs和Angularjs同时实现了一遍，对比了一下这两个框架的优劣。在本例中，Vuejs的方便灵活性完胜Angularjs。源代码在这里阿拉伯数字转中文给定一个阿拉伯数字，把它转变为汉语表示的数字。算法根据中文的计数方法，可以把阿拉伯数字按4个一组分成若干section，每个sect

业界 2016年07月05日

HTML语义化

近来看面试题的时候，经常看到一个问题：HTML语义化是什么意思？w3school里面有html标签的含义。然而HTML5中对一些标签进行了修改，由于不了解H5的新定义，就很容易弄错标签之间的意思。例如：既然i标签是指斜体的意思，那么为什么font-awesome这类字体要用i标签呢？这不是反语义化了吗？除此之外，em和strong都是有强调的意思，又有什么区别呢？可能这个时

业界 2016年07月05日