前端知识点
2017-04-21 20:50:48 0 举报AI智能生成
前端知识点
作者其他创作
大纲/内容
存储
cookie
cookie在持久保存客户端数据提供了方便，分担了服务器存储的负担
cookie的局限性
cookie的最大大约为4096字节
每个特定的域名下cookie数量有限，chrome和Safari没有硬性的要求
IE和opera会清理近期最少使用的cookie，Firefox会随机清理cookie
优点
通过良好的编程，控制保存在cookie中session对象的大小
通过加密和安全传输技术（SSL），减少cookie被破解的可能性
只在cookie中存放不敏感数据，即使被盗也不会有重大损失
控制cookie的生命期，使之不会永远有效
极高的扩展性和可用性
缺点
1、cookie数量和长度的限制。每个的demain最多只能有20条cookie，每个cookie长度不能超过4kb，否则会被截掉
2、安全性问题。如果cookie被人拦截了，就会取得所有session信息。即使加密也于事无补
3、有些状态不可能保存在客户端，例如为了防止重复提交表单，需要在服务器端保存一个计数器，如果保存在客户端起不到任何作用
浏览器本地存储
在较高的浏览器中，js提供了sessionStorage和globalStrage，在html5中，用localStorage来取代globalStroge
sessionstorage用于本地存储一个会话中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后，数据也随之销毁，是会话级别的存储
localStorage用于持久化的本地存储，除非主动删除数据，否则数据永远不会过期
cookie和webStorage
1、cookie的大小受限，每一次请求都会发送，指定作用域，不可以跨域调用
web storage拥有setItem、getItem、removeItem、clear等方法，cookie则需要自己封装setCookie、getCookie
cookie的作用是与服务器进行交互，作为HTTP规范的一部分存在，webStrage仅仅是为了在本地存储数据
HTML
Doctype
1、<!DOCTYPE>声明位于文档中最前面，处于html标签之前，告知浏览器以何种模式来渲染文档
2、严格模式的排版和js运作模式是以该浏览器支持的最高标准运行
3、在混杂模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为，以防站点无法工作
4、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现
2、严格模式的排版和js运作模式是以该浏览器支持的最高标准运行
3、在混杂模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为，以防站点无法工作
4、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现
1、三种DTD类型：严格版本、过渡版本、以及基于框架的HTML文档
2、HTML 4.01 三种文档类型：Strict、transitional、frameset
3、xhtml规定三种XML文档类型：strict、transitional 、frameset
4、standards（标准）模式也是严格呈现模式用于呈现遵循最新标准的网页，而Quriks（包容）模式也就是松散呈现模式或兼容模式，用于呈现为传统浏览器而设计的网页
2、HTML 4.01 三种文档类型：Strict、transitional、frameset
3、xhtml规定三种XML文档类型：strict、transitional 、frameset
4、standards（标准）模式也是严格呈现模式用于呈现遵循最新标准的网页，而Quriks（包容）模式也就是松散呈现模式或兼容模式，用于呈现为传统浏览器而设计的网页
ECMAscript 5添加了第二种运行模式："严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。
设立"严格模式"的目的，主要有以下几个：
1. 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
2. 消除代码运行的一些不安全之处，保证代码运行的安全；
3. 提高编译器效率，增加运行速度；
4. 为未来新版本的Javascript做好铺垫。
注：经过测试 IE6,7,8,9 均不支持严格模式。
缺点：
现在网站的 JS 都会进行压缩，一些文件用了严格模式，而另一些没有。这时这些本来是严格模式的文件，被 merge 后，这个串就到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节。
html兼容性问题
html5
主要是关于图像、位置、存储、多任务等功能的增加
拖拽释放 drag and drop
语义化更好的标签内容 header nav footer aside article section
语音、视频 audio video
画布 canvas API
地理 geolocation
本地离线存储 localStorage长期存储数据，浏览器关闭后数据不丢失
sessionStorage在浏览器关闭后自动删除
表单控件 calendar date time email url search
新的技术webworker websocket geolocation
webSocket如何兼容低浏览器
adobo flash socket\activeX HTMLFile\基于multipart编码发送XHR\基于长轮询的XHR
adobo flash socket\activeX HTMLFile\基于multipart编码发送XHR\基于长轮询的XHR
元素的删除
纯表现的元素:basefont big center font s strike tt u
对可用性产生负面影响的元素：frame frameset noframes
iframe的优缺点
优点：
1、解决加载缓慢的第三方内容如图表和广告等的加载问题
2、 Security sandbox（安全沙箱）
3、并行加载脚本
1、解决加载缓慢的第三方内容如图表和广告等的加载问题
2、 Security sandbox（安全沙箱）
3、并行加载脚本
缺点：
1、iframe会阻塞主页面的onload事件
2、即时内容为空，加载也需要时间
3、没有语义
1、iframe会阻塞主页面的onload事件
2、即时内容为空，加载也需要时间
3、没有语义
浏览器多个标签之间的通信
localstorage,cookie等本地存储方式
优化问题
网站文件和资源进行优化
文件合并
文件最小化、文件压缩
使用CDN托管
缓存的使用
文件最小化、文件压缩
使用CDN托管
缓存的使用
减少页面加载时间的方法
优化图片
图像格式的选择
优化CSS
标明高度和宽度
减少http请求，合并文件，合并图片
FOUC 无样式内容闪烁
<style type="text/css" media="all">@import "../fouc.css";</style>
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
解决方法简单的出奇，只要在<head>之间加入一个<link>或者<script>元素就可以了。
性能优化问题
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. 图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳
综合问题
测试工具
profiler
JSperf
Dromaeo
内存泄露
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
1. setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
2. 闭包
3. 控制台日志
4. 循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
判断脚本运行环境
判断Global对象是否为window，如果不为window，当前脚本没有在浏览器中
优雅降级和渐进增强
1. 优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。
2. 渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。
页面加载过程
分为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. XSS
2. sql注入
3. CSRF：是跨站请求伪造，很明显根据刚刚的解释，他的核心也就是请求伪造，通过伪造身份提交POST和GET请求来进行跨域的攻击
完成CSRF需要两个步骤：
1. 登陆受信任的网站A，在本地生成 COOKIE
2. 在不登出A的情况下，或者本地 COOKIE 没有过期的情况下，访问危险网站B。
浏览器问题
并行下载资源
事件处理机制
1. 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为
2. 事件处理机制：IE是事件冒泡、firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件
3. ev.stopPropagation();
注意旧ie的方法：ev.cancelBubble = true;
阻塞
62
WEB应用从服务器主动推送Data到客户端
1. html5 websocket
2. WebSocket 通过 Flash
3. XHR长时间连接
4. XHR Multipart Streaming
5. 不可见的Iframe
6. <script>标签的长时间连接(可跨域)
HTTP
状态码
2
200 OK 请求已经成功，请求所希望的响应头或数据体将随此响应返回
201 create 请求已经被实现，而且一个新的资源已经依据请求的需要建立，且其URL已经随location头信息返回
202 Accepted 服务器已接受请求，但尚未处理。正如它可能被拒绝一样，最终该请求可能会也可能不会被执行，在异步操作的场合下最合适。
返回202状态码的响应的目的是允许服务器接受其他过程的请求（例如某个每天只执行一次的基于批处理的操作），不必让客户端一直保持与服务的连接直到批处理全部完成。
在接受请求处理并返回202状态码的响应应当在返回的实体中包含一些指示处理当前状态的信息，以及指向处理状态监视器或状态预测的指针，以便用户能够估计操作是否已经完成。
返回202状态码的响应的目的是允许服务器接受其他过程的请求（例如某个每天只执行一次的基于批处理的操作），不必让客户端一直保持与服务的连接直到批处理全部完成。
在接受请求处理并返回202状态码的响应应当在返回的实体中包含一些指示处理当前状态的信息，以及指向处理状态监视器或状态预测的指针，以便用户能够估计操作是否已经完成。
203 Non-authoritative Infomation 服务器已经成功处理了请求，在接受请求处理并返回202状态码的响应应当在返回的实体中包含一些指示处理当前状态的信息，以及指向处理状态监视器或状态预测的指针，以便用户能够估计操作是否已经完成。
204 no content
3
301 Moved Permanently 请求的网页已永久的移动到新的位置
302 found 临时性重定向
303 see other 临时性重定向，且总是使用GET请求新的URL
304 not Modified 自上次请求后，请求的网页未修改过
4
400 bad request 服务器无法理解请求格式，客户端不应该尝试再次发起相似的请求
401 unauthorized 请求未经授权
403 forbidden 禁止访问
404 not found 找不到如何与url相匹配的资源
5
500 internal server error 常见的服务器端错误
503 service unavailable 服务端暂时无法处理请求（可能是过载或维护）
get和post
get：一般用于信息授权，使用url传递参数，对所发送的信息数量也是有限制的，一般在2000个字符
需要使用request.queryString来获取变量的值
通过地址栏来传值的
需要使用request.queryString来获取变量的值
通过地址栏来传值的
post：一般用于修改服务器上的资源，对所发送的信息没有限制
通过request.form来获取变量的值
通过提交表单来传值
通过request.form来获取变量的值
通过提交表单来传值
get请求返回的内容可以被浏览器缓存起来，每次提交的post，浏览器在刷新的时候都会跳出确认框，浏览器不会缓存post请求返回的内容
下列情况使用post
1、无法使用缓存文件，更新服务器上文件或数据库
2、向服务器发送大量数据，post没有数据量的限制
3、发送包含未知字符的用户输入时，post比get更稳定可靠
1、无法使用缓存文件，更新服务器上文件或数据库
2、向服务器发送大量数据，post没有数据量的限制
3、发送包含未知字符的用户输入时，post比get更稳定可靠
安全性：
get是安全的，因为其方法不会改变服务器端是数据，所以不会产生副作用
post是安全的：get在url里面显示参数会引发一些安全问题
get是安全的，因为其方法不会改变服务器端是数据，所以不会产生副作用
post是安全的：get在url里面显示参数会引发一些安全问题
HTTP协议
与服务器交互的方法：get post put delete 查 改 增 删
http 请求格式：request line， headers、blank line、request-body
http 响应格式：status line，header，blank line、request-body
http 头
Expires 应该在什么时候认为文档已经过期，从而不再缓存它？
ETag为“被请求变量的实体值”。另一种说法是，ETag是一个可以与Web资源关联的记号（token）
Cache -Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置 Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。
网页的缓存是由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，则在过期之前不会重复访问服务器。
内容安全策略 (CSP, Content Security Policy) 是一个附加的安全层，用于帮助检测和缓解某些类型的攻击，包括跨站脚本 (XSS) 和数据注入等攻击。 这些攻击可用于实现从数据窃取到网站破坏或作为恶意软件分发版本等用途。
CSS
排版
display
inline
行内元素会在一条直线上排列，都是同一行，不会换行
block
块级元素各占据一行，垂直方向排序，块级元素可以包含行内元素和块级元素，行内元素不能包含块级元素
属性不同，主要在盒模型上 行内 width、height无效，margin上下无效、padding上下无效
属性不同，主要在盒模型上 行内 width、height无效，margin上下无效、padding上下无效
inline-block
display：block转化块级
flex
none
隐藏对应的元素，在文档布局中不在给他分配空间，它各边的元素会合拢，当不存在
visibility：hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间
postion
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
absolute和fixed的区别
A：共同点：
1.改变行内元素的呈现方式，display被置为block；
2.让元素脱离普通流，不占据空间；
3.默认会覆盖到非定位元素上
B不同点：
absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。
当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。
CSS sprites
将网页中的一些背景图片整合到一张图片文件中
利用css：background-image，background-repeat，background-position组合进行背景定位
利用css：background-image，background-repeat，background-position组合进行背景定位
这样可以减少很多图片请求的开销，因为请求耗时比较长
请求虽然可以并发，但是有限制
请求虽然可以并发，但是有限制
盒子模型
1）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)
2）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 padding;
css选择器
1.id选择器(# myid)
2.类选择器(.myclassname)
3.标签选择器(div, h1, p)
4.相邻选择器(h1 + p)
5.子选择器(ul > li)
6.后代选择器(li a)
7.通配符选择器( * )
8.属性选择器(a[rel = "external"])
9.伪类选择器(a: hover, li:nth-child)
float
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留
1、使用空标签清除浮动。在所有浮动标签后面添加一个空标签，定义css clear:both 弊端就是添加了无意义的标签
所以我们在使用浮动进行布局的时候会需要一个块级元素（行内元素无效）来设置 clear 属性，如果浮动元素下方本来就有元素，那我们可以直接对该元素设置 clear:both ，若没有其他元素需要展示，我们往往会写一个空白标签来清除浮动
<div stylr="clear:both"></div>
2、使用overflow。给包含浮动元素的父标签添加css属性，overflow:auto;zoom:1
3、使用after伪对象清除浮动。适合非IE
所以考虑使用伪元素 :after 来代替这个空白标签，因为清除浮动需要在浮动元素后面，所以不可以使用 :before ，对 :after 设置 content:"" ，并使其 display:block 成为块级元素后 clear:both 来清除浮动：
<div><div></div>::after</div>
1、使用空标签清除浮动。在所有浮动标签后面添加一个空标签，定义css clear:both 弊端就是添加了无意义的标签
所以我们在使用浮动进行布局的时候会需要一个块级元素（行内元素无效）来设置 clear 属性，如果浮动元素下方本来就有元素，那我们可以直接对该元素设置 clear:both ，若没有其他元素需要展示，我们往往会写一个空白标签来清除浮动
<div stylr="clear:both"></div>
2、使用overflow。给包含浮动元素的父标签添加css属性，overflow:auto;zoom:1
3、使用after伪对象清除浮动。适合非IE
所以考虑使用伪元素 :after 来代替这个空白标签，因为清除浮动需要在浮动元素后面，所以不可以使用 :before ，对 :after 设置 content:"" ，并使其 display:block 成为块级元素后 clear:both 来清除浮动：
<div><div></div>::after</div>
#content:after{content:"";display:block;clear:both;}
浮动元素引起的问题和解决办法
父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素会跟随其后
若非第一个元素浮动，该元素之前的元素也需要浮动，否则会影响页面显示的结构
与浮动元素同级的非浮动元素会跟随其后
若非第一个元素浮动，该元素之前的元素也需要浮动，否则会影响页面显示的结构
解决办法：
使用css中的clear：both；属性来清除元素的浮动，可以解决2、3问题
对于问题1：
使用css中的clear：both；属性来清除元素的浮动，可以解决2、3问题
对于问题1：
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;} .clearfix{display: inline-block;} 使用after伪元素
1、使用额外标签法，<div style="clear:both;"></div>
2、使用after伪元素
#parent:after{3、浮动外部 元素
4、设置overflow为hidden或者auto
1、使用额外标签法，<div style="clear:both;"></div>
2、使用after伪元素
#parent:after{
content:"."; height:0; visibility:hidden; display:block; clear:both;}4、设置overflow为hidden或者auto
子主题
绘制
动画
引用
CSS中 link 和@import 的区别是
(1) link属于HTML标签，而@import是CSS提供的;
(2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
(4) link方式的样式的权重 高于@import的权重.
继承
可继承的样式：
1.font-size
2.font-family
3.color
4.text-indent
不可继承的样式：
1.border
2.padding
3.margin
4.width
5.height
优先级
1.优先级就近原则，同权重情况下样式定义最近者为准;
2.载入样式以最后载入的定位为准;
3.!important > id > class > tag
4.important 比 内联优先级高，但内联比 id 要高
新增的伪类
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 单选框或复选框被选中。
JavaScript
DOM操作
创建新节点
createDocumentFragment
createElement
createTextNode
createElement
createTextNode
添加、移除、替换、插入
appendChild
removeChild
replaceChild
insertBefore
removeChild
replaceChild
insertBefore
查找
getElementByTagName
getElementByName
getElementById
getElementByName
getElementById
数据类型
null
表示一个表示无的对象，转化为数组是0
表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象
表示没有对象，此处不应该有值
作为函数的参数，表示该函数的参数不是对象
作为对象原型链的终点
undefined
是一个表示无的原始值，转化为数值时为NaN
当声明的变量还未被初始化时，变量的默认值为undefined
表示缺少值，，此处应该有一个值，但是还没有定义
变量被声明了，但是没有赋值时，就等于undefined
调用函数时，应该提供的参数没有提供，该参数等于undefined
对象没有赋值的属性，该属性的值为undefined
函数没有返回值时，默认返回undefined
对象
new的过程
属性和方法被加入到this应用的对象中
创建一个空的对象，并且this变量应用该对象，同时还继承了该函数的原型
新创建的对象由this所引用，并且最后隐式的返回this
json
是一种轻量级的数据格式，是基于JavaScript的一个子集。数据格式简单，易于读写，占用宽带小
延迟加载 、异步加载
1. 异步加载的方案： 动态插入 script 标签
2. 通过 ajax 去获取 js 代码，然后通过 eval 执行
3. script 标签上添加 defer 或者 async 属性
4. 创建并插入 iframe，让它异步执行 js
5. 延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的
页面操作
document.write和innerHTML
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分
函数
this（call、apply）
动态改变每个类的某个方法的运行环境
作用域
子主题
闭包
框架
Node
优缺点
优点：
1. 因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。
2. 与Node代理服务器交互的客户端代码是由javascript语言编写的，因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。
缺点：
1. Node是一个相对新的开源项目，所以不太稳定，它总是一直在变。
对象
创建
1. 工厂模式
2. 构造函数模式
3. 原型模式
4. 混合构造函数和原型模式
5. 动态原型模式
6. 寄生构造函数模式
7. 稳妥构造函数模式
原型
1. 原型对象也是普通的对象，是对象一个自带隐式的 __proto__ 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为 null 的话，我们就称之为原型链
2. 原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链
继承
1. 原型链继承
2. 借用构造函数继承
3. 组合继承(原型+借用构造)
4. 原型式继承
5. 寄生式继承
6. 寄生组合式继承
避免原型链上面的对象共享，避免对象共享可以参考经典的extend()函数，很多前端框架都有封装的，就是用一个空函数当做中间变量
ajax
1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象
2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
3. 设置响应HTTP请求状态变化的函数
4. 发送HTTP请求
5. 获取异步调用返回的数据
6. 使用JavaScript和DOM实现局部刷新
Flash：
1. Flash适合处理多媒体、矢量图形、访问机器
2. 对CSS、处理文本上不足，不容易被搜索
Ajax：
1. Ajax对CSS、文本支持很好，支持搜索
2. 多媒体、矢量图形、机器访问不足
共同点：
1. 与服务器的无刷新传递消息
2. 可以检测用户离线和在线状态
2. 操作DOM
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. 服务器上设置代理页面
同源问题
概念：
同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。
这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。
为什么要有同源限制：
我们举例说明：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。
跨域问题
jsonp
document.domain+iframe
window.name、window.postMessage
服务器上设置代理页面
前端概念
前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近。
1. 实现界面交互
2. 提升用户体验
3. 有了Node.js，前端可以实现服务端的一些事情
前景：
1. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好
2. 参与项目，快速高质量完成实现效果图，精确到1px；
3. 与团队成员，UI设计，产品经理的沟通；
4. 做好的页面结构，页面重构和用户体验；
5. 处理hack，兼容、写出优美的代码格式；
6. 针对服务器的优化、拥抱最新前端技术。
新的技术
1. Node.js
2. Mongodb
3. npm
4. MVVM
5. MEAN
6. three.js
7. React
0 条评论
下一页
