最新版前端工程师面试题--前端核心(1)-技术圈

2、前端核心

2.1、服务端编程

JSONP 的缺点

参考回答：

JSON只支持 get，因为 script 标签只能使用 get 请求；

JSONP 需要后端配合返回指定格式的数据。

跨域（jsonp，ajax）

参考回答：

JSONP：ajax 请求受同源策略影响，不允许进行跨域请求，而 script 标签 src 属性中的链接却可以访问跨域的 js 脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的 js 代码，在 src 中进行了调用，这样实现了跨域。

dom是什么，你的理解？

参考回答：

文档对象模型（Document Object Model，简称DOM），是W3C 组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

关于 dom的 api 有什么

参考回答：

节点创建型 api，页面修改型api，节点查询型api，节点关系型 api，元素属性型 api， 元素样式型 api等

2.2、Ajax

ajax 返回的状态

参考回答：

0 －（未初始化）还没有调用 send()方法

1 －（载入）已调用 send()方法，正在发送请求

2 －（载入完成）send()方法执行完成，已经接收到全部响应内容

3 －（交互）正在解析响应内容

4 －（完成）响应内容解析完成，可以在客户端调用了

实现一个 Ajax

参考回答：

AJAX创建异步对象XMLHttpRequest

操作XMLHttpRequest 对象

设置请求参数（请求方式，请求页面的相对路径，是否异步）
设置回调函数，一个处理服务器响应的函数，使用 onreadystatechange ，类似函数指针
获取异步对象的 readyState 属性：该属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。
判断响应报文的状态，若为 200 说明服务器正常运行并返回响应数据。
读取响应数据，可以通过 responseText 属性来取回由服务器返回的数据。

发出两个有顺序的 ajax，可以用回调函数，也可以使用Promise.then 或者 async 等。

写出原生 Ajax

参考回答：

Ajax 能够在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容，实现局部刷新，大大降低了资源的浪费，是一门用于快速创建动态网页的技术，ajax 的使用分为四部分：

创建XMLHttpRequest 对象 var xhr = new XMLHttpRequest();
向服务器发送请求，使用 xmlHttpRequest对象的 open 和 send 方法，
监听状态变化，执行相应回调函数

var xhr = new XMLHttpRequest(); 
xhr.open('get', 'aabb.php', true); 
xhr.send(null); 
xhr.onreadystatechange = function() { 
    if(xhr.readyState == 4) { 
        if(xhr.status == 200) { 
            console.log(xhr.responseText); 
        } 
    }
}

2.3、移动 web 开发

知道 PWA 吗

参考回答：

PWA全称 Progressive Web App，即渐进式WEB 应用。一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和Service Worker来实现 PWA 的安装和离线等功能

Rem, Em

参考回答：

rem单位如何转换为像素值
当使用 rem单位的时候，页面转换为像素大小取决于叶根元素的字体大小，即HTML 元素的字体大小。根元素字体大小乘 rem的值。例如，根元素的字体大小为 16px，那么 10rem就等同于 10*16=160px。
em是如何转换成 px 的
当使用 em单位的时候，像素值是将 em值乘以使用 em单位的元素的字体大小。例如一个 div 的字体为 18px，设置它的宽高为 10em，那么此时宽高就是 18px*10em=180px。
```
.test{ 
    width: 10em;
    height: 10em; 
    background-color: #ff7d42; 
    font-size: 18px;
}
```
一定要记住的是，em是根据使用它的元素的font-size 的大小来变化的，而不是根据父元素字体大小。有些元素大小是父元素的多少倍那是因为继承了父元素中 font-size 的设定，所以才起到的作用。
em单位的继承效果:
使用 em单位存在继承的时候，每个元素将自动继承其父元素的字体大小，继承的效果只能被明确的字体单位覆盖，比如 px和 vw。只要父级元素上面一直有 fontsize 为 em单位，则会一直继承，但假如自己设置了font-size 的单位为 px 的时候，则会直接使用自己的 px 单位的值。
根 html 的元素将会继承浏览器中设置的字体大小
除非显式的设置固定值去覆盖。所以 html 元素的字体大小虽然是直接确定 rem的值，但这个字体大小首先是来源于浏览器的设置。（所以一定要设置 html 的值的大小，因为有可能用户的浏览器字体大小是不一致的。）
当 em单位设置在 html 元素上时
它将转换为em值乘以浏览器字体大小的设置。
例如：
```
html{ 
    font-size: 1.5em;
}
```
可以看到，因为浏览器默认字体大小为 16px，所以当设置HTML 的 fontsize 的值为 1.5em 的时候，其对应的 px 的值为 161.5=24px 所以此时，再设置其他元素的 rem的值的时候，其对应的像素值为 n24px。例如，test 的 rem的值为 10
```
.test{ 
    width: 10rem;
    height: 10rem; 
    background-color: #ff7d42;
}
```
总结:
优缺点:
em可以让我们的页面更灵活，更健壮，比起到处写死的 px 值，em似乎更有张力，改动父元素的字体大小，子元素会等比例变化，这一变化似乎预示了无限可能, em做弹性布局的缺点还在于牵一发而动全身，一旦某个节点的字体大小发生变化，那么其后代元素都得重新计算
1. rem单位翻译为像素值的时候是由 html 元素的字体大小决定的。此字体大小会被浏览器中字体大小的设置影响，除非显式的在 html 为 font-size 重写一个单位。
2. em单位转换为像素值的时候，取决于使用它们的元素的 font-size 的大小，但是有因为有继承关系，所以比较复杂。

Rem布局及其优缺点

参考回答：

首先Rem相对于根(html)的 font-size 大小来计算。简单的说它就是一个相对单位。

例如:font-size:10px;,那么（1rem = 10px）了解计算原理后首先解决怎么在不同设备上设置 html 的 font-size 大小。其实 rem布局的本质是等比缩放，一般是基于宽度。

优点:

可以快速适用移动端布局字体图片高度

缺点:

目前 ie 不支持，对 pc 页面来讲使用次数不多；
数据量大：所有的图片，盒子都需要我们去给一个准确的值；才能保证不同机型的适配；
在响应式布局中，必须通过 js来动态控制根元素 font-size 的大小。

也就是说 css 样式和 js 代码有一定的耦合性。且必须将改变 font-size 的代码放在 css 样式之前。

防止手机中页面放大和缩小

参考回答：

<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">

2X图 3X图适配

参考回答：

实际程序开发当中，我们代码中用的值是指逻辑分辨率 pt，而不是像素分辨率 px，比如我们定义一个按钮的高度为 45，这个 45 指的是 45pt 而不是 45px。在非Retina 屏下 1pt = 1px，4 和 4.7 寸Retina 屏下 1pt = 2px，5.5 和 x 下 1pt = 3px.我们制作不同尺寸的图片，比如@1x 为 22px，则@2x 为 44px，@3x 为 66px，命名分别为 image.png，在项目的 Assets.xcassets 中新建New Image Set，修改名字为 image，并把相应尺寸的图片拖放至相应位置。

/* 根据 dpr 显示 2x 图/3x 图 */ 
.bg-image(@url){ 
    background-image:~"url('@{url}@2x.png')"; 
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){ 
        background-image:~"url('@{url}@3x.png')";
 } 
}

.bg-color(@color) { 
    background-color: @color;
}