html面试题

水深无声 2024-03-31 15:36 44阅读 0赞

### **1.行内元素有哪些？块级元素有哪些？空（void)元素有哪些？** ###

行内元素：span img input a select button textarea sub abbr i em

块级元素：div footer header section p h1~6 ul li ol dd dt table menu address blockquote

空元素：br hr

块级元素的特点是独占一行，可以设置宽度、高度、内外边距，在不手动设置宽度的情况下默认是父元素的100%，可以容纳行内元素和其他块级元素。

行内元素的特点是总是和相邻的行内元素在同一行上，设置宽高无效，水平方向上的padding和margin属性可以设置，但是垂直方向上无效，默认宽度由内容撑开，只能容纳其他行内元素或者文本。

行内块元素的特点是和相邻行内元素在同一行但是之间会有空白缝隙，默认宽度是它本身内容的宽度，宽高行高内外边距都可以手动设置。

#### 怎么处理行内块元素默认空隙？ ####

行内块元素在同一行显示会有默认空隙，原因是元素被当成行内元素排版的时候元素之间的空白符都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来html代码中的回车换行被转成一个空白符所以元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时间距为8px.

解决方法：

①通过将上一个元素的闭合标签与下一个元素的开始标签写在同一行可以去除元素间的空白或者将两个inline-block元素间加上空白注释，或者不写元素的闭合标签等

②父元素设置font-size为0子元素单独再设置字体大小

#### 元素之间的转换问题： ####

css设置display=>block，inline，inline-block

### **2.页面导入样式时，使用link和@import有什么区别？** ###

区别一：link先有，@import后有。@import是css提供的语法规则只有导入样式表的作用，link是HTML提供的标签。兼容性link比@import好

区别二：加载顺序差别，浏览器先加载的标签link后加载@import。加载页面时link标签引入的CSS被同时加载@import引入的css将在页面加载完毕后被加载

区别三：DOM可控性区别：可以通过JS操作DOM插入link标签来改变样式，由于DOM方法时基于文档的无法使用@import的方式插入样式

### **3.title与h1的区别，b与strong的区别，i与em的区别** ###

**①title与h1的区别**

title概括了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么

h1是文章主题内容，告诉爬虫我们网站的内容最主要是什么

title是显示在网页标题上，h1是显示在网页内容中

title比h1添加的重要对于seo

网站的logo都是用h1标签包裹的

**②b与strong的区别**

b是实体标签用来给文字加粗的

strong是逻辑标签用来加强字符语气的

b标签只有加粗的样式没有实际的含义，strong表示标签内字符比较重要用以强调的，为了符合css3的规范尽量少用b改用strong就可以

**③i与em的区别**

i是实体标签用来做文字倾斜的

em是逻辑标签用来强调文字内容的

i只是一个倾斜标签没有实际含义，em表示标签内字符重要用以强调，i更多的用在字体图标，em用在医药生物...术语上

### **4.img标签的title和alt有什么区别?** ###

title是鼠标移入到图片显示的值，alt是图片无法加载时显示的值

在SEO的层面上蜘蛛抓取不到图片的内容，所以前端在写img标签的时候为了增加SEO效果要加入alt属性来描述这张图是什么内容或者关键词，

### **5.png jpg gif 这些图片格式解释一下，分别什么时候用？** ###

png是无损压缩，尺寸体积要比jpg jpeg的大，适合做小图标

jpg采用压缩算法有一点失真，比png体积要小，适合做中大图片

gif一般是做动图的

webp同时支持有损和无损压缩，相同质量的图片webp具有更小的体积。但是兼容性不是特别好

### **6.label的作用是什么？是怎么用的？** ###

label标签用来定义表单控件间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

label中有两个属性是非常有用的，即for和accesskey

for属性功能：表示label标签绑定的html元素，点击这个标签的时候所绑定的元素将获取焦点

accesskey属性功能：表示label标签绑定的热键，当按下alt＋所设置的热键，所绑定的元素将获取焦点

### **7.简述你对HTML语义化的理解** ###

语义化是指根据内容的结构化选择合适的标签。

语义化的优点：

对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重，有利于SEO和搜索引擎建立良好的沟通。除此以外语义类还支持读屏软件，根据文章可以自动生成目录。

对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构便于团队的开发与维护。

<header></header>  头部
    
    <nav></nav>  导航栏
    
    <section></section>  区块（有语义化的div）
    
    <main></main>  主要区域
    
    <article></article>  主要内容
    
    <aside></aside>  侧边栏
    
    <footer></footer>  底部

### **8.DOCTYPE有什么作用？标准模式与混杂模式如何区分？他们有何意义？** ###

DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器应该以什么样的文档类型定义来解析文档。不同的渲染模式会影响浏览器对CSS代码甚至JS脚本的解析。他必须声明在TML文档的第一行。当DOCTYPE不存在或者形式不正确会导致HTML文档以混杂模式呈现

浏览器渲染页面的两种模式，可通过document.compatMode获取：

CSS1Compat:标准模式（Strick mode）默认模式，浏览器使用W3C的标准解析渲染页面。在标准模式中浏览器以其支持的最高标准呈现页面

BackCompat：怪异模式（混杂模式）（Quick mode），浏览器使用自己的怪异模式解析渲染页面。在怪异模式中页面以一种比较宽松的向后兼容的方式显示。

标准模式和怪异模式的区别：

**①盒模型的区别**

标准盒子模型=>宽度就是content宽度，高度就是content高度

怪异盒子模型=>宽度高度都是content+padding+border

![f4c40ed920ba4aa5ada3ae69f0c10690.png][]

**②图片元素的垂直对齐方式**

对于inline和table-cell的元素来说，标准模式下vertical-align属性的默认值为baseline，怪异模式下vertical-align属性的默认值为bottom

**③元素的溢出处理**

标准模式下overflow的默认值是visible，怪异模式下元素溢出的内容不会被裁减，元素的大小由其内容决定，自动调整

**④内联元素的尺寸**

标准模式下行内元素是无法自定义宽和高的，而在怪异模式下width和height是可以影响其大小的

**⑤table元素中的字体**

CSS中对于font的属性都是可以继承的，但在怪异模式下对于table元素字体的某些属性将不会从body等其他元素中继承得到，特别是font-size属性

**⑥元素的百分比宽度**

CSS中对于元素的百分比高度规定，百分比为元素包含快的高度，不可为负值。如果包含块的高度没有显示给出，该值等同于auto，所以百分比的高度必须是在元素有高度声明的情况下使用。当一个元素使用百分比高度时，标准模式下，高度取决于内容变化，怪异模式下，百分比高度被准确应用 margin:0 auto在标准模式下可以使元素水平居中但是在怪异模式下就失效了

### **9.谈谈你对meta标签中viewport的理解** ###

meta标签由name和content属性定义，用来描述网页文档的属性，比如：网页的作者，网页的描述，关键词等。

常用的meta标签：

1.charset，用来描述HTML文档的编码类型
    <meta charset="UTF-8" >
    2.keywords，页面关键词
    <meta name="keywords" content="关键词" />
    3.description，页面描述
    <meta name="description" content="页面描述内容" />
    4.refresh，页面重定向和刷新
    <meta http-equiv="refresh" content="0;url=" />
    5.viewport，适配移动端，可以控制视口的大小和比例
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    6.搜索引擎索引方式
    <meta name="robots" content="index,follow" />

viewport中，content参数由以下几种：

width：宽度（数值/device-width）

height：高度（数值/device-height）

initial-scale：初始缩放比例

maximum-scale：最大缩放比例

minimum-scale：最小缩放比例

user-scalable：是否允许用户缩放（yes/no）

**有一个bug，移动端1px会被渲染成2px，你知道这个怎么处理吗？**

局部处理：

\-mata标签中的viewport属性，initial-scale设置为1

\-rem按照设计稿标准走，外加利用transform的scale(0.5)缩小一倍即可

全局处理：

\-mata标签中的viewport属性，initial-scale设置为0.5

\-rem按照设计稿标准走即可

### **10.src和href的区别** ###

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系

src指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置，在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

当浏览器解析到该元素时会暂停其他资源的下载和处理直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内，这就是为什么js脚本要放在底部而不是头部

href指向网络资源所在位置，建立和当前元素或当前文档之间的链接，浏览器识别文件并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式加载css而不是@import

### **11.script标签中defer和async的区别** ###

如果没有defer或async属性浏览器会立即加载并执行相应的脚本，他不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。

async是异步，浏览器在加载页面时如果遇到了async属性浏览器就会立刻下载于此同时继续加载页面这样就解决了阻塞的问题，虽然没有阻塞的情况但是async下的脚本具体什么时候执行就说不定了，有时页面还没加载完就执行了也有可能页面加载后才会执行。因为这种不确定性如果脚本是需要修改DOM的那么就可能出错了，因此async比较适合一些第三方脚本

defer是推迟，defer和async非常像在网络读取这块是一样的，都是异步的，他俩的差别在于脚本下载完之后何时执行，显然defer是最接近我们对于应用脚本的加载和执行的要求的，defer是按照加载顺序执行脚本的，而async是乱序执行的对它来说脚本的加载和执行应该是紧挨着的所以不管你声明顺序如何只要加载完了就会立刻执行。浏览器在加载页面的过程中如果遇到了defer属性浏览器就会立即进行下载于此同时继续加载页面，但是不管脚本是否下载完了都会等到浏览器解析完html以后再执行脚本，因此defer比较适合于DOM有关联的脚本。

不管是defer还是async两者都只适用于外部脚本，而且还要注意兼容性的问题如果浏览器不能识别这两个属性那还是把script内容放在页面底部比较好。

async对于应用脚本的用处不大，因为它完全不考虑依赖但是它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说是非常适合的，最典型的例子Google Analytics

### **12.HTML5有哪些更新** ###

**移除的元素：**

纯表现的元素：basefont、font、s、strike、tt、u、big、center

对可选用性产生负面影响的元素：frame，frameset，noframes

**HTML5主要是关于图像、位置、存储、多任务等功能的增加：**

**语义化标签**，如article、footer、header、nav等

**视频video、音频audio**

<audio src='' controls autoplay loop='true'></audio>
    属性：
    controls控制面板
    autoplay自动播放
    loop="true"循环播放
    
    <video src='' poster='imgs/aa.jpg' controls></video>
    属性：
    poster指定视频还没有完全下载完毕或者用户还没有点击播放前显示的封面。默认显示当前视频文件的第一帧画面，当然通过poster也可以自己制定
    controls控制面板
    width
    height

**画布canvas**

canvas元素使用js在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

**新增表单控件**

<table style="width:500px;">  HTML5新增表单控件  
 <tbody> 
  <tr> 
   <td>标签</td> 
   <td>type属性</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>&lt;input&gt;</td> 
   <td>color</td> 
   <td>颜色选择控件</td> 
  </tr> 
  <tr> 
   <td>&lt;input&gt;</td> 
   <td>date/time</td> 
   <td>日期、时间选择控件</td> 
  </tr> 
  <tr> 
   <td>&lt;input&gt;</td> 
   <td>email</td> 
   <td>电子邮件输入控件</td> 
  </tr> 
  <tr> 
   <td>&lt;input&gt;</td> 
   <td>file</td> 
   <td>文件选择控件</td> 
  </tr> 
  <tr> 
   <td>&lt;input&gt;</td> 
   <td>number</td> 
   <td>数字输入控件</td> 
  </tr> 
  <tr> 
   <td>&lt;input&gt;</td> 
   <td>range</td> 
   <td>拖拽条控件</td> 
  </tr> 
  <tr> 
   <td>&lt;input&gt;</td> 
   <td>search</td> 
   <td>搜索框</td> 
  </tr> 
  <tr> 
   <td>&lt;input&gt;</td> 
   <td>url</td> 
   <td>网址输入控件</td> 
  </tr> 
 </tbody> 
</table>

**history API**

**进度条、度量器：**

progress标签用来表示任务的进度（IE、Safari不支持），max用来表示任务的进度，value表示已完成多少

meter属性：用来显示剩余容量或剩余库存（IE、Safari不支持），high/low规定被视作高/低的范围，max/min规定最大/小值，value规定当前度量值

设置规则：min<low<high<max

**地理定位Geolocation**：用于定位用户的位置

**通信协议websocket**

**本地离线存储**，localStorage长期存储数据，浏览器关闭后数据不丢失，sessionStorage的数据在浏览器关闭后自动删除

**SVG**：指可伸缩矢量图形，用于定义用于网络的基于矢量的图形，使用XML格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失，他是万维网联盟的标准

**拖拽释放**：拖放是一种常见的特性，即抓取对象以后拖到另一个位置。设置元素可拖放：

### **13.img的srcset属性的作用** ###

响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到了img标签的srcset属性。srcset属性用于设置不同屏幕密度下img会自动加载不同的图片。

使用上面的代码，就能实现在屏幕密度为1x的情况下加载image-128.png，屏幕密度为2x时加载image-256.png

sizes用来设置图片的尺寸零界点。对于srcset中的w单位可以理解成图片质量。如果可视区域小于这个质量的值就可以使用。浏览器会自动选择一个最小的可用图片。

sizes语法：

sizes="[media query] [length], [media query] [length] ... "

sizes就是指默认显示128px如果视区宽度大于360px则显示340px

### **14.对web worker的理解** ###

在HTML页面中如果在执行脚本时页面的状态是不可响应的，直到脚本执行完成后页面才变成可响应。web worker是运行在后台的js，独立于其他脚本，不会影响页面的性能。并且通过postMessage将结果回传到主线程。这样在进行复杂操作的时候就不会阻塞主线程了。

web worker是浏览器内置的API，用于在单独的线程中执行js代码，从而避免主线程阻塞影响页面的响应。js是单线程的语言，而使用web worker可以单独的开启一个线程，线程之间通过message协议进行通信，web worker中的代码执行不会影响ui的响应。

需要注意的是web worker线程不能访问window等全局属性，所以不能访问一些浏览器内置的API，也不能修改DOM，但可以通过 XMLHttpRequest或者fetch发送网络请求，如果要修改UI可以给主线程发送消息通知主线程的修改。给web worker传递的消息或者从web worker接收 的消息，消息中的数据都是深度拷贝的。

要定义web worker可以新建一个普通的js文件在里面监听onmessage事件通过事件参数的data属性访问传递进来的消息，然后使用postMessage回传消息给主线程。因为web worker的全局变量指向的是他本身所以这里可以直接访问onmessage或者postMessage等属性。在主线程js中也就是直接通过html引入的js文件里使用worker构造函数创建web worker的实例，传递web worker的url路径这里必须是同源的，最后保存返回的实例，通过web worker实例同名的postMessage方法可以给web worker发送消息。同理，监听web worker实例同名的onmessage事件也可以接收web worker传递过来的消息

### **15.HTML5的离线存储怎么使用，它的工作原理是什么？** ###

离线存储指的是在用户没有与因特网连接时可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储下来。之后当网络在处于离线状态下时浏览器会通过被离线存储的数据进行页面展示。

使用方法：

①创建一个和html同名的manifest文件，然后在页面头部加入manifest属性：

②在cache.manifest文件中编写需要离线存储的资源

CACHE MANIFEST
        #v0.11
        CACHE:
        js/app.js
        css/style.css
        NETWORK:
        resourse/logo.png
        FALLBACK:
        / /offline.html

### **16.浏览器是如何对HTML5的离线储存资源进行管理和加载？** ###

在线的情况下，浏览器发现html头部有manifest属性，它会请求manigest文件，如果是第一次访问页面，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过页面并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变就不做任何操作，如果文件改变了就会重新下载文件中的资源并进行离线存储。

离线的情况下，浏览器会直接使用离线存储的资源。

### **17.iframe有哪些优点和缺点？** ###

iframe元素会创建包含另外一个文档的内联框架

优点：

*  用来加载速度较慢的内容（如广告）
 *  可以使脚本可以并行下载
 *  可以实现跨子域通信

缺点：

*  iframe会阻塞主页面的onload事件
 *  无法被一些搜索引擎所识别
 *  会产生很多页面不容易管理

### **18.Canvas和SVG的区别** ###

（1）SVG

SVG可缩放矢量图形是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加js事件处理器。在SVG中每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化那么浏览器能够自动重现图形。

特点：

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

（2）Canvas

Canvas是画布，通过js来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。

特点：

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

### **19.浏览器乱码的原因是什么？如何解决？** ###

产生乱码的原因：

*  网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开就会出现html乱码，反之也会出现乱码
 *  html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码
 *  浏览器不能自动检测网页编码，造成网页乱码

解决办法：

*  使用软件编辑HTML网页内容
 *  如果网页设置编码是gbk，而数据库储存数据编码格式是utf-8此时需要程序查询数据库显示数据前进行程序转码
 *  如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单进行转换

### **20.渐进增强和优雅降级之间的区别** ###

渐进增强主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验。

优雅降级：一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容

### **21.说一下HTML5 drag API** ###

dragstart:事件主体是被拖放元素，在开始拖放被拖放元素时触发

drag:事件主体是被拖放元素，在正在拖放被拖放元素时触发

dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发

dragover：事件主体是目标元素，在被拖放在某元素内移动时触发

dragleave：事件主体是目标元素，在被拖放元素移出目标元素时触发

drop:事件主体是目标元素，在目标元素完全接受被拖放元素时触发

dragend：事件主体是被拖放元素，在整个拖放操作结束时触发

### **22.a标签中如何禁用href跳转页面或定位链接** ###

e.preventDefault();
    href="javascript:void(0);

### **23.前端页面有哪三层构成，分别是什么？** ###

*  结构层（structural layer）
    
    结构层类似于盖房子需要打地基以及房子的悬梁框架，它是由HTML超文本标记语言来创建的，也就是页面中的各种标签，在结构层中保存了用户可以看到的所有内容，比如说：一段文字、一张图片、一段视频等等
 *  表示层（presentation layer）
    
    表示层是由CSS负责创建，它的作用是如何显示有关内容，学名：`层叠样式表`，也就相当于装修房子，看你要什么风格的，田园的、中式的、地中海的，总之CSS都能办妥
 *  行为层（behaviorlayer）
    
    行为层表示网页内容跟用户之间产生交互性，简单来说就是用户操作了网页，网页给用户一个反馈，这是`JavaScript`和`DOM`主宰的领域

### **24.H5和HTML5的区别** ###

*  H5是一个产品名词，包含了最新的HTML5、CSS3、ES6等新技术来制作的应用
 *  HTML5是一个技术名词，指的就是第五代HTML

### **25.HTML5为什么只需要写`<!DOCTYPE html>`** ###

HTML4却需要写很长的一段

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

主要是因为HTML5不基于SGML，所以不需要引用DTD。在HTML4中，`<!DOCTYPE>`声明引用DTD，因为HTML4基于SGML。DTD规定了标记语言的规则，这样浏览器才能正确的呈现内容

### **26.如何实现在一张图片上的某个区域做到点击事件** ###

我们可以通过图片热区技术：

1.  插入一张图片，并设置好图像的有关参数，在`<img>`标记中设置参数`usemap="#Map"`，以表示对图像地图的引用。
2.  用`<map>`标记设定图像地图的作用区域，并取名：Map；
3.  分别用`<area>`标记针对相应位置互分出多个矩形作用区域，并设定好链接参数`href`

### **27.a元素除了用于导航外还有什么作用？** ###

href属性中的url可以是浏览器支持的任何协议，所以a标签可以用来手机拨号`<a href="tel:110">110</a>`，也可以用来发送短信`<a href="sms:110">110</a>`，还有邮件等等

当然，a元素最常见的就是用来做*锚点*和 *下载文件*。

锚点可以在点击时快速定位到一个页面的某个位置，而下载的原理在于a标签所对应的资源浏览器无法解析，于是浏览器会选择将其下载下来。

### **28.你知道SEO中的TDK吗？** ###

在SEO中，TDK其实就是`title`、`description`、`keywords`这三个标签，title表示标题标签，description是描述标签，keywords是关键词标签

### **29.阻止事件冒泡 取消默认行为** ###

[(74条消息) JS 阻止事件冒泡、取消默认事件（默认行为）【前端小白篇】\_前端 怎么解除组织默认时间\_apjcui的博客-CSDN博客][74_ JS _ _apjcui_-CSDN]

*  阻止事件冒泡
    
     *  w3c：e.stopPropagation()
     *  ie9以下：e.cancelBubble = true
 *  取消默认行为
    
     *  w3c：e.preventDefault()
     *  ie：e.returnValue = false
 *  return false
    
     *  js：取消默认行为
     *  jQuery：阻止冒泡 + 取消默认行为
 *  vue方法（修饰符）
    
     *  阻止事件冒泡：@click.stop
     *  取消默认行为：@click.prevent

### **30.从输入网址到页面显示的过程（一次完整的http请求）** ###

*  域名解析，对输入的url进行dns域名解析，得到对应的ip地址
 *  根据这个ip地址，找到对应的服务器，发起tcp连接（三次握手）
 *  建立tcp连接后发送http请求
 *  服务器响应http请求，浏览器得到html代码
 *  浏览器解析html代码，并请求html代码中的js、css、图片等资源
 *  浏览器对页面进行渲染并呈现给用户
 *  断开TCP连接（四次挥手）

[www.baidu.com][]

url学名叫做统一资源定位符，俗称网址

www万维网我们可以把他看作是服务器

https传输协议加密传输协议比http更安全一些，在http和tcp之间加了一层TSL或者SSL的安全层

baidu.com是域名

假设我们第一次访问这个网址，首先浏览器会解析url然后去DNS域名系统中去匹配对应的真实ip,所以说url只是ip的一个映射

拿到真实的ip建立连接，ping www.baidu.com是用来测试连接的，建立连接我们发现ping的通我们就进行三次握手，TCP三次握手携带的数据都不是正式的数据

三次握手之后就会传输数据，拿到数据渲染页面

四次挥手断开连接

如果是第二次访问，浏览器会将域名解析的ip存在本地=>读取浏览器缓存，查看这个域名被解析过的ip地址有没有过期等等

![4e177084abe24a5b8535b2cde4494ddc.png][]

### **31.html页面渲染过程 浏览器拿到数据后是如何进行页面渲染的？** ###

首先会根据html和css生成对应的dom树以及css结构体，他们两个是并行构建的，就像我们现在的前后端开发我们是可以同时开发的。这里就涉及到display:none，我们可以将那些大块的dom如果说他不是第一次加载就要见到的我们就可以将他设置为display:none，设置以后render tree这个渲染树上面就不会有这个节点信息这样就会渲染的更快。所以这也是一个优化技巧。

由dom树和css结构体会绘制成一个render tree，然后再去计算布局信息，然后调用ui引擎渲染，然后就成了我们所看见的页面

**归纳：**

*  解析html文件，创建DOM树
 *  解析css，生成CSSOM（CSS Object Model），即CSS对象模型
 *  dom和css合并，构建渲染树（render tree）
 *  layout 布局（渲染）
    
     *  依照盒子模型，计算每个节点在屏幕中的尺寸和位置
 *  painting 绘制（渲染）
    
     *  按照计算出来的规则，通过显卡，将内容画到屏幕上
 *  重新渲染
    
     *  重排（即重新layout）：当课件节点位置或者尺寸发生变化事会发生重排
     *  重绘（即重新paint）：改变某个元素的背景色、文字颜色等不影响它周围或内部布局的属性时，屏幕的一部分需要重画，但是元素的尺寸没有改变
     *  特点：重绘不一定导致重排；重排一定会导致重绘，因为重绘是浏览器渲染页面的最后一步

![b3ab7d8848cd4057a46ff8b2bbb81e43.png][]

###  **32.介绍一下你对浏览器内核的理解 常见的浏览器内核有哪些？** ###

浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。 所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

*  Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。\[又称MSHTML\]
 *  Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等。
 *  Presto内核：Opera7及以上。 \[Opera内核原为：Presto，现为：Blink;\]
 *  Webkit内核：Safari,Chrome等。 \[ Chrome的：Blink（WebKit的分支）\]
 *  EdgeHTML内核：Microsoft Edge。 \[此内核其实是从MSHTML fork而来，删掉了几乎所有的IE私有特性\]

[f4c40ed920ba4aa5ada3ae69f0c10690.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/53c6358d9e7e4deea43e9b31ec861f7f.png
[74_ JS _ _apjcui_-CSDN]: https://blog.csdn.net/apjcui/article/details/103597195
[www.baidu.com]: http://www.baidu.com
[4e177084abe24a5b8535b2cde4494ddc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/dbbfbc9354d04b5e81a2643d84bf56cc.png
[b3ab7d8848cd4057a46ff8b2bbb81e43.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/854de9f263af4d47ba3282a84cae18d1.png