8.15 网易有道前端面试的一些总结

一面

1.Vue.nextTick()

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；

理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数

2.HTTP状态码 301,302，307

301 moved permanently，永久性重定向，表示资源已被分配了新的 URL
302 found，临时性重定向，表示资源临时被分配了新的 URL
303 see other，表示资源存在着另一个 URL，应使用 GET 方法获取资源
304 not modified，表示服务器允许访问资源，但因发生请求未满足条件的情况
307 temporary redirect，临时重定向，和302含义类似，但是期望客户端保持请求方法不变向新的地址发出请求
400 bad request，请求报文存在语法错误
401 unauthorized，表示发送的请求需要有通过 HTTP 认证的认证信息
403 forbidden，表示对请求资源的访问被服务器拒绝
500 internal sever error，表示服务器端在执行请求时发生了错误
501 Not Implemented，表示服务器不支持当前请求所需要的某个功能
503 service unavailable，表明服务器暂时处于超负载或正在停机维护，无法处理请求

3.浏览器的缓存机制

4.用XMLHTTPREQUEST和Promise写一个自己的AJax

function getJSON(url) {
    return new Promise(function(resolve, reject) {
        var XHR = new XMLHttpRequest();
        XHR.open('GET', url, true);
        XHR.send();

        XHR.onreadystatechange = function() {
            if (XHR.readyState == 4) {
                if (XHR.status == 200) {
                    try {
                        var response = JSON.parse(XHR.responseText);
                        resolve(response);
                    } catch (e) {
                        reject(e);
                    }
                } else {
                    reject(new Error(XHR.statusText));
                }
            }
        }
    })
}

5.CSS的盒模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素

6.settimeout能否按照定义的时延准确执行？为什么？

JS是一个单线程语言，settimeout基于Queue实现，如果前面的代码执行过于耗时可能会影响后面代码的时间

7.重绘和回流

重绘是当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘
回流是布局或者几何属性需要改变就称为回流。

8.Vue的双向绑定原理

9.不借助中间值的情况下，交换两个变量的值

两个变量用二进制表示，然后互相使用异或运算，实现交换两者的值

10.浏览器的绘图方式

SVG：SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas：Canvas 通过 JavaScript 来绘制 2D 图形。Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
Canvas 与 SVG 的比较
Canvas：

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG：

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

11.BootStrap的栅格布局的实现原理

网格系统的实现原理非常简单，通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，调整内外边距，结合媒体查询，制作响应式网格系统

12.CSS Float的替代方案

inline-block

13.margin合并的原因和解决方案

所谓的外边距合并就是，当两个垂直外边距相遇时，它们将形成一个外边距。合并的外边距的高度等于两个发生合并的外边距的高度中的较大者。
发生合并的情况有以下几种：

两个元素是兄弟关系：
两个元素是父子关系（没有内边距或边框把外边距分割开）：
一个空元素，没有边框和填充
如果这个外边距遇到另一个元素的外边距，还会发生合并
只有普通文档流中块级元素（block）的垂直外边距才会发生外边距合并。行内框，浮动框或绝对定位之间的外边距不会合并。

解决方法我们分为三种情况来讨论，第一种就是解决兄弟元素之间的margin合并情况。
我们可以使用设置浮动元素来解决，例如：

p { 
  margin: 1em 0;
  float: left; 
}
<p>第一行</p>
<p>第二行</p>

第二种是父级和子元素之间的margin合并，我们使用overflow属性来解决，例如：

.div1 { 
  margin-top: 10px;
  overflow: hidden; 
}
.div2 { margin-top: 10px; }
<div class="div1">
  <div class="div2"></div>
</div>

当然，我们还可以通过设置父元素为块状格式化上下文元素、设置border、padding等方式来解决问题。
第三种情况就是空块级元素的合并，一般为空块级元素设置一个高度就能够避免margin合并的问题。

div1 { overflow: hidden; }
div2 { 
  margin: 1rem 0;
  height: 1rem; 
}
<div class="div1">
  <div class="div2"></div>
</div>

14.Option请求的作用，POST请求为何有时会请求两次？

检测服务器所支持的请求方法：可以使用 OPTIONS 方法对服务器发起请求，以检测服务器支持哪些 HTTP 方法
跨域时的预检请求：所有跨域的js在提交post请求的时候，如果服务端设置了可跨域访问，都会默认发送两次请求，第一次是预检请求，查询是否支持跨域，第二次才是真正的post提交。出现这个现象原因在于发送了一个非简单请求。简单请求只使用 GET, HEAD 或者 POST 请求方法。如果使用 POST 向服务器端传送数据，则数据类型 (Content-Type) 只能是 application/x-www-form-urlencoded, multipart/form-data 或 text/plain中的一种。

15.图片懒加载的实现思路

在标签快进入视野之前再对其src赋值。

16.前端页面优化（首屏优化）

1.cdn分发: 通过在多台服务器部署相同的副本，当用户访问时，服务器根据用户跟哪台服务器地理距离小或者哪台服务器此时的压力小，来决定哪台服务器去响应这个请求。
2. 后端在业务层的缓存：数据库查询缓存是可以设置缓存的，这个对于处于高频率的请求很有用。浏览器一般不会对content-type: application/json；的接口进行缓存，所以有时需要我们手动地为接口设置缓存。比如一个用户的签到状态，它的缓存时间可以设置到明天之前。
3. 静态文件缓存方案：这个最常看到。现在流行的方式是文件hash+强缓存的一个方案。比如hash+ cache control: max-age=1年。
4. 前端的资源动态加载：
a. 路由动态加载，最常用的做法，以页面为单位，进行动态加载。
b. 组件动态加载(offScreen Component)，对于不在当前视窗的组件，先不加载。
c. 图片懒加载(offScreen Image)，同上。值得庆幸的是，越来越多的浏览器支持原生的懒加载，通过给img标签加上loading="lazy来开启懒加载模式。
5. 利用好script标签的async和defer这两个属性：功能独立且不要求马上执行的js文件，可以加入async属性。如果是优先级低且没有依赖的js，可以加入defer属性。
6. 渲染的优先级：浏览器有一套资源的加载优先级策略。也可以通过js来自己控制请求的顺序和渲染的顺序。一般我们不需要这么细粒度的控制，而且控制的代码也不好写。
7. 前端做一些接口缓存：前端也可以做接口缓存，缓存的位置有两个，一个是内存，即赋值给运行时的变量，另一个是localStorage。比如用户的签到日历（展示用户是否签到），我们可以缓存这样的接口到localStorage，有效期是当天。或者有个列表页，我们总是缓存上次的列表内容到本地，下次加载时，我们先从本地读取缓存，并同时发起请求到服务器获取最新列表。
8. 页面使用骨架屏：意思是在首屏加载完成之前，通过渲染一些简单元素进行占位。骨架屏虽然不能提高首屏加载速度，但可以减少用户在首屏等待的急躁情绪。这点很有效，在很多成熟的网站（京东、淘宝、Youtube）都有大量应用。
9. 使用ssr渲染：服务器性能一般都很好，那么可以先在服务器先把vdom计算完成后，再输出给前端，这样可以节约的时间为：计算量/(服务器计算速度 - 客户端计算速度)。第二个是服务器可以把首屏的请求在服务端阶段就完成，这样可以省去tcp传输的时间。
10. 引入http2.0：http2.0对比http1.1，最主要的提升是传输性能，在接口小而多的时候会更加明显。
11. 选择先进的图片格式：使用 WebP 的图片格式来代替现有的jpeg和png，当页面图片较多时，这点作用非常明显。把部分大容量的图片从BaseLine JPEG切换成Progressive JPEG（理解这两者的差别）也能缩小体积。
12. 利用好http压缩：即使是最普通的gzip，也能把bootstrap.min.css压缩到原来的17%。可见，压缩的效果非常明显，特别是对于文本类的静态资源。

17.HTTP1.1 2.0 3.0

HTTP3.0(QUIC)基于UDP实现了HTTP协议

18.git指令，流程

git branch 查看本地所有分支
git status 查看当前状态
git commit 提交
git branch -a 查看所有的分支
git branch -r 查看本地所有分支
git commit -am "init" 提交并且加注释
git remote add origin git@192.168.1.119:ndshow
git push origin master 将文件给推到服务器上
git remote show origin 显示远程库origin里的资源
git push origin master:develop
git push origin master:hb-dev 将本地库与服务器上的库进行关联
git checkout --track origin/dev 切换到远程dev分支
git branch -D master develop 删除本地库develop
git checkout -b dev 建立一个新的本地分支dev
git merge origin/dev 将分支dev与当前分支进行合并
git checkout dev 切换到本地dev分支
git remote show 查看远程库
git add .
git rm 文件名(包括路径) 从git中删除指定文件
git clone git://github.com/schacon/grit.git 从服务器上将代码给拉下来
git config --list 看所有用户
git ls-files 看已经被提交的
git rm [file name] 删除一个文件
git commit -a 提交当前repos的所有的改变
git add [file name] 添加一个文件到git index
git commit -v 当你用－v参数的时候可以看commit的差异
git commit -m "This is the message describing the commit" 添加commit信息
git commit -a -a是代表add，把所有的change加到git index里然后再commit
git commit -a -v 一般提交命令
git log 看你commit的日志
git diff 查看尚未暂存的更新
git rm a.a 移除文件(从暂存区和工作区中删除)
git rm --cached a.a 移除文件(只从暂存区中删除)
git commit -m "remove" 移除文件(从Git中删除)
git rm -f a.a 强行移除修改后文件(从暂存区和工作区中删除)
git diff --cached 或 $ git diff --staged 查看尚未提交的更新
git stash push 将文件给push到一个临时空间中
git stash pop 将文件从临时空间pop下来