前端面试题202002161 老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。 l

1.页面导入样式时，使用link和@import有什么区别？

1 老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。

link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。

2 加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显.

3 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

4 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

2.CSS 实现某个元素垂直水平居中的方法

 (1)
 水平居中：
 ```css
 .content{
  margin: 0 auto;}
  垂直居中：
  .content{
  position:relative;
  top:50%;
  margin-top: -0.5*元素自身高度}
  (2)
  .content{
  margin: 0 auto;
  position:relative;
  top:50%;
  transform:translateY(-50%);}
  (3)
  #container{
  display:flex;
  aligh-items: center; /*垂直居中*/
  justify-content:center; /*水平居中*/

3.html5新增的标签

 <article>定义文档内的文章。
 <aside>	定义页面内容之外的内容。
 <bdi>	定义与其他文本不同的文本方向。
 <details>	定义用户可查看或隐藏的额外细节。
 <dialog>	定义对话框或窗口。
 <figcaption>	定义 <figure> 元素的标题。
 <figure>	定义自包含内容，比如图示、图表、照片、代码清单等等。
 <footer>	定义文档或节的页脚。
 <header>	定义文档或节的页眉。
 <main>	定义文档的主内容。
 <mark>	定义重要或强调的内容。
 <menuitem>	定义用户能够从弹出菜单调用的命令/菜单项目。
 <meter>	定义已知范围（尺度）内的标量测量。
<nav>	定义文档内的导航链接。
<progress>	定义任务进度。
<rp>	定义在不支持 ruby 注释的浏览器中显示什么。
<rt>	定义关于字符的解释/发音（用于东亚字体）。
<ruby>	定义 ruby 注释（用于东亚字体）。
<section>	定义文档中的节。
<summary>	定义 <details> 元素的可见标题。
<time>	定义日期/时间。
<wbr>	定义可能的折行（line-break）
<datalist>	定义输入控件的预定义选项。
<keygen>	定义键对生成器字段（用于表单）。
<output>	定义计算结果。

4.写出一个网页从开始请求到最终显示的完整过程

1. 在浏览器中输入网址；
2. 发送至DNS服务器并获得域名对应的WEB服务器的IP地址；
3. 与WEB服务器建立TCP连接；
4. 浏览器向WEB服务器的IP地址发送相应的HTTP请求；
5. WEB服务器响应请求并返回指定URL的数据，或错误信息，如果设定重定向，则重定向到新的URL地址。
6. 浏览器下载数据后解析HTML源文件，解析的过程中实现对页面的排版，解析完成后在浏览器中显示基础页面。
7. 分析页面中的超链接并显示在当前页面，重复以上过程直至无超链接需要发送，完成全部显示。

5.常见的移动端适配方案：

三个viewport理论：
layout viewport:网页的实际大小，在移动设备上大于屏幕可视区域
visual viewport：移动设备的可视大小
ideal viewport：屏幕的实际大小

meta标签：

或者使用flex布局

也可以使用css3的媒体查询：
@media mediatype and|not|only (media feature) {
CSS-Code;}
也可以针对不同的媒体使用不同的stylesheets：
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

6.Click事件和tap事件的区别：

在移动端click事件会有200-300ms的延迟，所以应该用tap
延迟的原因：https://yq.aliyun.com/articles/643606

7.px,em, rem, %, vw, vh, vm 区别

px:像素，
EM

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

EM特点

em的值并不是固定的；
em会继承父级元素的字体大小。

REM rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：

p {font-size:14px; font-size:.875rem;}

%：相对于父元素

vw：viewport的width的1% vh: viewport的heigh的1% vmin: viewport的最短边的1% vmax：viewport的最长边的1%

8.如何解决移动端，固定定位布局键盘挡住输入框内容的问题：

https://blog.csdn.net/qq_22221731/article/details/86615530

9. 如何解决跨域问题？

https://juejin.cn/post/6844903767226351623

总结：
同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源

同源策略限制内容有：

Cookie、LocalStorage、IndexedDB 等存储性内容
DOM 节点
AJAX 请求发送后，结果被浏览器拦截了

但是有三个标签是允许跨域加载资源：

<img src=XXX>
<link href=XXX>
<script src=XXX>

跨域解决方案：
1.jsonp

2.CORS

3.postMessage
postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：

页面和其打开的新窗口的数据传递
多窗口之间消息传递
页面与嵌套的iframe消息传递
上面三个场景的跨域数据传递
4. websocket

5. node中间件代理
实现原理：同源策略是浏览器需要遵循的标准，而如果是服务器向服务器请求就无需遵循同源策略。 代理服务器，需要做以下几个步骤：

接受客户端请求 。
将请求 转发给服务器。
拿到服务器 响应 数据。
将响应转发给客户端。

6.nginx反向代理
7.window.name + iframe
8.location.hash + iframe
9.document.domain + iframe
```

9.Javascript基本数据类型？

基本数据类型有：string、number、boolean、undefined、null 和 symbol

前端面试题20200216