这篇文章是系统性的知识点的整理,并不详细,只是做个总结的作用
HTML&CSS
对web标准的理解
- web标准是对web的结构,表现,行为的规范。
- 标签小写,标签闭合,不乱嵌套。
- 使用外css和js脚本,提高渲染速度
- 尽量避免使用行内样式,标签的id和class等属性命名要做到见文知义,标签越少,加载越快,用户体验提高,代码维护简单,便于改版。
- 标签规范可以提高搜索引擎对页面的抓取效率,对SEO很有帮助。
浏览器内核差异
- Trident内核(window)IE 浏览器使用的内核
- WebKit内核(NB 的内核,跨平台)chrome,Safari,塞班手机浏览器,安卓手机浏览器。
- gecko内核 Firefox内核
浏览器渲染原理
1.当用户在地址栏里面输入网址并敲下回车的时候,浏览器开始向服务器发出请求;
2.当浏览器拿到html页面的时候,开始从上而下进行解释;
3.当遇到link标签的时候,浏览器会再次向页面进行请求,并根据请求得到的css来重绘页面;
4.当遇到script标签的时候,浏览器再次请求服务器,并执行得到的js对页面进行重绘;
5.当遇到图片等其他文件的时候,浏览器也会再次发起请求并根据拿到的文件来对页面进行重绘;
6.当进行上面这些步骤时,浏览器的重绘回流等是无法避免的,即需要进一步的优化,比如制作雪碧图,避免反复请求,给图片固定宽高等等;
上面的内容也可以解释为:
浏览器拿到html、css、js,开始构建一个dom树,页面要显示的各元素都会创建到这个dom树当中,每当一个新元素加入到这个dom树当中,浏览器便会通过css引擎查询css样式表,找到符合该元素的样式规则应用到这个元素上,每一次应用新规则都可能引起重绘回流;
css文件在加载的时候回阻塞页面渲染,但是并不会阻止dom解析,而js文件加载的时候会阻塞dom解析,所以通常把css文件放在页面头部而把脚本放在页面底部
####浏览器兼容性问题
- 不同浏览器的标签默认的外边距和内边距不同
*{margin:0;padding:0}
据说是一种不好的写法。有个初始化css的插件叫什么来着忘了 - 块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大
在float的标签样式控制中加入 display:inline;将其转化为行内属性 - 设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度
给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
http://blog.csdn.net/chuyuqing/article/details/37561313/(附上别人总结的博客链接)hack
[csshack](http://www.duitang.com/static/csshack.html)CSS基本布局盒模型选择器优先级
HTML5 CSS3
data-* 属性用于存储页面或应用程序的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。
data- 浏览器兼容性 Internet Explorer 11+ Chrome 8+ Firefox 6.0+ Opera 11.10+ Safari 6+
http://www.w3school.com.cn/html5/html_5_intro.asp
FLEXBOX
- flex-direction属性 flex-direction属性决定主轴的方向(即项目的排列方向)。
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
- flex-wrap属性
- nowrap 不换行
- wrap 换行 第一行在上方
- wrap-reverse 换行 第一行在下方
- flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。 - justify-content属性 定义了项目在主轴上的对齐方式。
- flex-start(默认值):左对齐
- flex-end:右对齐
- center: 居中
- space-between:两端对齐,项目之间的间隔都相等。
- align-items属性定义项目在交叉轴上如何对齐
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度
- align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴。
- http://www.jianshu.com/p/f9bcddb0e8b4
- 圣杯布局 优先渲染中间栏 中间栏宽度为100% 左右栏左外边距设为负百分比
- 圣杯布局和双飞翼布局解决问题的方案在前一半是相同的,也就是三栏全部float浮动,但左右两栏加上负margin让其跟中间栏div并排,以形成三栏布局。不同在于解决”中间栏div内容不被遮挡“问题的思路不一样:圣杯布局,为了中间div内容不被遮挡,将中间div设置了左右padding-left和padding-right后,将左右两个div用相对布局position: relative并分别配合right和left属性,以便左右两栏div移动后不遮挡中间div。双飞翼布局,为了中间div内容不被遮挡,直接在中间div内部创建子div用于放置内容,在该子div里用margin-left和margin-right为左右两栏div留出位置。多了1个div,少用大致4个css属性。
JavaScript
map和set
- map set() has() get() delete()
- set 重复元素在Set中自动被过滤 add() delete()
数据类型
number boolean string undefined null object运算
this的指向问题
http://www.jb51.net/article/42257.htm对象
- 数组对象 方法
- join([分隔符])
- reverse()数组翻转
- valueOf()返回数组值
- 字符串对象 方法
- toUpperCase() 大写
- toLowerCase() 小写
- charAt(索引)
- indexOf(“字串”)
- replace(“字串1”,”字串2”) 字串2替换字串1
- slice(索引i[,索引j]) 返回索引i倒索引j-1的子串
- substr(start[,length]) 返回特定长度的字串
- match(/匹配字符/)
- toString() 返回字符串
- valueOf()返回字符串
- 数学对象
- Math ceil(数值) 大于等于该数值的最小整数
- floor(数值) 小于等于该数值的最小整数
- random()0到1的随机数
- round(数值)最接近该数值的整数
- sqrt(数值) 开平方根
- 定时器
用以指定在一段特定的时间后执行某段程序。 setTimeout(): 格式: [定时器对象名=] setTimeout(“<表达式>”,毫秒) 功能:执行<表达式>一次。 clearTimeout():终止定时器 格式: clearTimeout(定时器对象名) - 窗口名称.方法(参数)
function
- 函数声明提前
- 函数构造器
继承
- 使用对象冒充实现继承
- 采用call方法改变函数上下文实现继承 改变函数内部的函数上下文this,使它指向传入函数的具体对象
闭包
- 外部函数不是必需的。通过访问外部变量,一个闭包可以维持(keep alive)这些变量。在内部函数和外部函数的例子中,外部函数可以创建局部变量,并且最终退出;但是,如果任何一个或多个内部函数在它退出后却没有退出,那么内部函数就维持了外部函数的局部数据。
作用域
在函数中使用var关键字进行显式申明的变量是做为局部变量,而没有用var关键字,使用直接赋值方式声明的是全局变量。
当我们使用访问一个没有声明的变量时,JS会报错。而当我们给一个没有声明的变量赋值时,JS不会报错,相反它会认为我们是要隐式申明一个全局变量,这一点一定要注意。原型链
函数的原型对象constructor默认指向函数本身,原型对象除了有原型属性外,为了实现继承,还有一个原型链指针__proto__,该指针指向上一层的原型对象,而上一层的原型对象的结构依然类似,这样利用__proto__一直指向Object的原型对象上,而Object的原型对象用Object.prototype.proto = null表示原型链的最顶端,如此变形成了javascript的原型链继承,同时也解释了为什么所有的javascript对象都具有Object的基本方法。事件
- JavaScript事件代理(委托)一般用于以下情况:1. 事件注册在祖先级元素上,代理其子级元素。可以减少事件注册数量,节约内存开销,提高性能。2. 对js动态添加的子元素可自动绑定事件。
- 冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
- 捕获型事件(event capturing):事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。
- DOM事件流:同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触及DOM中的所有对象,从document对象开始,也在document对象结束。 DOM事件模型最独特的性质是,文本节点也触发事件(在IE中不会)。
####RegExp
new RegExp(pattern, attributes);
参数 attributes 是一个可选的字符串,包含属性 “g”、”i” 和 “m”,分别用于指定全局匹配、区分大小写的匹配和多行匹配。
Json
http://www.cnblogs.com/fanshaokun/p/6272850.html
JSON有两种表示结构,对象和数组。
字符串:这个很好解释,指使用“”双引号或’’单引号包括的字符。例如:var comStr = ‘this is string’;
json字符串:指的是符合json格式要求的js字符串。例如:var jsonStr = “{StudentID:’100’,Name:’tmac’,Hometown:’usa’}”;
json对象:指符合json格式要求的js对象。例如:var jsonObj = { StudentID: “100”, Name: “tmac”, Hometown: “usa” };
Ajax
1.建立xmlHttpRequest对象
2.设置回调函数
3.使用OPEN方法与服务器建立连接 xmlHttp.open(“get”,”ajax?name=”+ name,true)
此步注意设置http的请求方式(post/get),如果是POST方式,注意设置请求头信息xmlHttp.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”)
4.向服务器端发送数据
5.在回调函数中针对不同的响应状态进行处理
DOM
BOM
内存泄漏
程序的运行需要内存。只要程序提出要求,操作系统或者运行时(runtime)就必须供给内存。
对于持续运行的服务进程(daemon),必须及时释放不再用到的内存。否则,内存占用越来越高,轻则影响系统性能,重则导致进程崩溃。
不再用到的内存,没有及时释放,就叫做内存泄漏(memory leak)。
有些语言(比如 C 语言)必须手动释放内存,程序员负责内存管理。
垃圾回收机制怎么知道,哪些内存不再需要呢?
最常使用的方法叫做”引用计数”(reference counting):语言引擎有一张”引用表”,保存了内存里面所有的资源(通常是各种值)的引用次数。如果一个值的引用次数是0,就表示这个值不再用到了,因此可以将这块内存释放。
跨域
只要协议、域名、端口有任何一个不同,都被当作是不同的域。
- 通过jsonp跨域
- 通过修改document.domain来跨子域
- 使用window.name来进行跨域
异步装载
- 对于支持HTML5的浏览器,实现JS的异步加载只需要在script元素中加上async属性,为了兼容老版本的IE还需加上defer属性;对于不支持HTML5的浏览器(IE可以用defer实现),可以采用以上几种方法实现。原理基本上都是向DOM中写入script或者通过eval函数执行JS代码,你可以把它放在匿名函数中执行,也可以在onload中执行,也可以通过XHR注入实现,也可以创建一个iframe元素,然后在iframe中执行插入JS代码。
模板引擎
模板引擎分为java模板引擎和js模板引擎
常用的java引擎有velocity (还有我就不晓得了,就接触过这一个)
常用的javascript模板引擎有 ejs jade 还有互联网三巨头开发的模板引擎。。。
前端MVC
MVC是一种设计模式,它将应用划分为3个部分:数据(模型)、展现层(视图)和用户交互(控制器)。换句话说,一个事件的发生是这样的过程:
1. 用户和应用产生交互。
2. 控制器的事件处理器被触发。
3. 控制器从模型中请求数据,并将其交给视图。
4. 视图将数据呈现给用户。
(1)MVC: 模型-视图-控制器(Model View Controller)
(2)MVP: 模型-视图-表现类(Model-View-Presenter)
(3)MVVM:模型-视图-视图模型(Model-View-ViewModel)
路由
- init 监听浏览器 url hash 更新事件
- route 存储路由更新时的回调到回调数组routes中,回调函数将负责对页面的更新
- refresh 执行当前url对应的回调函数,更新页面
以上,以前写的,没怎么了解前端路由之前写的,我也不知道写的是个啥。
以下,有点了解之后写的。
前端的js页面在es6之前都模块化这样一个概念,自然也无法实现多个js页面的相互关联,这样的相互关联的过程就是前端路由。虽然在es6之前没有模块化,但是可以用第三方提供的一些模块化的方法,如AMD COMMONJS 在node.js中,已经有了模块化的方法。node.js可以很优雅的实现前端路由~~
模块化
- 函数封装 这种做法的缺点很明显:污染了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间没什么关系。
- 对象 为了解决上面问题,对象的写法应运而生,可以把所有的模块成员封装在一个对象中 这样避免了变量污染,只要保证模块名唯一即可,同时同一模块内的成员也有了关系 看似不错的解决方案,但是也有缺陷,外部可以随意修改内部成员
- 立即执行函数
- 放大模式 如果一个模块很大,必须分成几个部分,或者一个模块需要继承另一个模块,这时就有必要采用”放大模式”(augmentation)。
- 宽放大模式 与”放大模式”相比,"宽放大模式"就是”立即执行函数”的参数可以是空对象。
- 输入全局变量 独立性是模块的重要特点,模块内部最好不与程序的其他部分直接交互。为了在模块内部调用全局变量,必须显式地将其他变量输入模块。
Canvas
HTML5中的一个画布,功能强大,详情参考html5的内容
ES6
- let var const
- let是块级作用域,跟var不同的是,let没有前置功能,不能重复声明
- const定义的变量不可以修改,而且必须初始化。
- var分为两种:局部作用域和函数作用域
- let是块级作用域,函数内部使用let定义后,对函数外部无影响。
- 箭头函数
- 箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一种像上面的,只包含一个表达式,连{ … }和return都省略掉了。还有一种可以包含多条语句,这时候就不能省略{ … }和return
- 箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。
- promise
- pending进行中
- fullfilled已成功/resolved
- rejected已失败
- then
- 只有异步操作的结果能决定当前是哪种状态
- map 和set
- set()
- get()
- has()
- delete()
专门整理了一篇关于es6新特性的博客,还有部分内容在图书馆看书的时候记在了小本子上,择日整理上传
Nodejs
详情参考node.js入门篇