前端整理（一）

1. CSS display:none和visibility:hidden的区别

visibility:hidden–为隐藏的对象保留其物理空间
HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。
- display: none–不为被隐藏的对象保留其物理空间
HTML元素（对象）的宽度、高度等各种属性值都将“丢失

2. Http请求过程

域名解析 –> 发起TCP的3次握手 –> 建立TCP连接后发起http请求 –> 服务器响应http请求，浏览器得到html代码 –> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） –> 浏览器对页面进行渲染呈现给用户。
TCP三次握手建立连接成功后开始，客户端按照指定的格式开始向服务端发送HTTP请求，服务端接收请求后，解析HTTP请求，处理完业务逻辑，最后返回一个HTTP的响应给客户端

3. npm 和 node的关系：

node.js是javascript的一种运行环境，是对Google V8引擎进行的封装。是一个服务器端的javascript的解释器。
其实npm是nodejs的包管理器（package manager）。我们在Node.js上开发时，会用到很多别人已经写好的javascript代码，如果每当我们需要别人的代码时，都根据名字搜索一下，下载源码，解压，再使用，会非常麻烦。于是就出现了包管理器npm。大家把自己写好的源码上传到npm官网上，如果要用某个或某些个，直接通过npm安装就可以了，不用管那个源码在哪里。并且如果我们要使用模块A，而模块A又依赖模块B，模块B又依赖模块C和D，此时npm会根据依赖关系，把所有依赖的包都下载下来并且管理起来。

4. 适合Nodejs的场景

Nodejs最主要的优点就是：高并发
- RESTful API
这是NodeJS最理想的应用场景，可以处理数万条连接，本身没有太多的逻辑，只需要请求API，组织数据进行返回即可。它本质上只是从某个数据库中查找一些值并将它们组成一个响应。由于响应是少量文本，入站请求也是少量的文本，因此流量不高，一台机器甚至也可以处理最繁忙的公司的API需求。
- 统一Web应用的UI层
目前MVC的架构，在某种意义上来说，Web开发有两个UI层，一个是在浏览器里面我们最终看到的，另一个在server端，负责生成和拼接页面。
不讨论这种架构是好是坏，但是有另外一种实践，面向服务的架构，更好的做前后端的依赖分离。如果所有的关键业务逻辑都封装成REST调用，就意味着在上层只需要考虑如何用这些REST接口构建具体的应用。那些后端程序员们根本不操心具体数据是如何从一个页面传递到另一个页面的，他们也不用管用户数据更新是通过Ajax异步获取的还是通过刷新页面。
- 大量Ajax请求的应用
例如个性化应用，每个用户看到的页面都不一样，缓存失效，需要在页面加载的时候发起Ajax请求，NodeJS能响应大量的并发请求。　　总而言之，NodeJS适合运用在高并发、I/O密集、少量业务逻辑的场景。

5. 前端页面有哪三层构成，分别是什么?作用是什么?

• 结构层 Html

• 表示层 CSS

• 行为层 js

6. 测试常用的浏览器?这些浏览器的内核分别是什么?

IE(IE内核) 火狐（Gecko） 谷歌（webkit,Blink）opera(Presto),Safari(webkit)

7. Doctype作用？

!DOCTYPE声明位于位于HTML文档中的第一行，处于html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

8. html5有哪些新特性？（这里只列举了几个用过的新特性）

• 绘画canvas
• 用于媒介回放的video 和 audio 元素
• 本地离线存储localStorage 长期存储数据，浏览器关闭后数据不丢失
• sessionStorage 的数据在浏览器关闭后自动删除

9. cookies，sessionStorage 和 localStorage 的区别？

• cookie在浏览器和服务器间来回传递。sessionStorage和localStorage不会
• sessionStorage和localStorage的存储空间更大
• sessionStorage和localStorage有更多丰富易用的接口
• sessionStorage和localStorage各自独立的存储空间

10. 如何实现浏览器内多个标签页之间的通信?

路由传参，localStorage，sessionStorage，Pouch DB等

11. CSS清除浮动的几种方法

• 使用带clear属性的空元素
• 使用CSS的overflow属性
• 使用CSS的:after伪元素
• 使用邻接元素处理

12. 跨域

什么是跨域？

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。

请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。

解决方法：

• 前端反向代理
  app.use(‘/api’,proxy(url.parse(${backendUrl})));这里的backendUrl是 http url的前半部分通用部分，在项目中真正调用服务的地方用’/api’与http后半部分拼接就可以了

• 服务器代理

IIS （web.config）

<customHeaders>

        <addname="Access-Control-Allow-Methods"value="PUT,POST,GET,OPTIONS" />

        <addname="Access-Control-Allow-Headers"value="X-Requested-With,Content-Type,Accept,User-Name,User-Authorization"/>

        <addname="Access-Control-Allow-Origin" value="*" />

</customHeaders>

Nginx

<customHeaders>

        <addname="Access-Control-Allow-Methods"value="PUT,POST,GET,OPTIONS" />

        <addname="Access-Control-Allow-Headers"value="X-Requested-With,Content-Type,Accept,User-Name,User-Authorization"/>

        <addname="Access-Control-Allow-Origin" value="*" />

</customHeaders>