1.APIcss
API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工做机制的细节。html
2.浏览器的内核前端
浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译为“渲染引擎”,不过咱们通常习惯将之称为“浏览器内核”。负责对网页语法的解释(如标准通用标记语言下的一个应用HTML、JavaScript)并渲染(显示)网页。 因此,一般所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不一样的浏览器内核对网页编写语法的解释也有不一样,所以同一网页在不一样的内核的浏览器里的渲染(显示)效果也可能不一样,这也是网页编写者须要在不一样内核的浏览器中测试网页显示效果的缘由。web
Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)算法
3.W3Cchrome
4.W3C规范的批准步骤编程
在 W3C 发布某个新标准的过程当中,规范是经过下面的严格程序由一个简单的理念逐步确立为推荐标准的:浏览器
1。W3C 收到一份提交安全
2。由 W3C 发布一份记录性能优化
3。由 W3C 建立一个工做组
4。由 W3C 发布一份工做草案
5。由 W3C 发布一份候选的推荐
6。由 W3C 发布一份被提议的推荐
7。由 W3C 发布推荐
5.优雅降级和渐进加强
渐进加强 progressive enhancement:针对低版本浏览器进行构建页面,保证最基本的功能,而后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation:一开始就构建完整的功能,而后再针对低版本浏览器进行兼容。
区别:优雅降级是从复杂的现状开始,并试图减小用户体验的供给,而渐进加强则是从一个很是基础的,可以起做用的版本开始,并不断扩充,以适应将来环境的须要。降级(功能衰减)意味着往回看;而渐进加强则意味着朝前看,同时保证其根基处于安全地带。
6.清除浮动方法:
https://my.oschina.net/leipeng/blog/221125
7.web前端页面性能优化小结 (http://www.cnblogs.com/mofish/archive/2010/10/12/1849041.html#undefined)
1、提倡前端开发工程师在书写xhtml的时候作到结构语义化。
2、css,js文件数量及大小的优化
3、背景图片数量及大小的优化
4、内容图片的大小的优化
八、Coockie是什么
http://www.cnblogs.com/soficircle/p/6898888.html
9.CSS hack大全
http://www.kwstu.com/Admin/ViewArticle/201409011604277330
10.png和jpg
做者:土老师
连接:https://www.zhihu.com/question/20028452/answer/13803642
来源:知乎
著做权归做者全部。商业转载请联系做者得到受权,非商业转载请注明出处。
11.浏览器兼容问题
浏览器兼容问题一:不一样浏览器的标签默认的外补丁和内补丁不一样
问题症状:随便写几个标签,不加样式控制的状况下,各自的margin 和padding差别较大。
碰到频率:100%
解决方案:CSS里 *{margin:0;padding:0;}
备注:这个是最多见的也是最易解决的一个浏览器兼容性问题,几乎全部的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。
浏览器兼容问题二:块属性标签float后,又有横行的margin状况下,在IE6显示margin比设置的大
问题症状:常见症状是IE6中后面的一块被顶到下一行
碰到频率:90%(稍微复杂点的页面都会碰到,float布局最多见的浏览器兼容问题)
解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性
备注:咱们最经常使用的就是div+CSS布局了,而div就是一个典型的块属性标签,横向布局的时候咱们一般都是用div float实现的,横向的间距设置若是用margin实现,这就是一个必然会碰到的兼容性问题。
浏览器兼容问题三:设置较小高度标签(通常小于10px),在IE6,IE7,遨游中高度超出本身设置高度
问题症状:IE六、7和遨游里这个标签的高度不受控制,超出本身设置的高度
碰到频率:60%
解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
备注:这种状况通常出如今咱们设置小圆角背景的标签里。出现这个问题的缘由是IE8以前的浏览器都会给标签一个最小默认的行高的高度。即便你的标签是空的,这个标签的高度仍是会达到默认的行高。
浏览器兼容问题四:行内属性标签,设置display:block后采用float布局,又有横行的margin的状况,IE6间距bug
问题症状:IE6里的间距比超过设置的间距
碰到概率:20%
解决方案:在display:block;后面加入display:inline;display:table;
备注:行内属性标签,为了设置宽高,咱们须要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后,在IE6下,他就具备了块属性float后的横向margin的bug。不过由于它自己就是行内属性标签,因此咱们再加上display:inline的话,它的高宽就不可设了。这时候咱们还须要在display:inline后面加入display:talbe。
浏览器兼容问题五:图片默认有间距
问题症状:几个img标签放在一块儿的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起做用。
碰到概率:20%
解决方案:使用float属性为img布局
备注:由于img标签是行内属性标签,因此只要不超出容器宽度,img标签都会排在一行里,可是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。(个人一个学生使用负margin,虽然能解决,但负margin自己就是容易引发浏览器兼容问题的用法,因此我禁止他们使用)
浏览器兼容问题六:标签最低高度设置min-height不兼容
问题症状:由于min-height自己就是一个不兼容的CSS属性,因此设置min-height时不能很好的被各个浏览器兼容
碰到概率:5%
解决方案:若是咱们要设置一个标签的最小高度200px,须要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}
备注:在B/S系统前端开时,有不少状况下咱们又这种需求。当内容小于一个值(如300px)时。容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候咱们就会面临这个兼容性问题。
浏览器兼容问题七:透明度的兼容CSS设置
作兼容页面的方法是:每写一小段代码(布局中的一行或者一块)咱们都要在不一样的浏览器中看是否兼容,固然熟练到必定的程度就没这么麻烦了。建议常常会碰到兼容性问题的新手使用。不少兼容性问题都是由于浏览器对标签的默认属性解析不一样形成的,只要咱们稍加设置都能轻松地解决这些兼容问题。若是咱们熟悉标签的默认属性的话,就能很好的理解为何会出现兼容问题以及怎么去解决这些兼容问题。
我不多使用hacker的,多是我的习惯吧,我不喜欢写的代码IE不兼容,而后用hack来解决。不过hacker仍是很是好用的。使用hacker我能够把浏览器分为3类:IE6 ;IE7和遨游;其余(IE8 chrome ff safari opera等)
◆IE6认识的hacker 是下划线_ 和星号 *
◆IE7 遨游认识的hacker是星号 *
好比这样一个CSS设置:
IE6浏览器在读到height:300px的时候会认为高时300px;继续往下读,他也认识*heihgt, 因此当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置,认为高度是200px。继续往下读,IE6还认识_height,因此他又会覆盖掉200px高的设置,把高度设置为100px;
IE7和遨游也是同样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了,由于它们不认识_height。因此它们会把高度解析为200px,剩下的浏览器只认识第一个height:300px;因此他们会把高度解析为300px。由于优先级相同且想冲突的属性设置后一个会覆盖掉前一个,因此书写的次序是很重要的。