1. 优雅降级:Web站点在全部新式浏览器中都能正常工做,若是用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工做。因为IE独特的盒模型布局问题,针对不一样版本的IE的hack实践过优雅降级了,为那些没法支持功能的浏览器增长候选方案,使之在旧式浏览器上以某种形式降级体验却不至于彻底失效。javascript
2. 渐进加强:从被全部浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,向页面增长无害于基础浏览器的额外样式和功能的。当浏览器支持时,它们会自动地呈现出来并发挥做用。css
优势:html
1. 由于Node是基于事件驱动和无阻塞的,因此很是适合处理并发请求,所以构建在Node上的代理服务器相比其余技术实现(如Ruby)的服务器表现要好得多。前端
2. 与Node代理服务器交互的客户端代码是由javascript语言编写的,所以客户端和服务器端都用同一种语言编写,这是很是美妙的事情。 html5
缺点:java
1. Node是一个相对新的开源项目,因此不太稳定,它老是一直在变。git
2. 缺乏足够多的第三方库支持。看起来,就像是Ruby/Rails当年的样子(第三方库如今已经很丰富了,因此这个缺点能够说不存在了)。 程序员
前端是最贴近用户的程序员,比后端、数据库、产品经理、运营、安全都近。github
1. 实现界面交互web
2. 提高用户体验
3. 有了Node.js,前端能够实现服务端的一些事情
前景:
1. 前端是最贴近用户的程序员,前端的能力就是能让产品从 90分进化到 100 分,甚至更好
2. 参与项目,快速高质量完成实现效果图,精确到1px;
3. 与团队成员,UI设计,产品经理的沟通;
4. 作好的页面结构,页面重构和用户体验;
5. 处理hack,兼容、写出优美的代码格式;
6. 针对服务器的优化、拥抱最新前端技术。
1. 减小http请求次数:CSS Sprites, JS、CSS 源码压缩、图片大小控制合适;网页 Gzip,CDN 托管,data 缓存 ,图片服务器
2. 前端模板 JS + 数据,减小因为HTML标签致使的带宽浪费,前端用变量保存 AJAX 请求结果,每次操做本地变量,不用请求,减小请求次数
3. 用 innerHTML 代替 DOM 操做,减小 DOM 操做次数,优化 javascript 性能
4. 当须要设置的样式不少时设置 className 而不是直接操做 style
5. 少用全局变量、缓存DOM节点查找的结果。减小 IO 读取操做
6. 避免使用 CSS Expression(css表达式)又称 Dynamic properties(动态属性)
7. 图片预加载,将样式表放在顶部,将脚本放在底部,加上时间戳
1. 100-199 用于指定客户端应相应的某些动做
2. 200-299 用于表示请求成功
3. 300-399 用于已经移动的文件而且常被包含在定位头信息中指定新的地址信息
4. 400-499 用于指出客户端的错误
400:语义有误,当前请求没法被服务器理解
401:当前请求须要用户验证
403:服务器已经理解请求,可是拒绝执行它
5. 500-599 用于支持服务器错误
503:服务不可用
分为4个步骤:
1. 当发送一个 URL 请求时,无论这个 URL 是 Web 页面的 URL 仍是 Web 页面上每一个资源的 URL,浏览器都会开启一个线程来处理这个请求,同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器得到请求对应的 IP 地址。
2. 浏览器与远程 Web 服务器经过 TCP 三次握手协商来创建一个 TCP/IP 链接。该握手包括一个同步报文,一个同步-应答报文和一个应答报文,这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试创建起通讯,然后服务器应答并接受客户端的请求,最后由客户端发出该请求已经被接受的报文。
3. 一旦 TCP/IP 链接创建,浏览器会经过该链接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源,值为 200 的 HTTP 响应状态表示一个正确的响应。
4. 此时,Web 服务器提供资源服务,客户端开始下载资源。
请求返回后,便进入了咱们关注的前端模块
简单来讲,浏览器会解析 HTML 生成 DOM Tree,其次会根据 CSS 生成 CSS Rule Tree,而 javascript 又能够根据 DOM API 操做 DOM
1. 先期团队必须肯定好全局样式(globe.css),编码模式(utf-8) 等
2. 编写习惯必须一致(例如都是采用继承式的写法,单样式都写成一行)
3. 标注样式编写人,各模块都及时标注(标注关键样式调用的地方)
4. 页面进行标注(例如 页面 模块 开始和结束)
5. CSS 跟 HTML 分文件夹并行存放,命名都得统一(例如 style.css)
6. JS 分文件夹存放 命名以该 JS 功能为准的英文翻译
7. 图片采用整合的 p_w_picpaths.png png8 格式文件使用 尽可能整合在一块儿使用方便未来的管理
最流行的一些东西:
1. Node.js
2.React
常去的网站:
1. W3c
2. 2. Github
3. CSDN
1. 工厂模式
2. 构造函数模式
3. 原型模式
4. 混合构造函数和原型模式
5. 动态原型模式
6. 寄生构造函数模式
7. 稳妥构造函数模式
1. 原型链继承
2. 借用构造函数继承
3. 组合继承(原型+借用构造)
4. 原型式继承
5. 寄生式继承
6. 寄生组合式继承
1. 建立XMLHttpRequest对象,也就是建立一个异步调用对象
2. 建立一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
3. 设置响应HTTP请求状态变化的函数
4. 发送HTTP请求
5. 获取异步调用返回的数据
6. 使用JavaScript和DOM实现局部刷新
1. 异步加载的方案: 动态插入 script 标签
2. 经过 ajax 去获取 js 代码,而后经过 eval 执行
3. script 标签上添加 defer 或者 async 属性
4. 建立并插入 iframe,让它异步执行 js
5. 延迟加载:有些 js 代码并非页面初始化的时候就马上须要的,而稍后的某些状况才须要的
1. XSS
2. sql注入
3. CSRF:是跨站请求伪造,很明显根据刚刚的解释,他的核心也就是请求伪造,经过伪造身份提交POST和GET请求来进行跨域的***
完成CSRF须要两个步骤:
1. 登录受信任的网站A,在本地生成 COOKIE
2. 在不登出A的状况下,或者本地 COOKIE 没有过时的状况下,访问危险网站B。
1. IE6 2 个并发
2. iE7 升级以后的 6 个并发,以后版本也是 6 个
3. Firefox,chrome 也是6个
用构造函数和原型链的混合模式去实现继承,避免对象共享能够参考经典的extend()函数,不少前端框架都有封装的,就是用一个空函数当作中间变量。
grunt:
UglifyJS 是基于 NodeJS 的 Javascript 语法解析/压缩/格式化工具
官网:http://lisperator.net/uglifyjs/ 或者 https://github.com/mishoo/UglifyJS2
安装:
$ npm install uglify-js -g
使用方法见官网 demo
YUI compressor:
YUI Compressor 是一个用来压缩 JS 和 CSS 文件的工具,采用Java开发。
使用方法:
// 压缩JS
java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js
// 压缩CSS
java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.css
Google Closure Compiler:
官网:https://developers.google.com/closure/compiler/
使用方法:
1. 在命令行下使用一个google编译好的java程序
2. 使用google提供的在线服务
3. 使用google提供的RESTful API
Flash:
1. Flash适合处理多媒体、矢量图形、访问机器
2. 对CSS、处理文本上不足,不容易被搜索
Ajax:
1. Ajax对CSS、文本支持很好,支持搜索
2. 多媒体、矢量图形、机器访问不足
共同点:
1. 与服务器的无刷新传递消息
2. 能够检测用户离线和在线状态
2. 操做DOM
概念:
同源策略是客户端脚本(尤为是Javascript)的重要的安全度量标准。它最先出自Netscape Navigator2.0,其目的是防止某个文档或脚本从多个不一样源装载。
这里的同源策略指的是:协议,域名,端口相同,同源策略是一种安全协议,指一段脚本只能读取来自同一来源的窗口和文档的属性。
为何要有同源限制:
咱们举例说明:好比一个***程序,他利用Iframe把真正的银行登陆页面嵌到他的页面上,当你使用真实的用户名,密码登陆时,他的页面就能够经过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。
咱们举例说明:好比一个***程序,他利用Iframe把真正的银行登陆页面嵌到他的页面上,当你使用真实的用户名,密码登陆时,他的页面就能够经过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。
ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode)。顾名思义,这种模式使得Javascript在更严格的条件下运行。
设立"严格模式"的目的,主要有如下几个:
1. 消除Javascript语法的一些不合理、不严谨之处,减小一些怪异行为;
2. 消除代码运行的一些不安全之处,保证代码运行的安全;
3. 提升编译器效率,增长运行速度;
4. 为将来新版本的Javascript作好铺垫。
注:通过测试 IE6,7,8,9 均不支持严格模式。
缺点:
如今网站的 JS 都会进行压缩,一些文件用了严格模式,而另外一些没有。这时这些原本是严格模式的文件,被 merge 后,这个串就到了文件的中间,不只没有指示严格模式,反而在压缩后浪费了字节。
GET:通常用于信息获取,使用URL传递参数,对所发送信息的数量也有限制,通常在2000个字符
POST:通常用于修改服务器上的资源,对所发送的信息没有限制
GET方式须要使用 Request.QueryString 来取得变量的值
POST方式经过 Request.Form 来获取变量的值
也就是说 Get 是经过地址栏来传值,而 Post 是经过提交表单来传值。
在如下状况中,请使用 POST 请求:
1. 没法使用缓存文件(更新服务器上的文件或数据库)
2. 向服务器发送大量数据(POST 没有数据量限制)
3. 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
js 的阻塞特性:全部浏览器在下载 JS 的时候,会阻止一切其余活动,好比其余资源的下载,内容的呈现等等。直到 JS 下载、解析、执行完毕后才开始继续并行下载其余资源并呈现内容。为了提升用户体验,新一代浏览器都支持并行下载 JS,可是 JS 下载仍然会阻塞其它资源的下载(例如.图片,css文件等)。
因为浏览器为了防止出现 JS 修改 DOM 树,须要从新构建 DOM 树的状况,因此就会阻塞其余的下载和呈现。
嵌入 JS 会阻塞全部内容的呈现,而外部 JS 只会阻塞其后内容的显示,2 种方式都会阻塞其后资源的下载。也就是说外部样式不会阻塞外部脚本的加载,但会阻塞外部脚本的执行。
CSS 怎么会阻塞加载了?CSS 原本是能够并行下载的,在什么状况下会出现阻塞加载了(在测试观察中,IE6 下 CSS 都是阻塞加载)
当 CSS 后面跟着嵌入的 JS 的时候,该 CSS 就会出现阻塞后面资源下载的状况。而当把嵌入 JS 放到 CSS 前面,就不会出现阻塞的状况了。
根本缘由:由于浏览器会维持 html 中 css 和 js 的顺序,样式表必须在嵌入的 JS 执行前先加载、解析完。而嵌入的 JS 会阻塞后面的资源加载,因此就会出现上面 CSS 阻塞下载的状况。
嵌入JS应该放在什么位置?
1. 放在底部,虽然放在底部照样会阻塞全部呈现,但不会阻塞资源下载。
2. 若是嵌入JS放在head中,请把嵌入JS放在CSS头部。
3. 使用 defer(只支持IE)
4. 不要在嵌入的JS中调用运行时间较长的函数,若是必定要用,能够用 setTimeout 来调用
Javascript无阻塞加载具体方式:
1. 将脚本放在底部。<link>仍是放在head中,用以保证在js加载前,能加载出正常显示的页面。<script>标签放在</body>前。
2. 阻塞脚本:因为每一个<script>标签下载时阻塞页面解析过程,因此限制页面的<script>总数也能够改善性能。适用于内联脚本和外部脚本。
3. 非阻塞脚本:等页面完成加载后,再加载js代码。也就是,在 window.onload 事件发出后开始下载代码。
4. defer属性:支持IE4和fierfox3.5更高版本浏览器
5. 动态脚本元素:文档对象模型(DOM)容许你使用js动态建立HTML的几乎所有文档内容。代码以下:
<script>
var script=document.createElement("script");
script.type="text/javascript";
script.src="file.js";
document.getElementsByTagName("head")[0].appendChild(script);
</script>
此技术的重点在于:不管在何处启动下载,文件额下载和运行都不会阻塞其余页面处理过程,即便在head里(除了用于下载文件的 http 连接)。
1. 它的功能是把对应的字符串解析成JS代码并运行
2. 应该避免使用eval,不安全,很是耗性能(2次,一次解析成js语句,一次执行)
// event(事件)工具集,来源:github.com/markyun
markyun.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();
};
}
},
// 视能力分别使用dom0||dom2||IE方式 来绑定事件
// 参数: 操做的元素,事件名称 ,事件处理程序
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.removeEnentListener) {
element.removeEnentListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent('on' + type, handler);
} else {
element['on' + type] = null;
}
},
// 阻止事件 (主要是事件冒泡,由于IE不支持事件捕获)
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;
},
// 获取event对象的引用,取到事件的全部信息,确保随时能使用event;
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;
}
};
1. 高并发
2. 聊天
3. 实时消息推送
1. 原型对象也是普通的对象,是对象一个自带隐式的 __proto__ 属性,原型也有可能有本身的原型,若是一个原型对象的原型不为 null 的话,咱们就称之为原型链
2. 原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链
67.怎么重构页面?
1. 编写 CSS
2. 让页面结构更合理化,提高用户体验
3. 实现良好的页面效果和提高性能
1. html5 websocket
2. WebSocket 经过 Flash
3. XHR长时间链接
4. XHR Multipart Streaming
5. 不可见的Iframe
6. <script>标签的长时间链接(可跨域)
1. 咱们在网页中的某个操做(有的操做对应多个事件)。例如:当咱们点击一个按钮就会产生一个事件。是能够被 JavaScript 侦测到的行为
2. 事件处理机制:IE是事件冒泡、firefox同时支持两种事件模型,也就是:捕获型事件和冒泡型事件
3. ev.stopPropagation();
注意旧ie的方法:ev.cancelBubble = true;
Ajax 是什么:
1. 经过异步模式,提高了用户体验
2. 优化了浏览器和服务器之间的传输,减小没必要要的数据往返,减小了带宽占用
3. Ajax 在客户端运行,承担了一部分原本由服务器承担的工做,减小了大用户量下的服务器负载。
Ajax 的最大的特色:
1. Ajax能够实现动态不刷新(局部刷新)
2. readyState 属性 状态 有5个可取值: 0 = 未初始化,1 = 启动, 2 = 发送,3 = 接收,4 = 完成
Ajax 同步和异步的区别:
1. 同步:提交请求 -> 等待服务器处理 -> 处理完毕返回,这个期间客户端浏览器不能干任何事
2. 异步:请求经过事件触发 -> 服务器处理(这是浏览器仍然能够做其余事情)-> 处理完毕
ajax.open方法中,第3个参数是设同步或者异步。
Ajax 的缺点:
1. Ajax 不支持浏览器 back 按钮
2. 安全问题 Ajax 暴露了与服务器交互的细节
3. 对搜索引擎的支持比较弱
4. 破坏了程序的异常机制
5. 不容易调试
解决跨域问题:
1. jsonp
2. iframe
3. window.name、window.postMessage
4. 服务器上设置代理页面
function clone(Obj) {
var buf;
if (Obj instanceof Array) {
buf = []; // 建立一个空的数组
var i = Obj.length;
while (i--) {
buf[i] = clone(Obj[i]);
}
return buf;
} else if (Obj instanceof Object){
buf = {}; // 建立一个空对象
for (var k in Obj) { // 为这个对象添加新的属性
buf[k] = clone(Obj[k]);
}
return buf;
}else{
return Obj;
}
}
网站重构:在不改变外部行为的前提下,简化结构、添加可读性,而在网站前端保持一致的行为。也就是说是在不改变 UI 的状况下,对网站进行优化,在扩展的同时保持一致的 UI。
对于传统的网站来讲重构一般是:
1. 表格(table)布局改成 DIV + CSS
2. 使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对 IE6 有效的)
3. 对于移动平台的优化
4. 针对于 SEO 进行优化
5. 深层次的网站重构应该考虑的方面
6. 减小代码间的耦合
7. 让代码保持弹性
8. 严格按规范编写代码
9. 设计可扩展的API
10. 代替旧有的框架、语言(如VB)
11. 加强用户体验
12. 一般来讲对于速度的优化也包含在重构中
13. 压缩JS、CSS、p_w_picpath等前端资源(一般是由服务器来解决)
14. 程序的性能优化(如数据读写)
15. 采用CDN来加速资源加载
16. 对于JS DOM的优化
17. HTTP服务器的文件缓存
73.如何获取UA
<script>
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;
}
</script>
方法一:遍历数组,创建新数组,利用indexOf判断是否存在于新数组中,不存在则push到新数组,最后返回新数组
1 function removeDuplicatedItem(ar) {
2 var ret = [];
4 for (var i = 0, j = ar.length; i < j; i++) {
5 if (ret.indexOf(ar[i]) === -1) {
6 ret.push(ar[i]);
7 }
8 }
10 return ret;
11 }
方法二:遍历数组,利用object对象保存数组值,判断数组值是否已经保存在object中,未保存则push到新数组并用object[arrayItem]=1的方式记录保存
function removeDuplicatedItem2(ar) {
var tmp = {},
ret = [];
for (var i = 0, j = ar.length; i < j; i++) {
if (!tmp[ar[i]]) {
tmp[ar[i]] = 1;
ret.push(ar[i]);
}
}
return ret;
}
方法三:数组下标判断法, 遍历数组,利用indexOf判断元素的值是否与当前索引相等,如相等则加入
function removeDuplicatedItem3(ar) {
var ret = [];
ar.forEach(function(e, i, ar) {
if (ar.indexOf(e) === i) {
ret.push(e);
}
});
return ret;
}
方法四:数组先排序, 而后比较俩数组一头一尾进行去重
function removeDuplicatedItem4(ar) {
var ret = [],
end;
ar.sort();
end = ar[0];
ret.push(ar[0]);
for (var i = 1; i < ar.length; i++) {
if (ar[i] != end) {
ret.push(ar[i]);
end = ar[i];
}
}
return ret;
}
100 Continue 继续,通常在发送post请求时,已发送了http header以后服务端将返回此信息,表示确认,以后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功而且服务器建立了新的资源
202 Accepted 服务器已接受请求,但还没有处理
301 Moved Permanently 请求的网页已永久移动到新位置
302 Found 临时性重定向
303 See Other 临时性重定向,且老是使用 GET 请求新的 URI
304 Not Modified 自从上次请求后,请求的网页未修改过
400 Bad Request 服务器没法理解请求的格式,客户端不该当尝试再次使用相同的内容发起请求
401 Unauthorized 请求未受权
403 Forbidden 禁止访问
404 Not Found 找不到如何与 URI 相匹配的资源
500 Internal Server Error 最多见的服务器端错误
503 Service Unavailable 服务器端暂时没法处理请求(多是过载或维护)
网页的缓存是由HTTP消息头中的“Cache-control”来控制的,常见的取值有private、no-cache、max-age、must-revalidate等,默认为private。
Expires 头部字段提供一个日期和时间,响应在该日期和时间后被认为失效。容许客户端在这个时间以前不去检查(发请求),等同max-age的效果。可是若是同时存在,则被Cache-Control的max-age覆盖。
Expires = "Expires" ":" HTTP-date
例如:
Expires: Thu, 01 Dec 1994 16:00:00 GMT (必须是GMT格式)
若是把它设置为-1,则表示当即过时
Expires 和 max-age 均可以用来指定文档的过时时间,可是两者有一些细微差异
1. Expires在HTTP/1.0中已经定义,Cache-Control:max-age在HTTP/1.1中才有定义,为了向下兼容,仅使用max-age不够
2. Expires指定一个绝对的过时时间(GMT格式),这么作会致使至少2个问题:
2.1客户端和服务器时间不一样步致使Expires的配置出现问题。
2.2很容易在配置后忘记具体的过时时间,致使过时来临出现浪涌现象
3. max-age 指定的是从文档被访问后的存活时间,这个时间是个相对值(好比:3600s),相对的是文档第一次被请求时服务器记录的Request_time(请求时间)
4. Expires 指定的时间能够是相对文件的最后访问时间(Atime)或者修改时间(MTime),而max-age相对对的是文档的请求时间(Atime)
5. 若是值为 no-cache,那么每次都会访问服务器。若是值为max-age,则在过时以前不会重复访问服务器。
// 建立cookie
function setCookie(name, value, expires, path, domain, secure) {
var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
if (expires instanceof Date) {
cookieText += '; expires=' + expires;
}
if (path) {
cookieText += '; expires=' + expires;
}
if (domain) {
cookieText += '; domain=' + domain;
}
if (secure) {
cookieText += '; secure';
}
document.cookie = cookieText;
}
// 获取cookie
function getCookie(name) {
var cookieName = encodeURIComponent(name) + '=';
var cookieStart = document.cookie.indexOf(cookieName);
var cookieValue = null;
if (cookieStart > -1) {
var cookieEnd = document.cookie.indexOf(';', cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
}
return cookieValue;
}
// 删除cookie
function unsetCookie(name) {
document.cookie = name + "= ; expires=" + new Date(0);
}
Ps:整理三天 但愿能够对本身年后面试有所帮助