前端面试系列（7）

李才哥

发布于 2019-07-30 11:28:13

3960

发布于 2019-07-30 11:28:13

文章被收录于专栏：李才哥

一、css盒模型

1、基本概念：

css的盒模型本质是一个盒子，封装周围的HTML元素，包括：外边距、边框、内边距和实际内容。

Margin（外边距）：边框以外的区域，外边距是透明的
Border(边框)：围绕在内边距和内容外的边框
Padding（内边距）：内容与边框之间的区域，内边距是透明的
Content（内容）：盒子的内容

2、标准盒模型和IE盒模型

区别：标准盒模型和IE盒模型的width和height的计算方式不同

举个栗子：假设设置一个元素宽高各为100px，为了方便观察设置背景色为red，代码如下：

<style>
    #div1{
        width: 100px;
        height: 100px;
        background-color: red;
        padding: 10px;
    }
</style>
</head>
<body>
    <div id="div1">盒模型</div>
</body>

然后在浏览器审查元素的时候你就会发现，元素的大小并不是自己设置的100px，而是变成了120px。

这是因为在默认情况下的盒模型是标准盒模型，设置的width、heigh仅仅只是内容的宽高，不包含padding、border等；所以在添加了padding之后自然整体宽高都会变大，不是自己之前设置的了。

标准盒模型的定义的width指的是content-width，
IE盒模型定义的width指 border+padding+content-width

设置：

标准模型（默认）box-sizing：content-box
IE盒模型 box-sizing：border-box

二、link和@import的区别

1、首先来说一下link和@import是用来干什么的，在HTML中引入css的方式有四种：

内联方式：直接在HTML标签中style属性中添加css样式

<div style="background: red"></div>

嵌入方式：在HTML头部中的style标签中写下css代码

 <head>    
 <style>    
    .content {background: red;}      
</style> 
 </head>

链接方式：在HTML头部的<head>标签中引入外部css文件

<head>     
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

导入方式：是指使用css规则引入外部css文件

<style>
    @import url(style.css);
</style>

所以link和@import是将css引入HTML中的方式，虽然都是css引入方式，但是可能对大家而言link比较熟悉，使用的次数比较多，相比之下@import就很少被使用。为什么都是导入方式大家都喜欢用link，而不是@import，这就要看一下他两之间的区别了。

2、区别：

加载方式不同，link可以在页面载入的同时进行加载，而@import只能在页面加载完成之后才能进行加载。
link属于HTML，不存在兼容问题，@import是css2.1才提出的概念，所以浏览器版本较低时可能就无法正确导入外部样式文件。
@import是css提供的语法规则，只有导入样式表的作用，而link属于html，不仅可以导入样式表，还可以定义rel等属性。
link支持使用JavaScript来改变DOM样式，@import不支持

三、绑定事件的三种方式

1、DOM元素直接绑定，简单来说就是在html标签中绑定事件的话，需要在js中写上事件处理的程序，然后在html中使用同名的html特性来调用。

 <button type="button" onclick="messageShow()">clickme</button>    
 <script>    
     function messageShow(){      
         alert("Yes");    
    }    
 </script>

2、在js中绑定事件，这是我们最常用的一种绑定事件的方式，先获取到html元素，再在js里绑定事件

<button type="button">clickMe</button>

<script>    
  var oBtn=document.getElementsByTagName("button")[0];    
  oBtn.onclick=function(){        
  alert('Yes1');     
  }    
</script>

3、使用事件监听绑定事件

 <button type="button">clickMe</button>    
 <script>    
 var oBtn=document.getElementsByTagName("button")[0];     // 给元素绑定事件监听函数     oBtn.addEventListener('click',function(){        
     alert(this.type);  
    },false)    
     var Show=function(){        
         alert('OK!');  
    };    
 </script>

需要注意的是使用事件监听绑定事件时，有三个参数，addEventListener（事件名，事件处理程序，布尔值），最后一个参数是布尔值，如果是true，表示在捕获阶段调用事件处理程序，如果是false，表示在冒泡阶段调用事件处理程序，一般都是false。

四、typeof和instance的区别

基本数据类型：number、string、Boolean、undefined、null
引用数据类型：object

1、typeof

typeof可以检测给定变量的数据类型，返回值为一个字符串，可能是number、boolean、string、function、undefined、object。

 console.log(typeof(Array));  //"function"
 console.log(typeof(Object)); //"function"
 console.log(typeof(null)); //"Object"

要注意以上三种情况，Array和Object的数据类型是function，因为Array本身就是js内部创建的构造函数。null是指空对象，所以输出来为Object类型。

typeof一般用来判断一个变量是否存在：

 if(typeof(a)!="undefined"){      
 console.log("ok");  
 }

如果存在的话返回ok。

2、instanceof

instanceof的作用是判断一个变量是否是某一个对象的实例，A instanceof B（判断A是否是B的实例，是的话返回true，不是的话返回去false）。

   var a=new Array;  
   console.log(a instanceof Array);  //"true"    
   console.log(Array instanceof Function); //"true"  
   console.log(Object instanceof Function);//"true"    
   console.log(a instanceof Function);//"true"

上面的例子也证明了typeof的输出结果，Array和Object是Function的实例，所以检测出来Array和Object的数据类型为function。

因为Array是function的实例，而a又是Array的实例，所以a就是Function的实例，a instanceof Function会返回一个true。

五、src和herf的区别

src是将指定资源嵌套进当前文档
herf是在当前文档和指定资源之间开辟了一条通道

六、从输入一个url开始，到页面加载完成，都会发生哪些操作？

1、DNS解析

DNS（域名解析）实现了网址到IP地址的转换，通过主机名，获取到与主机名相对应的ip地址。其实就是一个递归查询到过程，从本地域名->根域名->顶级域名，比如com->google.com->www.google.com

2、TCP连接（三握四挥）

发送http请求

发送http请求就是构建http请求报文，并通过TCP协议发送到服务器的指定端口（http是8080，https包括443/tcp 443/udp）。
http请求报文一般包括请求方式、请求报头、请求正文
请求行：

Method Request-URL HTTP-Version

请求方法请求URL HTTP版本

常用的方法有: GET, POST, PUT, DELETE, OPTIONS, HEAD。

2.服务器响应请求并返回http报文

http响应报文由三部分组成：状态码、响应报头、响应报文
状态码：

1××：指示信息-表示请求已接收，继续处理

2××：成功-表示请求已经成功接收、理解、接受

3××：重定向-表示要完成请求必须进行更近一步的操作

4××：客户端错误-请求有语法错误或者请求无法实现

5××：服务器错误-服务器无法完成合法的请求

3、浏览器解析并渲染页面

解析html文档，构建DOM树。
下载css文件，开始构建css树。
css树构建完成之后，和DOM树一起构成渲染树。
布局：计算出每个节点在页面中的位置。
显示，通过显卡显示页面

DOM树和渲染树的区别：

DOM树与HTML标签一一对应，包括head和隐藏的节点
渲染树不包括head和隐藏的元素，并且每个节点都有与之对应的css样式。

重绘和重排（这个也需要划重点）：

当页面中的元素样式发生变化时（颜色等），不影响节点的布局时，会引起浏览器的重绘
当页面中的DOM元素的位置，尺寸等影响布局的样式发生变化时，会引起浏览器的重排
重排一定会引发重绘
但是重绘不一定能引起重排

在任何时代，

教育说起来都是一件高大上的事，

但却没有什么真正有价值的东西是教得会的，

没有任何一种文化模因

可以说清楚一个个体的全部问题。

在任何时代，

想要抓住人性的弱点来赚钱都非常容易，

没有一点高级。

相反，想要建设一种文化，

耐心地拆除信息壁垒，

并且能够坚持下来，

那真不是一般的不易。

在任何时代，

在一秒钟内看到本质的人，

和花半辈子看不清的人，

自然是不一样的命运。

每一天，你将受到才哥的理论，结合历史、政治、文化、艺术、商业故事，令人防不胜防的高纯度无死角知识轰炸。以及，不间断的私藏书籍、电影推荐。

有时候，某件事虽记不清楚，但总感觉这样的事在很久很久以前发生过...

有时候，某个人虽从未见过，但总感觉面前的人在另一个时空里曾遇见...

那时候相忘于江湖的事，或许穿越了时光，有了新的世界

那时候不远万里追寻的梦，也许穿行过人海，也有了新的意义

而对于我们来说，那个惦念的江湖，那个执着的梦，其核心都是在偌大的世界里，寻找到更真实更好的自己！

知道你会来

所以我一直在这里等

岁月不饶人，我亦未曾绕过岁月

最后，大家有什么想要吐槽的，就在留言区说出你的想法。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-07-27，如有侵权请联系 cloudcommunity@tencent.com 删除

css

http

html

本文分享自李才哥微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css

http

html

登录后参与评论

0 条评论

热度