前端面试题（2）

今天药忘吃喽~ 2022-02-23 04:14 186阅读 0赞

来源：[https://www.zhihu.com/question/41466747/answer/132562725][https_www.zhihu.com_question_41466747_answer_132562725]

**1.HTTP请求和响应**

1.用户输入URL到浏览器显现给用户页面经过了什么过程用户输入URL，  
2.浏览器获取到URL浏览器(应用层)进行DNS解析（直接输入IP地址既跳过该步骤）  
3.根据解析出的IP地址+端口，浏览器（应用层）发起HTTP请求，请求中携带（请求头header（也可细分为请求行和请求头）、请求体body）  
4.请求到达传输层，tcp协议为传输报文提供可靠的字节流传输服务，它通过三次握手等手段来保证传输过程中的安全可靠。通过对大块数据的分割成一个个报文段的方式提供给大量数据的便携传输。  
5.到网络层， 网络层通过ARP寻址得到接收方的Mac地址，IP协议把在传输层被分割成一个个数据包传送接收方。  
6.数据到达数据链路层，请求阶段完成  
7.接收方在数据链路层收到数据包之后，层层传递到应用层，接收方应用程序就获得到请求报文。  
8.接收方收到发送方的HTTP请求之后，进行请求文件资源（如HTML页面）的寻找并响应报文  
9.发送方收到响应报文后，如果报文中的状态码表示请求成功，则接受返回的资源（如HTML文件），进行页面渲染。

（header：1、请求的方法（get、post、put…）2、协议（http、https、ftp、sftp…）3目标url（具体的请求路径已经文件名）4一些必要信息（缓存、cookie之类）。)  
（body包含请求的内容。）

**2.href与src**

href (Hypertext Reference)指定网络资源的位置，从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。（目的不是为了引用资源，而是为了建立联系，让当前标签能够链接到目标地址。）

src source（缩写），指向外部资源的位置，指向的内容将会应用到文档中当前标签所在位置。

href与src的区别

1、请求资源类型不同：href 指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的联系。在请求 src 资源时会将其指向的资源下载并应用到文档中，比如 JavaScript 脚本，img 图片；  
2、作用结果不同：href 用于在当前文档和引用资源之间确立联系；src 用于替换当前内容；  
3、浏览器解析方式不同：当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

**3.link和@import的区别**

两者都是外部引用 CSS 的方式，但是存在一定的区别：  
（1）link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS。  
（2）link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。  
（3）link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持。（4）link支持使用Javascript控制DOM改变样式；而@import不支持。

**4.介绍一下你对浏览器内核的理解？**

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎则：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

常见内核  
Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。\[又称MSHTML\]  
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等  
Presto内核：Opera7及以上。 \[Opera内核原为：Presto，现为：Blink;\]  
Webkit内核：Safari,Chrome等。 \[ Chrome的：Blink（WebKit的分支）\]

**5.iframe有哪些缺点？**

iframe会阻塞主页面的Onload事件；  
搜索引擎的检索程序无法解读这种页面，不利于SEO;  
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。

**6.HTML5的离线储存怎么使用，工作原理能不能解释一下？**

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。  
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

如何使用：

1、页面头部像下面一样加入一个manifest的属性；
    2、在cache.manifest文件的编写离线存储的资源；
        CACHE MANIFEST
        #v0.11
        CACHE:
        js/app.js
        css/style.css
        NETWORK:
        resourse/logo.png
        FALLBACK:
        / /offline.html
    3、在离线状态时，操作window.applicationCache进行需求实现。

**7.CSS选择符有哪些？哪些属性可以继承？**

1.id选择器（ \# myid）  
2.类选择器（.myclassname）  
3.标签选择器（div, h1, p）

4.相邻选择器（h1 + p）  
5.子选择器（ul > li）  
6.后代选择器（li a）

7.通配符选择器（ \* ）  
8.属性选择器（a\[rel = “external”\]）  
9.伪类选择器（a:hover, li:nth-child）

可继承的样式： font-size font-family color, UL LI DL DD DT;  
不可继承的样式：border padding margin width height ;

**8.CSS3新增伪类有那些？**

举例： 
p:first-of-type 选择属于其父元素的首个 ``元素的每个 ``元素。 
p:last-of-type 选择属于其父元素的最后 ``元素的每个``元素。 
p:only-of-type 选择属于其父元素唯一的 ``元素的每个 ``元素。 
p:only-child 选择属于其父元素的唯一子元素的每个 ``元素。 
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 ``元素。

:after 在元素之前添加内容,也可以用来做清除浮动。  
:before 在元素之后添加内容  
:enabled  
:disabled 控制表单控件的禁用状态。  
:checked 单选框或复选框被选中。

**9.CSS3有哪些特性？**

新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）  
圆角 （border-radius:8px）  
多列布局 （multi-column layout）  
阴影和反射 （Shadow\\Reflect）  
文字特效 （text-shadow、）  
文字渲染 （Text-decoration）  
线性渐变 （gradient）  
旋转 （transform）  
缩放,定位,倾斜,动画,多背景

**10.CSS3的Flexbox（弹性盒布局模型），以及适用场景？**

一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。

较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。

它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。

在布局上有了比以前更加灵活的空间。

**11.JavaScript原型，原型链，有什么特点？**

**12.如何实现数组的随机排序？**

**13.JavaScript如何实现继承？**

**14.JavaScript创建对象的几种方式？**

**15.Ajax是什么？如何创建一个Ajax？**

下面是牛客网面试题：  
[https://www.nowcoder.com/discuss/59411][https_www.nowcoder.com_discuss_59411]  
[https://www.nowcoder.com/discuss/52390][https_www.nowcoder.com_discuss_52390]  
[https://www.nowcoder.com/discuss/51738][https_www.nowcoder.com_discuss_51738]  
[https://www.nowcoder.com/discuss/59411][https_www.nowcoder.com_discuss_59411]  
[https://www.nowcoder.com/discuss/52998][https_www.nowcoder.com_discuss_52998]  
[https://www.nowcoder.com/discuss/52219][https_www.nowcoder.com_discuss_52219]  
[https://www.nowcoder.com/discuss/50455][https_www.nowcoder.com_discuss_50455]  
[https://www.nowcoder.com/discuss/54643][https_www.nowcoder.com_discuss_54643]  
[https://www.nowcoder.com/discuss/56845][https_www.nowcoder.com_discuss_56845]  
[https://www.nowcoder.com/discuss/51295][https_www.nowcoder.com_discuss_51295]  
[https://www.nowcoder.com/discuss/51016][https_www.nowcoder.com_discuss_51016]  
[https://www.nowcoder.com/discuss/51489][https_www.nowcoder.com_discuss_51489]  
[https://www.nowcoder.com/discuss/50001][https_www.nowcoder.com_discuss_50001]  
[https://www.nowcoder.com/discuss/58144][https_www.nowcoder.com_discuss_58144]  
[https://www.nowcoder.com/discuss/58534][https_www.nowcoder.com_discuss_58534]  
[https://www.nowcoder.com/discuss/52057][https_www.nowcoder.com_discuss_52057]

[https_www.zhihu.com_question_41466747_answer_132562725]: https://www.zhihu.com/question/41466747/answer/132562725
[https_www.nowcoder.com_discuss_59411]: https://www.nowcoder.com/discuss/59411
[https_www.nowcoder.com_discuss_52390]: https://www.nowcoder.com/discuss/52390
[https_www.nowcoder.com_discuss_51738]: https://www.nowcoder.com/discuss/51738
[https_www.nowcoder.com_discuss_52998]: https://www.nowcoder.com/discuss/52998
[https_www.nowcoder.com_discuss_52219]: https://www.nowcoder.com/discuss/52219
[https_www.nowcoder.com_discuss_50455]: https://www.nowcoder.com/discuss/50455
[https_www.nowcoder.com_discuss_54643]: https://www.nowcoder.com/discuss/54643
[https_www.nowcoder.com_discuss_56845]: https://www.nowcoder.com/discuss/56845
[https_www.nowcoder.com_discuss_51295]: https://www.nowcoder.com/discuss/51295
[https_www.nowcoder.com_discuss_51016]: https://www.nowcoder.com/discuss/51016
[https_www.nowcoder.com_discuss_51489]: https://www.nowcoder.com/discuss/51489
[https_www.nowcoder.com_discuss_50001]: https://www.nowcoder.com/discuss/50001
[https_www.nowcoder.com_discuss_58144]: https://www.nowcoder.com/discuss/58144
[https_www.nowcoder.com_discuss_58534]: https://www.nowcoder.com/discuss/58534
[https_www.nowcoder.com_discuss_52057]: https://www.nowcoder.com/discuss/52057