• 产品数据库设计

    app数据库数据 user表结构设计 字段 描述 类型 备注 userid 用户id Number 用户唯一id, 并非_id appid app对应的id Number 用户app的id name 用户名 String 用户名,用于登陆 password 密码 String 密码加密后密文 accessToken 第三方token String 第三方密文 nick 昵称 String 用户显示的昵称,不用于登陆 userType 用户类型 Number 0为注册用户,1为qq, 2为微信,3为微博 gender 性别 Number 1为男,0为女 realName 姓名 String 用户的真实姓名 age 年龄 Number 用户年龄,可以由生日推算 birth 生日...


  • 页面优化规则--yslow与pagespeed

    前端优化 Yslow-23条规则 减少HTTP请求次数 合并图片、CSS、JS,改进首次访问用户等待时间。 使用CDN 就近缓存==>智能路由==>负载均衡==>WSA全站动态加速 避免空的src和href 当link标签的href属性为空、script标签的src属性为空的时候,浏览器渲染的时候会把当前页面的URL作为它们的属性值,从而把页面的内容加载进来作为它们的值。测试 为文件头指定Expires 使内容具有缓存性。避免了接下来的页面访问中不必要的HTTP请求。 使用gzip压缩内容 压缩任何一个文本类型的响应,包括XML和JSON,都是值得的。 把CSS放到顶部 把JS放到底部 防止js加载对之后资源造成阻塞。 避免使用CSS表达式 将CSS和JS放到外部文件中 目的是缓存,但有时候为了减少请求,也会直接写到页面里,需根据PV和IP的比例权衡。 权衡DNS查找次数 减少主机名可以节省响应时间。但同时,需要注意,减少主机会减少页面中并行下载的数量。 IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时,IE 用户的图片下载速度就会受到影响。所以腾讯会搞N个二级域名来放图片。 精简CSS和JS 避免跳转 同域:注意避免反斜杠 “/” 的跳转; 跨域:使用Alias或者mod_rewirte建立CNAME(保存域名与域名之间关系的DNS记录) 删除重复的JS和CSS 重复调用脚本,除了增加额外的HTTP请求外,多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存,它们都存在重复运算JavaScript的问题。 配置ETags 它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性,例如某个文件在1秒内修改了10次,Etag可以综合Inode(文件的索引节点(inode)数),MTime(修改时间)和Size来精准的进行判断,避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用,可取后两个参数。使用ETags减少Web应用带宽和负载 可缓存的AJAX “异步”并不意味着“即时”:Ajax并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。 使用GET来完成AJAX请求 当使用XMLHttpRequest时,浏览器中的POST方法是一个“两步走”的过程:首先发送文件头,然后才发送数据。因此使用GET获取数据时更加有意义。 减少DOM元素数量 是否存在一个是更贴切的标签可以使用?人生不仅仅是DIV+CSS 避免404 有些站点把404错误响应页面改为“你是不是要找***”,这虽然改进了用户体验但是同样也会浪费服务器资源(如数据库等)。最糟糕的情况是指向外部 JavaScript的链接出现问题并返回404代码。首先,这种加载会破坏并行加载;其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当作JavaScript代码来执行。 减少Cookie的大小 使用无cookie的域 比如图片 CSS 等,Yahoo! 的静态文件都在主域名以外,客户端请求静态文件的时候,减少了 Cookie...


  • javascript基础--javascript语言精髓

    一、精华与糟粕 1 略 二、语法 1,铁路图 看懂铁路图 2,注释 建议使用//注释,不推荐使用/**/。why? 3,保留字 undefined,NaN,Infinity等也是保留字,不能用来作为变量名,也不能作为对象属性。还有预保留字,例如int,float等,虽然没被javascript使用但仍不能作为变量使用。 4,数字类型 javascript只有一个数字类型。整形,float,double都是number类型。NaN是一个数值,他表示一个不能产生正常结果的运算结果。Infinity表示无穷大。javascript有个Math队形,它包含一套作用于数字的方法。 5,字符串 Unicode是16位的字符集,所以javascript中的所有字符时16位的。注意javascript没有字符类型。中文字符占3个字符。但是使用length是计算的是占位符。 6,语句 当var 语句被用于函数内不是,它定义的是这个函数的私有变量。 7,字面量 对象(数组)字面量是一种可以方便按照指定规则常见新对象(数组)的方法。 三、对象 1,对象字面量:提供一种方便创建对象值得表示法,并可以出现在任何允许表达式出现的地方。属性名可以使包括空字符串在内的字符串。例如属性名为first-name则必须使用引号。在对象字面两种如果属性名是合法标识符且不是保留字则可不用引号,否则并需要用引号,但是不同浏览器支持不同,建议所有情况都使用引号。 2,检索:使用合法标识符可以使用.来访问,否则必须通过中括号来访问。检索一个不存在的属性会返回一个TypeError异常。或运算符可以用来填充默认值。 3,引用。对象通过引用来拷贝,用于无法被拷贝。 4,原型。每个对象都连接到一个原型对象,并可以从中继承属性和方法,所用通过字面量声明的对象都连接到Object.prototype这个标准对象中。 5,反射。hasOwnProverty只会检查对象是否具有属性,不会检查原型上的属性。 6,枚举。for in列举出的对象属性名不是顺序的,若要保持顺序关系需使用数组。 7,减少全局污染。尽量使用变量容器,即多个变量使用对象字面量中。 四、函数 1,对象字面量产生连接到Object.prototype上,函数字面量产生连接到Function.prototype上,而Function.prototype本省连接到Object.prototype上。其它Math,Reg,Date等对象与Function类似。 2,函数调用方式:方法调用、函数调用、构造器调用、apply调用。 3,函数的arguments属性不是一个真正的数组,而是一个array-like的对象,它拥有length属性,但是不具有数组方法。 4,所有函数默认返回undefined,如果用构造方法调用则返回this(改新对象)。 5,尾递归。如果一个函数返回自身的调用结果,那么调用的过程会被替换为一个循环,可以用来提高速度。 6,闭包。内部函数可以访问创建它的外部作用域定义的属性和方法。 7,级联。构造方法返回函数对象本省可以构造级联。 8,构造器。JSLint强制约定构造器函数必须以首字母大写形式命名。 五、javascript缺陷: 1,全局变量。禁止全局上任何形式的直接挂载变量。 2,没有块级作用域。在每个函数开头声明所有变量。 3,自动插入分号。分号一律自己加。 4,预保留字。保留字没有在语言中使用,开发者一律避免使用。 5,Unicode。 6,typeof。typeof null结果为object,反人类。 7,parseInt。parseInt(09)返回0,所以尽量使用parseIn(09,10),后一个参数进制。 8,+。尽可以运算也可以连接。 9,不能处理浮点数。例如0.1+0.2!=0.3。而浮点数中运算的整数运算是正确的。 10,NaN。typeof Nan===’number’为true,指判断不是一个数字,判断一个值是否可以是数字最佳方法是isFinite,它会筛掉NaN和Infinity。...


  • javascript基础--设计模式概述

    javascript设计模式的作用,提高重用性,可读性,已维护和拓展。 一,元素设计。 私有属性和方法:函数有作用域,在函数内用var 关键字声明的变量在外部无法访问,私有属性和方法本质就是你希望在对象外部无法访问的变量。 特权属性和方法:创建属性和方法时使用的this关键字,因为这些方法定义在构造器的作用域中,所以它们可以访问到私有属性和方法;只有那些需要直接访问私有成员的方法才应该被设计为特权方法。 共有属性和方法:直接链在prototype上的属性和方法,不可以访问构造器内的私有成员,可以访问特权成员,子类会继承所有的共有方法。 共有静态属性和方法:最好的理解方式就是把它想象成一个命名空间,实际上相当于把构造器作为命名空间来使用。 二、设计模式与举例 1、单体模式:使用单体的方法就是用一个命名空间包含自己的所有代码的全局对象。 示例: 1 var a={};var b=function(){}; 对象字面量和构造函数字面量都属于单体模式。 2、工厂模式:提供一个创建一系列相关或相互依赖对象的接口,而无需指定他们具体的类。 示例: 1 2 3 4 var base=function(){} base.get=function(){alert('简单工厂模式');} //简单工厂模式可直接调用 base.prototype={'get':function(){alert('抽象工厂模式')}} /抽象工厂模式需实例化后使用 3、桥接模式:在实现api的时候非常有用。 示例: 1 element.onclick=function(){new func(element,param,callback);} 4、装饰者模式:为对象动态增加方法或属性。 示例: 1 var obj={};obj.method=function(){}; 5、组合模式:将对象组合成树形结构以表示“部分-整体”的层次结构。它使得客户对单个对象和复合对象的使用具有一致性。 示例: 6、门面模式:创建统一接口,通过创建接口定义不同对象。 1 2 3 var define=function(name,obj){ scope[name]=obj;} define("loadModule",function(name,options){ return new scope[name](options);});...


  • javascript基础--继承与实现

    javascript继承实现方法 JavaScript虽没有给出继承的关键字,但是我们依然能够拿出一些好办法实现。 1、原型链继承: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 var Base = function() { this.level = 1; this.name = "base"; this.toString = function(){ return "base"; }; }; Base.CONSTANT = "constant"; var Sub = function() { }; Sub.prototype = new...


  • BFC

    一、BFC是什么? BFC(Block Formatting Context)直译为“块级格式化上下文”。 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的。也可以说BFC就是一个作用范围。可以把它理解成是一个独立的容器,并且这个容器的里box的布局,与这个容器外的毫不相干。 另一个通俗点的解释是:在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ,类型可以是 block ,或者是 inline ,但不能同时属于这两者。并且, Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化, Inline boxes(块内框) 则在 inline formatting context(行内格式化上下文) 里格式化。任何被渲染的元素都属于一个 box ,并且不是 block ,就是 inline 。即使是未被任何元素包裹的文本,根据不同的情况,也会属于匿名的 block boxes 或者 inline boxes。所以上面的描述,即是把所有的元素划分到对应的 formatting context 里。 BFC的元素有以下规则:...


  • css基本形状绘图

    1、正方形 css代码如下 1 2 3 4 5 #square { width: 100px; height: 100px; background: red; } 2、长方形 css代码如下 1 2 3 4 5 #rectangle { width: 200px; height: 100px; background: red; } 3、圆形 css代码如下 1 2 3 4 5 6 7 8 #circle { width: 100px; height: 100px; background: red;...


  • css居中与自适应布局

    一、居中的世界 1、使用inline-block,vertical-align,line-height。(推荐写法) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <!doctype html> <html> <head> <style> body{ width: 100%; height: 100%; padding: 0; margin: 0; display: inline-block; line-height: 500px; vertical-align:...


  • css清除浮动

    一、什么是css float 理解float:元素float后,确实可以从文档流中消失,表现在他们外面的DIV的边框不能被他们撑起来。可是,文档中在他们下面的元素又确实不会和他们重叠。先理解下float做了什么。 ​   是否脱离文档流 参考物 描述 position:relative 否 元素在文档流中位置 top,left,right,bottom指定了相对于参考物位置 postition:absolute 是 最近外层relative元素 否则为body,top,left,right,bottom指定了相对于参考物位置 float 是 元素在文档流中位置,相对于参考物 尽可能向left(向左),top(向上),right向右,both(向两侧) 二、清除浮动 1,父级div自定义height 原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。 优点:简单,代码少,容易掌握 缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题 建议:不推荐使用,只建议高度固定的布局时使用 2,尾处加入clear:both的空标签 原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度 优点:简单,代码少,浏览器支持好,不容易出现怪问题 缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不爽 建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法 3,父元素使用overflow:hidden触发BFC 原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度 优点:简单,代码少,浏览器支持好 缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。 建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。 4,父元素使用overflow:auto触发BFC 原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度 优点:简单,代码少,浏览器支持好 缺点:内部宽高超过父级div时,会出现滚动条。 建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。 5,父级div定义 伪类:after和zoom 原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题 优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等) 缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持。 建议:推荐使用,建议定义公共类,以减少CSS代码。 6,让父元素也一起浮动 原理:所有代码一起浮动,就变成了一个整体 优点:没有优点...


  • css在IE下问题及解决方法

    1、IE6浮动双边距bug和浮动时3个像素的bug 当元素浮动并且同时有外边距时,在IE6下会产生双倍距离。 1 2 3 4 .content{ float:left; margin-left:10px; } 其他浏览器下左边距是10px,IE6下左边距是20px 解决方法: 1 2 3 4 5 .content{ float:left; margin-left:10px; display:inline; } 同层两个浮动的元素,都设了float:left时,标准浏览器下会贴在一起,IE下会有3个像素的间隙。 解决方法:display:inline; 2、奇数宽高bug 在相对定位和绝对定位下,当外层相对定位的宽度或高度是奇数时,在IE6下会产生这个bug。我们看下例子: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24...

公众号

加我赏红包,哈哈哈

公众号

欢迎关注 极限前端 公众号