前端知识资源整合

2016-04-03

WEB

HTML:对Web标准的理解、浏览器内核差异、兼容性、hack
CSS:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应
JavaScript:数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等
其他:HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯

Cookie的优劣

cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的
优点:极高的扩展性和可用性

通过良好的编程，控制保存在cookie中的session对象的大小
通过加密和安全传输技术SSL，减少cookie被破解的可能性
只在cookie中存放不敏感数据，即使被盗也不会有重大损失
控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie

缺点:

Cookie数量和长度的限制:每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉
安全性问题:如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了
有些状态不可能保存在客户端:例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用

浏览器本地存储

在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage
sessionStorage用于本地存储一个会话中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储
而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的

web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用
除此之外，Web Storage拥有setItem、getItem、removeItem、clear等方法，不像cookie需要前端开发者自己封装setCookie、getCookie
但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生
浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage
localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

CSS 相关问题

display:none和visibility:hidden的区别？

display:none：隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当它从来不存在
visibility:hidden：隐藏对应的元素，但是在文档布局中仍保留原来的空间

CSS中 link 和@import 的区别是？

link属于HTML标签，而@import是CSS提供的;
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
import只在IE5以上才能识别，而link是HTML标签，无兼容问题

position的absolute与fixed共同点与不同点:
共同点：

改变行内元素的呈现方式，display被置为block
让元素脱离普通流，不占据空间
默认会覆盖到非定位元素上

不同点：

absolute的根元素是可以设置的，而fixed的根元素固定为浏览器窗口。当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的

CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
CSS选择符:

id选择器（#myid）
类选择器（.myclassname）
标签选择器（div, h1, p）
相邻选择器（h1 + p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（*）
属性选择器（a[rel = "external"]）
伪类选择器（a:hover,li:nth-child）

可继承的样式： font-size font-family color, text-indent
不可继承的样式：border padding margin width height
优先级就近原则，同权重情况下样式定义最近者为准
载入样式以最后载入的定位为准
优先级为:

!important > id > class > tag
important比内联优先级高,但内联比id要高

CSS3新增伪类举例：

p:first-of-type 选择属于其父元素的首个p元素的每个p元素
p:last-of-type 选择属于其父元素的最后p元素的每个p元素
p:only-of-type 选择属于其父元素唯一的p元素的每个p元素
p:only-child 选择属于其父元素的唯一子元素的每个p元素
p:nth-child(2) 选择属于其父元素的第二个子元素的每个p元素
:enabled :disabled 控制表单控件的禁用状态
:checked 单选框或复选框被选中

列出display的值，说明他们的作用。position的值， relative和absolute分别是相对于谁进行定位的？
display:

block 像块类元素一样显示
inline 像行内元素类型一样显示
inline-block 像行内元素一样显示，但其内容像块类元素一样显示
list-item 象块类元素一样显示，并添加样式列表标记

absolute:

生成绝对定位的元素，相对于static定位以外的第一个祖先元素进行定位

fixed（老IE不支持）:

生成绝对定位的元素，相对于浏览器窗口进行定位

relative:

生成相对定位的元素，相对于其在普通流中的位置进行定位

static:默认值，没有定位，元素出现在正常的流中
inherit:规定从父元素继承position属性的值

CSS3有哪些新特性？

CSS3实现圆角border-radius，阴影box-shadow，对文字加特效text-shadow，线性渐变gradient，旋转transform
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,平移,倾斜
增加了更多的CSS选择器，多背景rgba
在CSS3中唯一引入的伪元素是::selection
媒体查询，多栏布局
border-image

为什么要初始化CSS样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异
当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化
最简单的初始化方法就是：

1	*{padding: 0; margin: 0;}（不建议）

解释下 CSS sprites，以及你要如何在页面或网站中使用它。
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的background-image，background-repeat，background-position的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个

html语义化

去掉或者丢失样式的时候能够让页面呈现出清晰的结构
有利于SEO:和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页
便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化

Doctype作用? 严格模式与怪异模式如何区分？它们有何意义?

<!DOCTYPE>声明位于文档中的最前面，处于<html>标签之前。告知浏览器以何种模式来解析渲染文档
严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行
在怪异模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作
DOCTYPE不存在或格式不正确会导致文档以怪异模式呈现

常见兼容性问题？

png24位的图片在IE6浏览器上出现背景，解决方案是做成PNG8，也可以引用一段脚本处理

浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一，但并不推荐

IE6双边距问题:在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin会加倍
#box{ float:left; width:10px; margin:0 0 0 10px;}
这种情况之下IE会产生向左20px的距离，解决方案是在float的标签样式控制中加入_display:inline,将其转化为行内属性。_这个符号只有ie6会识别
渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用\9这一标记，将IE游览器从所有情况中分离出来。接着，再次使用+将IE8和IE7、IE6分离开来，这样IE8已经独立识别
1
2
3
4
5
6
.bb{
   background-color:#f1ee18;/*所有识别*/
   background-color:#00deff\9; /*IE6、7、8识别*/
  +background-color:#a200ff;/*IE6、7识别*/
  _background-color:#1e0bd1;/*IE6识别*/
}
IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性
Firefox下,只能使用getAttribute()获取自定义属性
解决方法:统一通过getAttribute()获取自定义属性

IE下,event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性
解决方法：条件注释，缺点是在IE浏览器下可能会增加额外的HTTP请求数

Chrome中文界面下默认会将小于12px的文本强制按照12px显示, 可通过加入CSS属性-webkit-text-size-adjust: none;解决

超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了，解决方法是改变CSS属性的排列顺序(爱恨规则):
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。现在可以使用HTML5推荐的写法：
<doctype html>

上下margin重合问题
ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合
解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom

浮动元素引起的问题和解决办法

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留
浮动元素引起的问题：

父元素的高度无法被撑开，影响与父元素同级的元素

与浮动元素同级的非浮动元素会跟随其后

若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

解决方法：
使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：

1 2	.clearfix:after{content: "";display: block;height: 0;clear: both;visibility: hidden;} .clearfix{display: inline-block;} /* for IE/Mac */

IE 8以下版本的浏览器中的盒模型有什么不同

IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框

DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

1.创建新节点

1
2
3

createDocumentFragment()    //创建一个DOM片段
createElement()   //创建一个具体的元素
createTextNode()   //创建一个文本节点

2.添加、移除、替换、插入

appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点

3.查找

1
2
3

getElementsByTagName()    //通过标签名称
getElementsByName()    //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById()    //通过元素Id，唯一性

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

HTML5现在已经不是SGML的子集，主要是关于图像、位置、存储、多任务等功能的增加。

拖拽释放API
语义化更好的内容标签
音频、视频API
画布API
地理API
本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失
sessionStorage的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation

移除的元素

纯表现的元素:basefont，big，center，font, s，strike，tt，u
对可用性产生负面影响的元素:frame，frameset，noframes

支持HTML5新标签：
IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

1
2
3

<!--[if lt IE 9]
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

减少页面加载时间的方法

1.优化图片
2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
3.优化CSS
4.网址后加斜杠
5.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验
当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了
6.减少http请求（合并文件，合并图片）

null和undefined的区别？

null是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN
当声明的变量还未被初始化时，变量的默认值为undefined
null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象
undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是:

1.变量被声明了，但没有赋值时，就等于undefined
2.调用函数时，应该提供的参数没有提供，该参数等于undefined
3.对象没有赋值的属性，该属性的值为undefined
4.函数没有返回值时，默认返回undefined

null表示”没有对象”，即该处不应该有值。典型用法是:

1.作为函数的参数，表示该函数的参数不是对象
2.作为对象原型链的终点

new操作符具体干了什么呢?

1、创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型
2、属性和方法被加入到this引用的对象中
3、新创建的对象由this所引用，并且最后隐式的返回this

1
2
3

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

JSON

JSON是一种轻量级的数据交换格式
它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小
{‘age’:’12’, ‘name’:’back’}

js延迟加载的方式有哪些？

defer和async、动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）、按需异步载入js

如何解决跨域问题?

jsonp、 document.domain+iframe、window.name、window.postMessage、服务器上设置代理页面
jsonp的原理是动态插入script标签

documen.write和 innerHTML的区别

document.write只能重绘整个页面
innerHTML可以重绘页面的一部分

什么叫优雅降级和渐进增强？

优雅降级：

Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效

渐进增强：

从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用

http状态码有那些？分别代表是什么意思？

100-199 用于指定客户端应相应的某些动作
200-299 用于表示请求成功
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息
400-499 用于指出客户端的错误

400 语义有误，当前请求无法被服务器理解

401 当前请求需要用户验证

403 服务器已经理解请求，但是拒绝执行它

500-599 用于支持服务器错误

503 – 服务不可用

ajax过程

创建XMLHttpRequest对象,也就是创建一个异步调用对象

创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息

设置响应HTTP请求状态变化的函数

发送HTTP请求

获取异步调用返回的数据

使用JavaScript和DOM实现局部刷新

请解释一下 JavaScript 的同源策略

同源策略指的是：协议、域名、端口相同，同源策略是一种安全协议
指一段脚本只能读取来自同一来源的窗口和文档的属性

为什么要有同源限制？

比如一个黑客程序，他利用iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名、密码就轻松到手了

什么是 “use strict”; ? 使用它的好处和坏处分别是什么？

ES5添加了第二种运行模式:严格模式。顾名思义，这种模式使得Javascript在更严格的条件下运行
设立”严格模式”的目的，主要有以下几个：

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为
消除代码运行的一些不安全之处，保证代码运行的安全
提高编译器效率，增加运行速度
为未来新版本的Javascript做好铺垫

注：经过测试IE6、7、8、9均不支持严格模式
缺点：

现在网站的JS都会进行压缩，一些文件用了严格模式，而另一些没有。这时这些本来是严格模式的文件，被合并后，这个串就到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节

GET和POST的区别，何时使用POST？

GET:一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
POST:一般用于修改服务器上的资源，对所发送的信息没有限制
GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值
然而，在以下情况中，请使用POST请求:

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST没有数据量限制）
发送包含未知字符的用户输入时，POST比GET更稳定也更可靠

eval是做什么的？

它的功能是把对应的字符串解析成JS代码并运行
应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）

写一个通用的事件侦听器函数?

luckyw.Event = {
        readyEvent: function(fn) {
            if (fn == null) {
                fn = document;
            }
            var oldonload = window.onload;
            if (typeof window.onload != 'function') {
                window.onload = fn;
            } else {
                window.onload = function() {
                    oldonload();
                    fn();
                };
            }
        },
        addEvent: function(element, type, handler) {
            if (element.addEventListener) {
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, function() {
                    handler.call(element);
                });
            } else {
                element['on' + type] = handler;
            }
        },
        removeEvent: function(element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if (element.datachEvent) {
                element.detachEvent('on' + type, handler);
            } else {
                element['on' + type] = null;
            }
        },
        stopPropagation: function(ev) {
            if (ev.stopPropagation) {
                ev.stopPropagation();
            } else {
                ev.cancelBubble = true;
            }
        },
        preventDefault: function(event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },
        getTarget: function(event) {
            return event.target || event.srcElement;
        },
        getEvent: function(e) {
            var ev = e || window.event;
            if (!ev) {
                var c = this.getEvent.caller;
                while (c) {
                    ev = c.arguments[0];
                    if (ev && Event == ev.constructor) {
                        break;
                    }
                    c = c.caller;
                }
            }
            return ev;
        }
    };

JavaScript原型，原型链？有什么特点？

原型对象也是普通的对象，是对象一个自带隐式的__proto__属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链
原型链是由一些用来继承和共享属性的对象组成的对象链

如何获取UA？

function whatBrowser() {
    document.Browser.Name.value=navigator.appName;
    document.Browser.Version.value=navigator.appVersion;
    document.Browser.Code.value=navigator.appCodeName;
    document.Browser.Agent.value=navigator.userAgent;
}

如果您觉得我的文章对您有用，请随意打赏。

您的支持将鼓励我继续创作！

¥ 打赏支持