Skip to content

Commit

Permalink
完善css.md和JavaScript.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@fengzheqi
fengzheqi committed Mar 8, 2016
1 parent 15d41fd commit c46f0aa
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 27 deletions.
3 changes: 2 additions & 1 deletion 2.css.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,8 @@
[Flex 布局教程：实例篇](http://www.ruanyifeng.com/blog/2015/07/flex-examples.html)

9. **块级元素和行内元素的异同**
答案：1.块级元素分行，行内元素不分行；
答案：块级元素：header/p/div/form/table/footer....；行内元素：span/a/strong/em/input...
1.块级元素分行，行内元素不分行；
2.块级元素可以包含块级元素和行内元素，行内元素只能包含行内元素，不能包含块级元素；
3.行内元素设置width、height、margin的上下、padding的上下无效；
4.行内元素可以通过设置display：block，渲染为块级元素。
Expand Down
52 changes: 30 additions & 22 deletions 3.javascript.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,42 +69,50 @@

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

1. 同源策略及跨域请求的方法和原理（比较JSONP和document.domain的不同及优劣，以及HTML5的跨域方案）

1. **同源策略及跨域请求的方法和原理（比较JSONP和document.domain的不同及优劣，以及HTML5的跨域方案）**
答案：同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。这里的同源指的是：同协议，同域名和同端口。这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。
浏览器的同源策略，其限制之一就是第一种方法中我们说的不能通过ajax的方法去请求不同源中的文档。 它的第二个限制是浏览器中不同域的框架之间是不能进行js的交互操作的。有一点需要说明，不同的框架之间（父子或同辈），是能够获取到彼此的window对象的，但头疼的是你却不能使用获取到的window对象的属性和方法(html5中的postMessage方法是一个例外，还有些浏览器比如ie6也可以使用top、parent等少数几个属性)，总之，你可以当做是只能获取到一个几乎无用的window对象。

jsonpcallback是页面存在的回调方法，参数就是想得到的json。 document.domain:浏览器都的同源策略，其限制之一就是第一种方法中我们说的不能通过ajax的方法去请求不同源中的文档。 它的第二个限制是浏览器中不同域的框架之间是不能进行js的交互操作的。有一点需要说明，不同的框架之间（父子或同辈），是能够获取到彼此的window对象的，但头疼的是你却不能使用获取到的window对象的属性和方法(html5中的postMessage方法是一个例外，还有些浏览器比如ie6也可以使用top、parent等少数几个属性)，总之，你可以当做是只能获取到一个几乎无用的window对象。document.domain开始派上用场，只要将同一域下不同子域的document.domain设置为共同的父域，则这个时候我们就可以访问对应window的各种属性和方法了。例如：www.example.com父域下的www.lib.example.com和www.hr.example.com两个子域，将对应页面的document.domain设为example.com即可。 （参考：[参考1](http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html)和[参考2](http://www.cnblogs.com/2050/p/3191744.html)及[参考3](http://adam.kahtava.com/journal/2010/03/18/the-same-origin-policy-jsonp-vs-the-documentdomain-property/)

2. JavaScript数据类型
**document.domain**：只要将同一域下不同子域的document.domain设置为共同的父域，则这个时候我们就可以访问对应window的各种属性和方法了。例如：www.example.com父域下的www.lib.example.com和www.hr.example.com两个子域，将对应页面的document.domain设为example.com即可。**缺点**：只能在一级域名相同时才能运用。

答案： JavaScript中有5种简单数据类型（也称为基本数据类型）：Undefined、Null、Boolean、Number和String。还有1种复杂数据类型——Object，Object本质上是由一组无序的名值对组成的。
**JSONP**：原理是动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。jquery中还提供了一个$.getJSON(url,arg,callback(data))用来进行jsonp访问。**缺点**：只支持get不支持post；只支持http请求这种情况，不能解决不同域两个页面之间如何进行JavaScript调用的问题；JSONP请求失败时不返回http状态码。

3. JavaScript字符串转化
**CORS（跨域资源共享）**：HTML5引入的新的跨域的方法，不过需要在请求头和相应头设置相应的Access-Control-属性。**缺点**：兼容性问题，适合一些新的浏览器。

答案：熟悉基本的字符串操作函数，参考http://www.cnblogs.com/front-Thinking/p/4398447.html
参考:
[说说JSON和JSONP](http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html)
[js中几种实用的跨域方法原理详解](http://www.cnblogs.com/2050/p/3191744.html)
[The Same Origin Policy: JSONP vs The document.domain Property](http://adam.kahtava.com/journal/2010/03/18/the-same-origin-policy-jsonp-vs-the-documentdomain-property/)
[HTTP访问控制(CORS)](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS)

4. JSONP原理及优缺点
2. **JavaScript数据类型**
答案： JavaScript中有5种简单数据类型（也称为基本数据类型）：Undefined、Null、Boolean、Number和String。还有1种复杂数据类型——Object，Object本质上是由一组无序的名值对组成的。

答案：具体JSONP的原理可参考1，说白了就是插入一个script标签，其src指向跨域接口，返回对应的callback(data)，其中data是json格式，callback是页面已存在的function。JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
3. **JavaScript字符串转化**
答案：熟悉基本的字符串操作函数，参考
[JavaScript中常见的字符串操作函数及用法](http://www.cnblogs.com/front-Thinking/p/4398447.html)

5. XMLHttpRequest
4. **JSONP原理及优缺点**
答案：具体JSONP的原理可参考1，说白了就是插入一个script标签，其src指向跨域接口，返回对应的callback(data)，其中data是json格式，callback是页面已存在的function。
**优点**：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。
**缺点**：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

5. **XMLHttpRequest**
答案：[轻松掌握XMLHttpRequest对象](http://www.cnblogs.com/beniao/archive/2008/03/29/1128914.html)

6. 事件委托

6. **事件委托**
答案：使用事件委托技术能让你避免对特定的每个节点添加事件监听器；相反，事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。

7. 前端模块化（AMD和CommonJS的原理及异同，seajs和requirejs的异同和用法）

答案：[使用AMD\CommonJS\ES Harmony编写模块化的JavaScript](http://justineo.github.io/singles/writing-modular-js/)/和[RequireJS中文网](http://www.requirejs.cn/)
7. **前端模块化（AMD和CommonJS的原理及异同，seajs和requirejs的异同和用法**
答案：
[使用AMD\CommonJS\ES Harmony编写模块化的JavaScript](http://justineo.github.io/singles/writing-modular-js/)
[RequireJS中文网](http://www.requirejs.cn/)

SeaJS对模块的态度是懒执行, SeaJS只会在真正需要使用(依赖)模块时才执行该模块；而RequireJS对模块的态度是预执行；会先尽早地执行(依赖)模块, 相当于所有的require都被提前了, 而且模块执行的顺序也不一定
[SeaJS和RequireJS最大的不同](http://www.douban.com/note/283566440/)，其中AMD和CMD的区别可以看[玉伯在知乎上的回答](http://www.zhihu.com/question/20351507/answer/14859415)

8. session

9. Cookie

8. **session**
9. **Cookie**
答案：8与9的知识可以参考：[参考1](http://www.cnblogs.com/shiyangxt/archive/2008/10/07/1305506.html)和[参考2](http://www.cnblogs.com/Darren_code/archive/2011/11/24/Cookie.html)

常见的cookie操作包括创建cookie、添加cookie、删除cookie等，相应函数参考：
Expand Down Expand Up @@ -149,8 +157,7 @@
}
```

10. seaJS的用法及原理，依赖加载的原理、初始化、实现等

10. **seaJS的用法及原理，依赖加载的原理、初始化、实现等**
答案：[模块化开发之sea.js实现原理总结](http://www.lxway.com/85146452.htm)，简言之就是要解决三个问题，分别为：①模块加载（插入script标签来加载模块。你在页面看不到标签是因为模块被加载完后删除了对应的script标签。）②模块依赖（按依赖顺序依赖）③命名冲突（封装一层define，所有的都成为了局部变量，并通过exports暴漏出去）。

11. this问题
Expand Down Expand Up @@ -181,6 +188,7 @@

答案：[常用排序算法之JavaScript实现](http://www.cnblogs.com/ywang1724/p/3946339.html#3037096)。这里有一篇阮一峰老师写的，非常不错的快排算法，[快速排序（Quicksort）的Javascript实现](http://www.ruanyifeng.com/blog/2011/04/quicksort_in_javascript.html)。
和[排序算法](http://javascript.ruanyifeng.com/library/sorting.html). 还有如《五大常用算法》等。

18. 事件冒泡和事件捕获

答案：[事件冒泡和事件捕获](http://www.quirksmode.org/js/events_order.html#link4)
Expand Down
22 changes: 18 additions & 4 deletions 4.综合.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
45. **CSS优化、提升性能的方法**
46. **浏览器缓存策略**
47. **对web标准、可用性、可访问性的理解**
48. **html页面的渲染过程**

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Expand Down Expand Up @@ -172,7 +173,20 @@

44. 浏览器多个标签间的通信

45. CSS优化、提升性能的方法

46. 浏览器缓存策略
答案： http://www.cnblogs.com/skynet/archive/2012/11/28/2792503.html
45. **CSS优化、提升性能的方法**
答案：可参考[CSS性能优化策略](http://fengzheqi.com/2016/03/06/CSS%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E7%AD%96%E7%95%A5/)

46. **浏览器缓存策略**
答案： http://www.cnblogs.com/skynet/archive/2012/11/28/2792503.html

47. **对web标准、可用性、可访问性的理解**
答案：web标准的可用性、可访问性、可维护性
可用性（Usability）：产品是否容易上手，用户能否完成任务，效率如何，以及这过程中用户的主观感受可好，是从用户的角度来看产品的质量。可用性好意味着产品质量高，是企业的核心竞争力。
可访问性（Accessibility）：Web内容对于残障用户的可阅读和可理解性
可维护性（Maintainability）：一般包含两个层次，一是当系统出现问题时，快速定位并解决问题的成本，成本低则可维护性好。二是代码是否容易被人理解，是否容易修改和增强功能。
**参考**：[web标准—可用性、可维护性、可访问性](http://www.cnblogs.com/uedt/articles/1809126.html)

48. **html页面的渲染过程**
答案：推荐两篇文章,先读第一篇文章，重点阐述了浏览器渲染的一般模式，对浏览器的预加载只是简单介绍；第二篇文章则是重点阐述浏览器的预加载，强调“加载并行，执行串行”
[了解html页面的渲染过程](http://www.cnblogs.com/yuezk/archive/2013/01/11/2855698.html)
[研究首屏时间？你先要知道这几点细节](http://www.alloyteam.com/2016/01/points-about-resource-loading/)

0 comments on commit c46f0aa

Please sign in to comment.