前端面试题汇总学习（一）

最新推荐文章于 2023-10-31 20:14:08 发布

LullabyLY

最新推荐文章于 2023-10-31 20:14:08 发布

阅读量320

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_42853241/article/details/88855080

本文详细介绍了浏览器解析HTML的过程，包括请求资源、渲染页面、执行JS、重新渲染等关键步骤，并对比了cookie、sessionStorage与localStorage的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浏览器解析过程

用户访问网页，先通过DNS解析得出网页的IP地址
请求服务器：
建立TCP连接，之后浏览器向服务器发出请求
服务器响应，返回相应的数据
浏览器解析

如何解析

…（前面和上一题一样）

浏览器开始解析HTML代码（自上向下），发现link引用外部css文件，请求css文件，服务器响应，浏览器解析；
继续解析渲染页面；
当发现img标签时，发出请求，此时浏览器不会等待图片加载，而是继续渲染后面的代码；
服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
发现script-js脚本，载入后立马执行（不管HTML有没有被渲染），执行后会阻塞页面后续的内容包括页面的渲染、其它资源的下载）。原因：因为浏览器需要一个稳定的DOM树结构，而JS中很有可能有代码直接改变了DOM树结构，比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以就会阻塞其他的下载和呈现。所以，js　死循环执行不完的话，页面也就别想呈现了，所以，建议将所有的script标签放到页面底部；
假设js脚本中有style.display=”none”，执行后，浏览器需要重新渲染部分代码
直至解析至</html>
假若，浏览器点击某些功能改变样式，换了css外部样式，浏览器需要重新向服务器请求新的css文件，重新渲染页面

解析过程是同步还是异步？

简述cookie，sessionStorage，localStorage的含义和区别

cookie： Web站点跟踪用户技术，指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据。

当用户使用浏览器访问一个支持Cookie的网站的时候，用户会提供包括用户名在内的个人信息并且提交至服务器；服务器在向客户端回传相应的超文本的同时也会发回这些个人信息，这些信息存放于HTTP响应头；当客户端浏览器接收到来自服务器的响应之后，浏览器会将这些信息存放在一个统一的位置；之后，客户端再向服务器发送请求的时候，都会把相应的Cookie再次发回至服务器（Cookie信息则存放在HTTP请求头）。有了Cookie这样的技术实现，服务器在接收到来自客户端浏览器的请求之后，就能够通过分析存放于请求头的Cookie得到客户端特有的信息，从而动态生成与该客户端相对应的内容。（例如，网站的“请记住我”选项，淘宝推荐信息）

sessionStorage： 将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据，这些数据只有在同一会话中的页面才能访问；当用户关闭浏览器窗口后，数据会被删除。不持久

localStorage： 将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。持久

区别：
共同点：都是保存在浏览器端，且同源的

cookie数据会在客户端和服务器之间来回传递，sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
cookie数据不能超过4k，sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
cookie需要指定作用域，不可以跨域调用（在所有同源窗口中都是共享的）；sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的。
sessionStorage仅仅在当前浏览器窗口关闭之前有效；localStorage始终有效，窗口或者浏览器关闭之后也一直保存；cookie，只在设置cookie过期时间之前有效，即使窗口关闭或者浏览器关闭。

盒子模型

有两种， IE 盒子模型、标准 W3C 盒子模型
盒模型：内容、内边距、外边距（一般不计入盒子实际宽度）、边框（IE 盒子模型的内容包括边框和内边距）

原型链

原型：

实例对象中有__proto__这个属性,叫原型,也是一个对象,这个属性是给浏览器使用,不是标准的属性----->__proto__----->可以叫原型对象
构造函数中有prototype这个属性,叫原型,也是一个对象,这个属性是给程序员使用,是标准的属性------>prototype—>可以叫原型对象
实例对象的__proto__和构造函数中的prototype相等—>true
又因为实例对象是通过构造函数来创建的,构造函数中有原型对象prototype
实例对象的__proto__指向了构造函数的原型对象prototype
通过原型来添加方法,解决数据共享,节省内存空间

原型链：有限的实例对象和原型之间组成的有限链，为了实现共享属性和继承

数组去重

利用数组下标：判断此元素在该数组中首次出现的位置下标与当前的下标是否相等（indexOf）

 var ar=[1,23,11,1,1,23,4,9,9,8,9,0];
    function deleteNum(arr){
        for(var i=0;i<arr.length;i++){
            if(arr.indexOf(arr[i])!=i){
                arr.splice(i,1);
                i--;
            }
        }
        return arr;
    }
    console.log(ar);  
      //[1, 23, 11, 1, 1, 23, 4, 9, 9, 8, 9, 0]
    console.log(deleteNum(ar)); 
      //[1, 23, 11, 4, 9, 8, 0]

浏览器内核

IE：trident
Edge：EdgeHTML
Firefox：gecko
Safari：webkit
Opera：Blink（以前是Presto）
Chrome：Blink（之前是webkit）
360、猎豹：IE+Chrome双内核
搜狗、遨游、QQ：Trident（兼容模式）+Webkit（高速模式）

XHTML和HTML有什么区别

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：

XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

前端页面有哪三层构成，分别是什么?作用是什么?

html结构层，css表示层，js行为层

每个HTML文件前都有Doctype，这是干什么的？HTML5 为什么只需要写 !DOCTYPE HTML？

<!Doctype>声明于文档中最顶部的位置，是为了告诉浏览器应该按照何种规范（HTML、XHTML）解析页面。<!Doctype>不存在或格式不正确会导致文档以兼容模式呈现。
HTML5 不基于 SGML（标记通用置标语言），因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）