• web前端图片极限优化策略

      随着web的发展,网站资源的流量也变得越来越大。据统计,60%的网站流量均来自网站图片,可见对图片合理优化可以大幅影响网站流量,减小带宽消耗和服务器压力。 一、现有web图片格式 我们先来看下现在常用的web图片的格式: 图片格式 支持透明 动画支持 压缩方式 浏览器支持 相对原图大小 适应场景 baseline-jpeg 不支持 不支持 有损 所有 由画质决定 所有通用场景 progressive-jpeg 不支持 不支持 有损 所有 由画质决定 所有通用场景, 渐进式加载 gif 支持 支持 无损 所有 由帧数和每帧图片大小决定 简单颜色,动画 png 支持 不支持 无损 所有 由png色值位数决定 需要透明时 webp 支持 不支持 有损 Chrome、Opera 由压缩率决定 复杂颜色及形状,浏览器平台可预知 apng 支持 支持 无损...


  • html与css编码规范

    1. 规范概述 规范的制定是我们长期以来对工作的积累与沉淀的产物,帮助我们更快、更好、更高效的完成繁重、复杂、多样化的任务,我们制作规范的主要目的在于: 降低每个组员介入项目的门槛成本; 提高工作效率及协同开发的便捷性; 高度统一的代码风格; 提供一整套HTML、CSS解决方案,来帮助开发人员快速做出高质量的符合要求的页面; 2. 基本信息 规范名称 Cook 制订日期 2013.12.18 当前版本 beta0.1 对规范进行初步定义 规范制定 最后更新 2014.12.19 3. 文档目录结构 待添加。 4. 通用约定 4.1 分离 结构(HTML)、表现(CSS)、行为分离(JavaScript) 将结构与表现、行为分离,保证它们之间的最小耦合,这对前期开发和后期维护都至关重要 4.2 缩进 使用tab(4个空格宽度)来进行缩进,可以在IDE里进行设置 4.3 编码 以 UTF-8 无 BOM 编码作为页面格式; 在HTML中文档中用 来指定编码; 不需要为CSS显示定义编码,因为它默认为utf-8; 4.4 小写 所有的HTML标签必须小写 所有的HTML属性必须小写 所有的样式名及规则必须小写 4.5 注释 尽可能的为你的代码写上注释。解释为什么要这样写,它是新鲜的方案还是解决了什么问题。 4.6...


  • css学习资源汇总

    css reset 目前有两种reset,一种是属于修正式的reset,这个以normalize.css为代表;另一种就是我们常用的清零式reset如最简单的1 *{margin:0;padding:0;},目前各个框架都是先以normalize为基础,然后实现清零。 清零之外,我们会给html或body添加些font属性或背景,也会添加一些基础的类,方便使用,如1 clearfix ie bug集合 关于如何给各种浏览器打bug,可查询: browser hacks 因为里面有很多问题都是ie6/7的,所以大家多少都应该了解过,应该没什么问题,如果问题比较多的话,我再考虑ppt分享下。 http://www.qianduan.net/ie6u002639s-bug-amended-10-tips.html 清除浮动包括清除子元素的浮动和清除上级元素的浮动,其中清除上级元素的浮动,只需设置clear为both(或left,right)就可以了,而清除子元素的浮动则可以用空标签、clearfix或overflow。因清除上级元素的浮动比较简单,而空标签法清除子元素浮动会增加额外标签,所以推荐使用clearfix和overflow。 除此之外,1 display:inline-block;也可以清除子元素浮动。 清除浮动解决方案 PostCSS https://github.com/postcss/postcss 根据caniuse(https://github.com/postcss/postcss )的数据,自动生存浏览器前缀 grunt-autoprefixer: https://www.npmjs.com/package/grunt-autoprefixer gulp-autoprefixer: https://www.npmjs.com/package/gulp-autoprefixer flex应用场景demo见附件 深入了解flex ### 图文混排解决方案](http://www.w3cplus.com/solution/imagetextmix/imagetextmix.html) 除上述方法外,还有昨天发的flex方法 css3 学习资源 先放个资源集合,以后再整理个单个属性的关键点: css3 files MDN CSS reference css3 maker 列表类解决方案 http://www.w3cplus.com/solution/itemlist/itemlist.html 同样,这个也可以用flex来解决 关于css的class命名 BEM方式,这个大家都知道了 CSS命名神马的真心难 原子类class base基础类的那些事儿 分类形式class命名 1、某些移动端的浏览器不支持1...


  • ionic进阶开发中的命令使用

    ionic 开发构建之路 1,创建一个自定义路径的项目 如何基于现有的代码路径创建一个项目 1 2 3 4 5 6 7 8 9 10 11 12 13 ionic start projectPath repositryPath eg: ionic start ./demo "E:\github\qvm\dist" #注意带上引号,否则报错了,这里如果需要做的话只需要做到将dist的目录创建就可以了,而且文件使用相对路径 ionic serve -p 80 #在80端口启动调试服务并自动watch ionic platform add android/ios ionic run/emulate android/ios ionic io init #添加签名和授权 ionic resources -i a.png #上传app icon图片,默认icon放在resources下面 ionic...


  • Babel下的ES6兼容性与规范

    ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问题,但大家仍很疑惑,使用ES6会有哪些兼容性问题。 一、兼容性问题现状   针对ES6的新特性兼容性问题,目前解决的方案是使用语法解析转换工具将es6语法转化为大部分浏览器识别的es5语法,通用的转化方案有babel,traceur,jsx,typescript,es6-shim。当然es6在服务器端也存在兼容性问题,这里由于只考虑到浏览器端的开发,暂不讨论。下面有一些常用的解决方案和兼容es6的兼容性比较~ https://github.com/babel/babel/issues/596 http://kangax.github.io/compat-table/es6/ 考虑到解决方案的多样性,我么会着重考虑以下几个问题: 1,兼容性:是否能解决目前常见的所有语法兼容转换 2,易用性:能够很方便的接入到现有的开发构建体系中 3,通用性:业界有较大认可,目前没有很大问题 4,持续性:有较权威的团队维护,并能不断更新   综合四点,我们仍然考虑使用babel作为我们的兼容性解决方案。即使以后需要更换,只需要更换更换工具就可以了,原有代码的写法可以不动。   除了后面三点,我们可能比较关注babel处理es6时的兼容性问题。因为es6里面增加了较多的内容,转换为es5没有对应语法与之对应,所以使用时要尤为注意。为此也没有很好的方法进行判断,只能对于es6里的新增内容进行编译,判断是否可以转为es5语法。 ES6新特性在Babel下的兼容性列表 ES6特性 兼容性 箭头函数 支持 类的声明和继承 部分支持,IE8不支持 增强的对象字面量 支持 字符串模板 支持 解构 支持,但注意使用方式 参数默认值,不定参数,拓展参数 支持 let与const 支持 for of IE不支持 iterator, generator 不支持 模块 module、Proxies、Symbol 不支持 Map,Set 和 WeakMap,WeakSet 不支持 Promises、Math,Number,String,Object 的新API 不支持 export & import 支持 生成器函数...


  • es6 编码规范

    JavaScript 规范(ES6新增) 一、类型规范 二、字符串 三、数组类型 四、解构 五、函数 六、箭头函数 七、对象 八、类 九、模块 十、Iterators 和 Generators(不推荐) 十一、属性访问 一、类型规范 对于常量或不修改的变量声明使用const,对于只在当前作用域下有效的变量,应使用let,全局变量使用var。将所有 const 变量放在一起,然后将所有 let 变量放在一起 1 2 3 4 5 6 7 8 9 10 11 const foo = 1; let foo1 = 2; let bar = foo; bar = 9; foo1 = 3;...


  • Mock.js前端开发cgi数据模拟工具

    1. 什么是Mockjs http://mockjs.com/   Mockjs是个能够拦截页面ajax请求并模拟返回数据的小工具,借助Mockjs,前端开发中在后台测试接口还没有给的时候就可以自己拦截请求模拟数据进行愉快的开发了,所以只要制定好了协议,前后端分离开发的成本可以降到基本为0,也不需要联调工具了 2,Mockjs主要功能 基于数据模板生成模拟数据 基于html模板申城模拟数据 拦截并模拟ajax请求   当然mock模拟的数据不只是随便的输出字符串,它包含了各种格式的模拟数据,例如姓名,段落,时间,日期,图片地址,身份证号,电话,邮箱,ip等等,所以以后搞数据自动校验什么的再也不用手动输入测试了。也就是Mock自动了做了很多测试调试中的那部分体力活,我们只需要安静的写代码就好了。   数据模板则是根据一个模板自动根据某个规则产生数据,例如序号产生自增的数组等 数据模板定义 DTD 数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值: 1 'name|rule': value 例如: 属性名 和 生成规则 之间用 分隔。生成规则是可选的。生成规则 有 7 种格式: 1 2 3 4 5 6 7 'name|min-max': value 'name|count': value 'name|min-max.dmin-dmax': value 'name|min-max.dcount': value 'name|count.dmin-dmax': value 'name|count.dcount': value 'name|+step': value   生成规则的含义需要依赖属性值才能确定。属性值中可以含有@占位符。属性值还指定了最终值的初始值和类型,其中属性值的生成是根据Mockjs里面的随机几个固定字符串生成的。 1...


  • isomorphic reactjs

    isomorphic javascript web应用从最早静态页面、到php后台框架输出、到mv*为主的SPA、到基于node中层的直出,目前有人提出web的下次改变可能将是基于isomorphic javascript的前后台同构应用。 一、目前主流web app的特点 目前主要的应用都是基于mv*基础上(backbone、ember、angular等)或工程师自己的mvc思想上的应用。 通常做法是,页面所有的数据交互在客户端(一般指浏览器或移动webview)完成,后台只负责输出数据或一个初始的空白页面,而页面的数据则通过加载后的js进行加载渲染,一般用户和开发者的体验都会比较好,but存在很多问题: SEO不可做。除了基础的meta信息,基本没有全文信息。搜索引擎爬虫并不能获取页面内容。 性能仍有问题。大量的内容渲染,逻辑判断、dom操作、网络交互都在客户端完成,页面上的空白时间很容易让用户厌烦。 可维护性。有些低耦合的逻辑模块希望在前后台复用,例如时间格式化,表单验证,我们考虑到某些因素都会前后都做一次。 二、Isomorphic JavaScript 通过nodejs,可以轻松创建一个web server,运行js模板将页面输出给浏览器。但是Isomorphic JavaScript使用的是在服务端和客户端运行的一套代码,可以运行js模板或者前端的框架,这就是 “Isomorphic JavaScript”(同构的JavaScript),借用一个图~ 要做到这件事,有几件事情必须要解决: 抽象 路由 获取数据 视图渲染 自动构建打包 三、 Isomorphic reactjs 基于这个思想,有人提出使用reactjs来进行直出,大致看下是怎么做的。 mv*驱动在客户端的dom渲染效率是很慢的,例如一个vm的生成要去扫描dom所有属性节点来获取directives、filter或者表达式。而且还有上面提到的三个问题,但是如果在服务端去做就可以解决这些性能问题。 但是问题来了,如何提前扫描节点生成vm,将里面所有的directive、filter和表达式输出呢?可行的做法是在构建混淆阶段去render出来,而且要对每个定义的节点属性的指令表达式去render,这样就行了。不过自己去做工作量就有些了,而且容易出问题 那用reactjs可以怎么搞? http://reactjsnews.com/isomorphic-javascript-with-react-node/ 看来又有人干了这件事情,思路类似,reactjs实现的原理是:使用react.renderToString方法将virtual dom转换为string输出到页面上。这样前端的react代码就完美在服务器跑起来了。 安装node-jsx,处理jsx语法: 1 npm install node-jsx 除了必要的工厂抽象模块,依然可以像原来一样书写react模块,这样既可以被前端打包处理,也可以通过node router render出来。 1 2 3 4 5 6 7 8...


  • 移动端mvvm框架qvm实现

    gitHub地址 1,移动端minimvvm框架qvm实现 qvm概念,一个适用于移动端的mini mvvm(什么是mvvm?没了解的同学自己去了解)框架。参考了angular和vuejs的设计实现思路,并进行简化封装,目前使用的zepto基本依赖库,使用最少的代码实现了基础功能版。 2,为什么要做它 PC浏览器时代,实现mvvm有着麻烦的兼容性问题。而在移动浏览器时代,浏览器原生的支持可以让我们用最少的代码来实现一个mvvm框架库,来最大程度的减少移动端业务代码的开发工作。预计对于中大型的移动前端应用项目,使用mvvm能减少至少30%的业务量,让项目更容易维护。 (不过目前仍有很多不完善的地方后面需要持续改进) 3,及其简单的API介绍 directive: 以q-开始的属性为我们定义的元素动作指令 vm模型结构介绍: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 { $id: 823832887973495, //qvm对象的全局id,每个qvm对象对应一个 $elem: #div, //对应的view $model: { //viewModel,通过directive关联view和model的操作 text:{ ns: ns, //获取对象data或指令的namespace accessor: accessor, //同一的外部访问器,vm通过修改它来改变 key: text, //指令名称 directive:...


  • gulp搭建简单构建环境

    Gulp 是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩、图片压缩、JS合并、SASS同步编译并压缩CSS、服务器控制客户端同步刷新。 所有功能前提需要安装nodejs和ruby。 Gulp安装 全局安装Gulpjs npm install -g gulp #全局安装 局部安装Gulpjs npm install gulp –save-dev # 局部安装 全局安装 将安装包放在 /usr/local 下 可以直接在命令行里使用 本地安装 将安装包放在 ./node_modules 下(运行npm时所在的目录) 可以通过 require() 来引入本地安装的包 选择Gulp组件 前端项目需要的功能: 1、图片(压缩图片支持jpg、png、gif) 2、样式 (支持sass 同时支持合并、压缩、重命名) 3、javascript (检查、合并、压缩、重命名) 4、html (压缩) 5、客户端同步刷新显示修改 6、构建项目前清除发布环境下的文件(保持发布环境的清洁) 通过gulp plugins,寻找对于的gulp组件 gulp-imagemin: 压缩图片 gulp-ruby-sass: 支持sass gulp-minify-css: 压缩css gulp-jshint:...

公众号

加我赏红包,哈哈哈

公众号

欢迎关注 极限前端 公众号