前端基础百炼成仙

# 面试题二 ⭐️

# 1.如何禁用a标签跳转页面或定位链接？

点击查看答案
  • 标签属性href，使其指向空或不返回任何内容。如： <a href="javascript:void(0);">点击无反应</a>
  • 从标签事件入手 onclick="return false"
  • js文件中阻止默认点击事件 Event.preventDefault()
  • css文件中处理点击 pointer-events:none

# 2.canvas在标签上设置宽高，与在style中设置宽高有什么区别？

点击查看答案
  • canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面
  • 而style的width和height是canvas在浏览器中被渲染的高度和宽度
  • 如果canvas的width和height没指定或不正确，就被设置成默认值

# 3.iframe可以在一个网站里面嵌入另一个网站的内容

点击查看答案

# 优点

  • 1.iframe能够原封不动的把嵌入的网页展现出来。
  • 2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
  • 3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
  • 4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

# 缺点

  • 1.会产生很多页面，不容易管理。
  • 2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。 * 代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
  • 3.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
  • 4.iframe 里面的样式、脚本资源，会增加请求次数，对于大型网站是不可取的。
  • 5.iframe 会阻碍页面的 onload 事件，给用户页面加载很慢的感觉。

# 4.HTML标签中的src和href有什么区别？

点击查看答案
  • href 是超文本引用，它是指向资源的位置，建立与目标文件的联系；
  • src 目的是把资源下载到页面中； 浏览器解析 href 不会阻塞对文档的处理（这就是官方建议使用 link 引入而不是 @ import 的原因），src 会阻塞对文档的处理。

# 5.script标签为什么建议放在body标签的底部(defer，async)

点击查看答案

因为浏览器在渲染html的时候是从上到下执行的，当遇到js文件的时候就会停止当前页面的渲染，转而去下载js文件。

如果将script标签放在头部，在文件很大的情况下将导致首屏加载时间延长，影响用户体验。

# 6.DOCTYPE标签有什么用？

点击查看答案

DOCTYPE声明于文档最前面，告诉浏览器以何种方式来渲染页面。 HTML5中的声明方式如下： <!DOCTYPE html>

# 7.HTML5有哪些新特性？

点击查看答案
  • 新增语义化标签：nav、header、footer、aside、section、article
  • 音频、视频标签：audio、video
  • 数据存储：localStorage、sessionStorage
  • canvas（画布）、Geolocation（地理定位）、websocket（通信协议）
  • input标签新增属性：placeholder、autocomplete、autofocus、required
  • history API
    • go、forward、back、pushstate

# 8.简述html页面渲染过程？

点击查看答案

# 基本概念

  • HTML解释器：解释HTML语言的解释器，本质是将HTML文本解释成DOM树（文档对象模型）。
  • CSS解释器：解释样式表的解释器，其作用是将DOM中的各个元素对象加上样式信息，从而为计算最后结果的布局提供依据。
  • 布局：将DOM和css样式信息结合起来，计算它们的大小位置等布局信息，形成一个能够表示这所有信息的内部表示模型即渲染树。
  • JavaScript引擎：JavaScript可以修改网页的内容，也能修改CSS的信息，JavaScript引擎解释JavaScript代码并把代码的逻辑和对DOM和CSS的改动信息应用到布局中去，从而改变渲染的结果。

骨架-色彩-灵动

  • 1.解析HTML文件，创建DOM树
  • 2.解析CSS,形成CSS对象模型
  • 3.将CSS与DOM合并，构建渲染树（renderingtree）
  • 4.布局和绘制
  • Repaint(重绘)
  • Reflow（重排）

将多次改变样式属性的操作合并成一次操作 将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。 由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发2次重排。

# 9.简单描述从输入网址到页面显示的过程

点击查看答案

# DNS解析

DNS存在着多级缓存，从离浏览器的距离排序的话，有以下几种: 浏览器缓存，系统缓存，路由器缓存，IPS服务器缓存，根域名服务器缓存，顶级域名服务器缓存，主域名服务器缓存。(负载均衡)

输入www.google.com网址后，首先在本地的域名服务器中查找，没找到去根域名服务器查找，没有再去com顶级域名服务器查找，，如此的类推下去，直到找到IP地址，然后把它记录在本地，供下次使用。大致过程就是.-> .com ->google.com. -> www.google.com.。 (最后这个.对应的就是根域名服务器，默认情况下所有的网址的最后一位都是.，为了方便用户，通常都会省略，浏览器在请求DNS的时候会自动加上)

# 发起TCP连接

三次握手，四次挥手

# 发送HTTP请求

请求报文由请求行，请求报头，请求正文组成。

# 服务器处理请求并返回HTTP报文

对TCP连接进行处理，对HTTP协议进行解析，并按照报文格式进一步封装成HTTP Request对象，供上层使用。这一部分工作一般是由Web服务器去进行，比如Tomcat, Nginx和Apache等Web服务器。

HTTP报文也分成三段：状态码，响应报头和响应报文。

# 浏览器解析渲染页面

解析HTML形成DOM树 解析CSS形成CSSOM 树 合并DOM树和CSSOM树形成渲染树 浏览器开始渲染并绘制页面

# 连接结束

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

点击查看答案

link属于HTML标签，而@import是css提供的；

页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载；

@import只在IE5以上才能识别，而link是XHTML标签，无兼容问题；

link方式的样式的权重高于@import的权重。

lastUpdate: 5/13/2022, 6:22:38 PM

← HTML面试题3 →