面试查漏补缺记录

面试查漏补缺记录

1、一个网页从开始请求到最终显示的完整过程

一个网页从请求到最终显示的完整过程一般可分为如下7个步骤：

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

2、主流浏览器有哪些，分别是什么内核

1. 谷歌浏览器（Google Chrome）：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核。；
2. IE浏览器（Internet Explorer）：Trident内核，也是俗称的IE内核。；
3. 火狐浏览器（Mozilla Firefox）：Gecko内核，俗称Firefox内核；
4. 苹果浏览器（Safari）：Webkit内核；
5. 欧朋浏览器（Opera）：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；

3、html块级元素的盒子模型

这个按理来说是不应该不会的，但是有时候还是会昏了头记混。盒子模型包含个部分：margin（外边距），border（边框），padding（内边距），content（内容区域）。如下图

盒子模型也分为两种：

1. w3c的盒子模型： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding ) 此属性表现为标准模式下的盒模型。
2. IE的盒子模型： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 。

有一个标签比较奇特，它在不同类型下盒子模型也有区别。那就是input标签。

当input的类型为"text"时：状态为w3c的盒子模型 实际宽度 = width + border + padding

当input的类型为"search、buttom、submit"时：状态为IE的盒子模型 实际宽度 = width

4、vue中的虚拟树

1.什么是虚拟树？

虚拟DOM树就是一个用来描述一段HTML片段的js对象，

2.vue是如何去通过虚拟树更新页面的？

主要分为以下四步：

① 当页面渲染的时候Vue会创建一棵虚拟DOM树
② 当页面发生改变Vue会再创建一棵新的虚拟DOM树
③ 后两棵新旧虚拟DOM树进行对比，Vue通过diff算法，去记录差异的地方
④ 将有差异的地方更新到真实的DOM树中

3、虚拟DOM树有什么用？

虚拟DOM树的使用大大减少了页面渲染的时间。(通过加大内容空间的使用来缩小渲染时间)

4，vue的更新方式

vue是通过对比组件自身的新旧虚拟DOM进行更新的

5、aixos 怎么配置拦截器

axios.interceptors.request.use 请求拦截器

axios.interceptors.response.use 响应拦截器

import axios from 'axios'
 
// 配置默认的host,假如你的API host是：http://api.htmlx.club
  
 
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
　　// 在发送请求之前做些什么
if (window.localStorage.getItem('access-token')) {
    config.headers.Authorization = window.localStorage.getItem('access-token');
}
console.log(window.localStorage.getItem('access-token'));
　　return config
}, function (error) {
　　// 对请求错误做些什么
return Promise.reject(error)
});
 
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
　　//当返回信息为未登录或者登录失效的时候重定向为登录页面
    if (response.data.status == 100 || response.data.message == '用户未登录或登录超时，请登录！') {
      router.push({
        path: "/",
        querry: { redirect: router.currentRoute.fullPath }//从哪个页面跳转
      })
    }
    return response;
}, function (error) {
　　// 对响应错误做点什么
　　return Promise.reject(error)
});

6、ajax 怎么配置拦截器

• jq版

$(documment).ajaxStart(function(){
	/*if(!event){
		return;
	} 
	if(event.target.dataset.set){
	console.log('start')
	}*/
	console.log('start')
}).ajaxStop(function(){
	console.log('stop')
})

• js版

友情链接

7.ajax请求有哪几步

1. 创建XMLHttpRequest异步对象

var xhr;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  	xhr=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  	xhr=new ActiveXObject("Microsoft.XMLHTTP");
  }

2. 设置回调函数

xhr.onreadystatechange = callback

3. 使用open方法与服务器建立连接

// get 方式
xhr.open("get", "test.php", true)

// post 方式发送数据 需要设置请求头
xhr.open("post", "test.php", true)
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

4. 向服务器发送数据

// get 不需要传递参数
xhr.send(null)

// post 需要传递参数
xhr.send("name=jay&age=18")

5. 在回调函数中针对不同的响应状态进行处理

function callback() {
  // 判断异步对象的状态
  if(xhr.readyState == 4) {
    // 判断交互是否成功
    if(xhr.status == 200) {
      // 获取服务器响应的数据
      var res = xhr.responseText
      // 解析数据
      res = JSON.parse(res)
    }
  }
}

8.rem原理

其实rem布局的本质是等比缩放，一般是基于屏幕的宽度。

rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小——MDN
比如根元素（html）设置font-size=12px; 非根元素设置width:2rem;则换成px表示就是24px；
如果根元素设置成font-size=1rem;则根元素换成px就是相对于初始字体大小，一般是12px；

rem.js（可用）

!function(n){
    var  e=n.document,
         t=e.documentElement,
         i=750,//适用750的设计图
         d=i/100,//1rem相当于100px
         o="orientationchange"in n?"orientationchange":"resize",
         a=function(){
             var n=t.clientWidth||320;n>750&&(n=750);
             t.style.fontSize=n/d+"px"
         };
         e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);

持续更新中…