Web前端性能优化——编写高效的JavaScript
发布时间：2016/3/26 14:37:14 阅读(5482)条评论(0)条
前言随着计算机的发展，Web富应用时代的到 来，Web 2.0早已不再是用div+css高质量还原设计的时代。自Gmail网页版邮件服务的问世开始，Web前端开发也开启了新的纪元。用户需求不断提高，各 种新的技术层出不穷，前端工程师的地位也越来越重要。然而任何事物都是有两面性的，随着前端技术的发展，前端业务越来越繁重，这大大增加了JS代码量。因 此，要提高Web的性能，我们不仅需要关注页面加载的时间，还要注重在页面上操作的响应速度。那么，接下来我们讨论几种能够提高JavaScript效率 的方法。 一、从JavaScript的作用域谈起当JavaS...
未完，继续阅读→关键字：
js 优化 前端 css图片文字水平垂距中
发布时间：2016/3/17 22:16:22 阅读(5745)条评论(0)条
一、本文概述想必大家在做效果的时候经常会碰到文字会垂直距中的效果，单行、多行混合的情况，单行距中已无问题，height,line-height又或者padding:上下相同即可。在网上搜索到不少资料，本人实践后的经验是父级标签属性：display:table-cell;vertical-align:middle;距中标签元素：vertical-align:middle;display: inline-block;使用以上两个技巧即可以使得标签内的文字或图片垂直距中。当然这些使用的同时会有些属性会干扰到垂直距中，如：position中的absolute,fix（定位）,和flaot中的left,right（浮动）如果还有其它属性请通知我!...
未完，继续阅读→关键字：
css 图片 文字 距中 利用css3-animation来制作逐帧动画
发布时间：2016/3/9 21:14:30 阅读(6871)条评论(0)条
css3我在5年之前就有用了，包括公司项目都一直在很前沿的技术。最近在新的项目中,用了大量的css3动画，但是真的沉淀下来仔细的去深入css3动画的各个属性发现还是很深的，这里就写下关于帧动画steps属性的理解我们知道css3的animation有八个属性animation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-play-stateanimation-fill-modeanimation-timing-function其中1-7大多都有介绍，但是animation-timing-function是控制时间的属性在取值中除了常用到的 三次贝塞尔曲线 以...
未完，继续阅读→关键字：
css3 animation 动画 在javascript中event的target和currentTarget的区别
发布时间：2015/12/17 11:47:06 阅读(5369)条评论(0)条
avaScript的event对象中event.target指代的是:触发事件的元素event.currentTarget指代的是:事件绑定的元素<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="test"> <span>aaa</span> <span>bbb</span> <span>ccc</span> </div> <...
未完，继续阅读→关键字：
js event CSS定位属性之间的相互作用
发布时间：2015/10/28 17:27:41 阅读(5186)条评论(1)条
1. 引言原文：bitsofcode的HOW POSITIONING CSS PROPERTIES INTERACT译者：爱前端，乐分享的FedFun，前端痴王海庆的博客。译言：来看下CSS标布局情况下，定位相关属性之间的相互作用，意译为主，不当之处敬请指正。阅读建议5分钟。2. 正文在定位元素时，我们经常用到四个属性display、position、float和偏移属性top right bottom left等。但不是在每个元素上都可以同时应用这四个属性，一些特殊的值组合会覆盖其他属性的应用，这些组合有：display: noneposition: absolute或position: fixedfloat: left或float: rightposition: static接...
未完，继续阅读→关键字：
css 如何解决 手机版 uc 浏览器不能 复制内容的bug
发布时间：2015/10/13 17:24:31 阅读(29932)条评论(0)条
做手机版网页的时候发现使用UC浏览器的时候不能手动复制内容的Bug 一直找也找不到问题。然后就自己从页面找问题发现页面有使用<meta name="browsermode" content="application"/>时UC 浏览器不能复制网页中的内容。所以在这里记录下来。希望能帮助到那些碰到过一样问题的朋友提个醒。顺便在这里贴一个我使用的手机默认设置<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" name="viewport"/><meta name=&qu...
未完，继续阅读→关键字：
网页 浏览器 复制 web app模拟checkbox与radio实例代码下载
发布时间：2015/9/23 17:27:19 阅读(7422)条评论(0)条
一、开篇现在经常可以在网络上看到一些非常奇特的表单元素，例如Checkbox复选框和Radiobox单选框，而且更让 人蛋疼的是各个浏览器的样式还不统一，今天做了一个用标签模拟checkbox与radio的实例，主要是是近做手机 web App时发现默认的样式很不好看。所以突然就做了下，先来看看 预览图： 二、主要思路模拟的作用是为了给用户更好的体验效果，在代码中使用的时候隐藏真实checkbox或radio按钮。然后用相关标签做效果并且结合JS实现真实的input与效果的值是统一的。如下源代码：<span class="label"><em cla...
未完，继续阅读→关键字：
手机 模拟 radio checkbox 移动端开发，几个你可能不知道的CSS单位属性
发布时间：2015/6/18 21:04:06 阅读(7408)条评论(0)条
1. rem"em" 单位是我们开发中比较常用到的，它表示以当前元素的父元素的单位大小为基准来设置当前元素的大小；“rem” 中的 “r” 代表 “root”，它表示以根（即“html”）元素的单位大小为基准来设置当前元素的单位大小，所以不管当前元素是任意子节点，一旦设单位大小为 “rem” 那么这个元素大小都是以根元素单位为参考的，这里的 “em” 和 “rem” 均具有继承性。2. vw 和 vh（移动端开发个人最喜欢的单位属性，也是这次介绍的重点...
未完，继续阅读→关键字：
移动 css rem em iScroll5移动端框架滚动类
发布时间：2015/6/11 16:16:43 阅读(6844)条评论(0)条
之所以iscroll会诞生，主要是因为无论是在以前的iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容。 这个不幸的规则导致所有web-app要模拟成app的样子时，只能由一个绝对定位的header或是footer再加上一个可以内容的滚动的中间区域组成。 position:fixed在ios和android的使用，而ios4（4以及以前）系统以及以前的安卓系统（2.3及以前）并不支持position:fixed。这个问题可以使用iScroll框架进行解决。 之前一直都在使用iScroll4.0版本，后来查到iScroll5已经比较稳定了...
未完，继续阅读→关键字：
插件 iscroll 移动端 框架 手机网站使用iscroll插件链接无法点击解决方案
发布时间：2015/5/29 15:12:29 阅读(7822)条评论(0)条
在网上下载iscroll之后，运行测试到第二个demo 时，在火狐上面运行非常好，但是当我用手机测试的时候，我发 现，div中链接无法点击，此在网上也找不到相对应的解决方案，于是再检查看看其他的例子是不是也不能点击的时候，click例子在眼前一亮，click 案例里面的链接是可以点击的，于是乎，我对比了两个例子的调用插件js，果然是js的原因myScroll = new IScroll('#wrapper'); click jsmyScroll = new IScroll('#wrapper', { mouseWheel: true, click: true }); 发现在js里面有click:true，我想，问题我找...
未完，继续阅读→关键字：
插件 iscroll 点击 前端人员必看CSS命名规范
发布时间：2015/5/19 14:55:28 阅读(9125)条评论(0)条
作为前端的设计人员，对于CSS的接触，就像吃饭一样。所以CSS命名规范 命名是 前端人员必看的。文章整理了Web前端开发中的各种CSS规范，包括文件规范、注释规范、命名规范、书写规范、测试规范等。一、文件规范1、文件均归档至约定的目录中。具体要求通过豆瓣的CSS规范进行讲解：所有的CSS分为两大类：通用类和业务类。通用的CSS文件，放在如下目录中：基本样式库 /css/core通用UI元素样式库 /css/libJS组件相关样式库 /css/ui业务类的CSS是指和具体产品相关的文件，放在如下目录中：读书 /css/book/电影 /css/movie/音乐 /css/music/社区 ...
未完，继续阅读→关键字：
css 命名 技巧 CSS3的background-size优化Sprites图显示实例
发布时间：2015/5/16 11:05:42 阅读(6347)条评论(0)条
本篇主要是讲css3如何使用background-size与sprites同时使用技巧。运行查看效果时别忘了用支持CSS3 的浏览器查看.ie9+,chrome,firefox,...一、background-size使用方法 可以创建一张Sprites图，这张图既有普通分辨率图像，又有高分辨率下的图像？你可以，但你还是要面对，你的用户在一个较慢的带宽下下载一个大图的烦恼。你也要同时面对IE9以下的浏览器不支持background-size的麻烦问题。你最好还是分别为高分辨率和普通分辨率创建不同的两张Sprites图。这个时候又有不同的声音了，这不是增加工作量吗？但这真的不是,在我的工...
未完，继续阅读→关键字：
css3 sprite 技巧