面试官常问的 web前端 问题 11-20

11.什么是响应式设计？
12.为什么我们要弃用 table 标签
13.iframe 有哪些缺点
14.meta viewport 是做什么用的，怎么写？
15.json 和 xml 数据的区别
16.document.write 和 innerHTML 的区别
17.jQuery 库中的 $ 是什么？
18.$(document).ready()方法和 window.onload 的区别？
19.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
20.你为什么要使用 jQuery？

11.什么是响应式设计？

响应式设计：是关于网站的制作或网页制作的工作，不同的设备有不同的尺寸和不同的功能。
响应式设计让所有的人能在这些设备上让网站运行正常。
一部分是媒体查询和不同的视觉效果。一部分是不同的资源（如不同的 Javascript 来处理触摸与点击自动适应屏幕的对比） 。

12.为什么我们要弃用 table 标签

table的缺点 ：只有等 table标签 里的内容全部加载完才能显示网页。

table：服务器把代码加载到本地服务器的过程中，本来是加载一行执行一行，但是 table 标签是里面的东西全都下载完之后才会显示出来，那么如果图片很多的话就会导致网页一直加载不出来，除非所有的图片和内容都加载完。如果要等到所有的图片全部加载完之后才显示出来会影响网页的性能，所以 table 标签现在我们基本放弃使用了。

13.iframe 有哪些缺点

iframe的缺点：阻塞主页面 onload 事件；影响页面并行加载（浏览器限制相同域的链接）；

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

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

iframe常用属性:

1.frameborder:        是否显示边框，1(yes),0(no)
2.height:                框架作为一个普通元素的高度，建议在使用css设置。
3.width:                框架作为一个普通元素的宽度，建议使用css设置。
4.name:                        框架的名称，window.frames[name]时专用的属性。
5.scrolling:        框架的是否滚动。yes,no,auto。
6.src：                        内框架的地址，可以使页面地址，也可以是图片的地址。
7.srcdoc:                 用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用
8.sandbox:                 对iframe进行一些列限制，IE10+支持

14.meta viewport 是做什么用的，怎么写？

控制页面在移动端不要缩小显示。
<metaname="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
1
这个标签内的内容表示啥意思呢?

name                        为viewport表示供移动设备使用. content定义了viewport的属性.
width                        表示移动设设备下显示的宽度为设备宽度(device-width)
height                        表示移动设设备下显示的宽度为设备宽度.
user-scalable        表示用户缩放能力, no表示不允许.
initial-scale        表示设备与视口的缩放比率
maximum和minimum        分别表示缩放的最大最小值, 要注意的是, maximum必须必minimum大.

这个meta标签就是告诉浏览器, 不要在移动端显示的时候缩放.

15.json 和 xml 数据的区别

json：轻量级，传递速度快；占带宽小，易压缩；更方便与JavaScript交互，易解析，能更好的数据交互，项目交互中多用于数据交互；对数据的描述性比xml较差；
xml：重量级；占带宽大；项目交互中多用于配置文件；

1，数据体积方面：xml 是重量级的，json 是轻量级的，传递的速度更快些。
2，数据传输方面：xml 在传输过程中比较占带宽，json 占带宽少，易于压缩。
3，数据交互方面：json 与 javascript 的交互更加方便，更容易解析处理，更好的进行数据交互
4，数据描述方面：json 对数据的描述性比 xml 较差
5，xml 和 json 都用在项目交互下，xml 多用于做配置文件，json 用于数据交互。

16.document.write 和 innerHTML 的区别

document.write ：直接写入页面的内容流，导致页面被重写。
innerHTML ：写入某个 DOM 节点，不会导致页面全部重绘；

document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。

innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。

innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。

17.jQuery 库中的 $ 是什么？

$就是jQuery的别称，是jQuery库提供的一个函数。
可以获取元素

$('#submit').attr('disabled', true);

可以写为：

jquery('#submit').attr('disabled', true);

1、可以通过 $() 里的参数进行查找和选择html文档中的元素

如：

        $('#tmp');//这是查找dom的id等于tmp的元素

2、访问 $ 中定义的函数
如：

        $.ajax(options)

18.$(document).ready()方法和 window.onload 的区别？

$(document).ready() 方法：可在 DOM 载入就绪时就执行，并调用执行绑定的函数；可多次使用不同事件处理程序；
window.onload 方法：网页中所有的元素(包括元素的所有关联文件)完全加载后才执行；一次只能保存对一个函数的应用；

window.onload 和 $(document).ready()主要有两点区别：

1、执行时机

window.onload：在网页中所有元素（包括元素的所有关联文件）都完全加载到浏览器之后才执行。
$(document).ready()：只要在DOM完全就绪时，就可以调用了，比如一张图片只要<img>标签完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等。

从二者的英文字母可以大概理解上面的话，onload即加载完成，ready即DOM准备就绪。

2、注册事件

$(document).ready()：可以多次使用不同的事件处理程序，

window.onload：一次只能保存对一个函数的引用，多次绑定函数只会覆盖前面的函数。

两个window.onload在同一个页面上可能效果会展示不了。

19.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的 HTML元素，例如：br、meta、hr、link、input、img

20.你为什么要使用 jQuery？

jQuery的优点：轻量级框架；选择器强大；DOM操作封装丰富；事件处理机制可靠；Ajax完善；浏览器兼容；支持链式操作、隐式迭代；行为层与结构层分离；支持的插件丰富；jQuery文档丰富。

jquery的优点：

轻量级
　　　　JQuery非常轻巧，采用Dean Edwards编写的Packer压缩后，大小不到30KB,如果使用Min版并且在服务器端启用Gzip压缩后，大小只有18KB。

强大的选择器
　　　　JQuery允许开发者使用从CSS1到CSS3几乎所有的选择器，以及JQuery独创的高级而且复杂的选择器，另外还可以加入插件使其支持XPath选择器，甚至开发者可以编写属于自己的选择器。由于JQuery支持选择器这一特性，因此有一定CSS经验的开发人员可以很容易的切入到JQuery的学习中来。

出色的DOM操作的封装
　　　　JQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关程序的时候能够得心应手。JQuery轻松地完成各种原本非常复杂的操作，让JavaScript新手也能写出出色的程序。

可靠的事件处理机制
　　　　JQuery的事件处理机制吸收了JavaScript专家Dean Edwards编写的事件处理函数的精华，是的JQuery在处理事件绑定的时候相当可靠。在预留退路、循序渐进以及非入侵式编程思想方面，JQuery也做得非常不错。

完善的Ajax
　　　　JQuery将所有的Ajax操作封装到一个函数$.ajax()里，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。

不污染顶级变量
　　　　JQuery只建立一个名为JQuery的对象，其所有的函数方法都在这个对象之下。其别名$也可以随时交流控制权，绝对不会污染其他的对象。该特性是JQuery可以与其他JavaScript库共存，在项目中放心地引用而不需要考虑到后期的冲突。

出色的浏览器兼容性
　　　　作为一个流行的JavaScript库，浏览器的兼容性是必须具备的条件之一。JQuery能够在IE6.0+,FF 2+,Safari2.+和Opera9.0+下正常运行。JQuery同时修复了一些浏览器之间的的差异，使开发者不必在开展项目前建立浏览器兼容库。

链式操作方式
　　　　JQuery中最有特色的莫过于它的链式操作方式——即对发生在同一个JQuery对象上的一组动作，可以直接接连写无需要重复获取对象。这一特点使得JQuery的代码无比优雅。

隐式迭代
　　　　当用JQuery找到带有“.myClass”类的全部元素，然后隐藏他们时。无需循环遍历每一个返回的元素。相反，JQuery里的方法都被设计成自动操作的对象集合，而不是单独的对象，这使得大量的循环结构变得不再必要，从而大幅度地减少代码量。

行为层与结构层的分离
　　　　开发者可以使用选择器选中元素，然后直接给元素添加事件。这种将行为层与结构层完全分离的思想，可以使JQuery开发人员和HTML或其他页面开发人员各司其职，摆脱过去开发冲突或个人单干的开发模式。同时，后期维护也非常方便，不需要在HTML代码中寻找某些函数和重复修改HTML代码。

丰富的插件支持
　　　　JQuery的易扩展性，吸引了来自全球开发者来编写JQuery的扩展插件。目前已经有超过几百种官方插件支持，而且还不断有新插件面试。

完善的文档
　　　　JQuery的文档非常丰富，现阶段多位英文文档，中文文档相对较少。很多热爱JQuery的团队都在努力完善JQuery中文文档，例如JQuery的中文API。

开源
　　　　JQuery是一个开源的产品，任何人都可以自由地使用并提出修改意见。
————————————————

原文链接：「止南」https://blog.csdn.net/qq_44641053/article/details/103810273

面试官常问的 web前端 问题 11-20

11.什么是响应式设计？
12.为什么我们要弃用 table 标签
13.iframe 有哪些缺点
14.meta viewport 是做什么用的，怎么写？
15.json 和 xml 数据的区别
16.document.write 和 innerHTML 的区别
17.jQuery 库中的 $ 是什么？
18.$(document).ready()方法和 window.onload 的区别？
19.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
20.你为什么要使用 jQuery？

11.什么是响应式设计？

响应式设计：是关于网站的制作或网页制作的工作，不同的设备有不同的尺寸和不同的功能。
响应式设计让所有的人能在这些设备上让网站运行正常。
一部分是媒体查询和不同的视觉效果。一部分是不同的资源（如不同的 Javascript 来处理触摸与点击自动适应屏幕的对比） 。

12.为什么我们要弃用 table 标签

table的缺点 ：只有等 table标签 里的内容全部加载完才能显示网页。

table：服务器把代码加载到本地服务器的过程中，本来是加载一行执行一行，但是 table 标签是里面的东西全都下载完之后才会显示出来，那么如果图片很多的话就会导致网页一直加载不出来，除非所有的图片和内容都加载完。如果要等到所有的图片全部加载完之后才显示出来会影响网页的性能，所以 table 标签现在我们基本放弃使用了。

13.iframe 有哪些缺点

iframe的缺点：阻塞主页面 onload 事件；影响页面并行加载（浏览器限制相同域的链接）；

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

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

iframe常用属性:

1.frameborder:        是否显示边框，1(yes),0(no)
2.height:                框架作为一个普通元素的高度，建议在使用css设置。
3.width:                框架作为一个普通元素的宽度，建议使用css设置。
4.name:                        框架的名称，window.frames[name]时专用的属性。
5.scrolling:        框架的是否滚动。yes,no,auto。
6.src：                        内框架的地址，可以使页面地址，也可以是图片的地址。
7.srcdoc:                 用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用
8.sandbox:                 对iframe进行一些列限制，IE10+支持

14.meta viewport 是做什么用的，怎么写？

控制页面在移动端不要缩小显示。
<metaname="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
1
这个标签内的内容表示啥意思呢?

name                        为viewport表示供移动设备使用. content定义了viewport的属性.
width                        表示移动设设备下显示的宽度为设备宽度(device-width)
height                        表示移动设设备下显示的宽度为设备宽度.
user-scalable        表示用户缩放能力, no表示不允许.
initial-scale        表示设备与视口的缩放比率
maximum和minimum        分别表示缩放的最大最小值, 要注意的是, maximum必须必minimum大.

这个meta标签就是告诉浏览器, 不要在移动端显示的时候缩放.

15.json 和 xml 数据的区别

json：轻量级，传递速度快；占带宽小，易压缩；更方便与JavaScript交互，易解析，能更好的数据交互，项目交互中多用于数据交互；对数据的描述性比xml较差；
xml：重量级；占带宽大；项目交互中多用于配置文件；

1，数据体积方面：xml 是重量级的，json 是轻量级的，传递的速度更快些。
2，数据传输方面：xml 在传输过程中比较占带宽，json 占带宽少，易于压缩。
3，数据交互方面：json 与 javascript 的交互更加方便，更容易解析处理，更好的进行数据交互
4，数据描述方面：json 对数据的描述性比 xml 较差
5，xml 和 json 都用在项目交互下，xml 多用于做配置文件，json 用于数据交互。

16.document.write 和 innerHTML 的区别

document.write ：直接写入页面的内容流，导致页面被重写。
innerHTML ：写入某个 DOM 节点，不会导致页面全部重绘；

document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。

innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。

innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。

17.jQuery 库中的 $ 是什么？

$就是jQuery的别称，是jQuery库提供的一个函数。
可以获取元素

$('#submit').attr('disabled', true);

可以写为：

jquery('#submit').attr('disabled', true);

1、可以通过 $() 里的参数进行查找和选择html文档中的元素

如：

        $('#tmp');//这是查找dom的id等于tmp的元素

2、访问 $ 中定义的函数
如：

        $.ajax(options)

18.$(document).ready()方法和 window.onload 的区别？

$(document).ready() 方法：可在 DOM 载入就绪时就执行，并调用执行绑定的函数；可多次使用不同事件处理程序；
window.onload 方法：网页中所有的元素(包括元素的所有关联文件)完全加载后才执行；一次只能保存对一个函数的应用；

window.onload 和 $(document).ready()主要有两点区别：

1、执行时机

window.onload：在网页中所有元素（包括元素的所有关联文件）都完全加载到浏览器之后才执行。
$(document).ready()：只要在DOM完全就绪时，就可以调用了，比如一张图片只要<img>标签完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等。

从二者的英文字母可以大概理解上面的话，onload即加载完成，ready即DOM准备就绪。

2、注册事件

$(document).ready()：可以多次使用不同的事件处理程序，

window.onload：一次只能保存对一个函数的引用，多次绑定函数只会覆盖前面的函数。

两个window.onload在同一个页面上可能效果会展示不了。

19.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的 HTML元素，例如：br、meta、hr、link、input、img

20.你为什么要使用 jQuery？

jQuery的优点：轻量级框架；选择器强大；DOM操作封装丰富；事件处理机制可靠；Ajax完善；浏览器兼容；支持链式操作、隐式迭代；行为层与结构层分离；支持的插件丰富；jQuery文档丰富。

jquery的优点：

轻量级
　　　　JQuery非常轻巧，采用Dean Edwards编写的Packer压缩后，大小不到30KB,如果使用Min版并且在服务器端启用Gzip压缩后，大小只有18KB。

强大的选择器
　　　　JQuery允许开发者使用从CSS1到CSS3几乎所有的选择器，以及JQuery独创的高级而且复杂的选择器，另外还可以加入插件使其支持XPath选择器，甚至开发者可以编写属于自己的选择器。由于JQuery支持选择器这一特性，因此有一定CSS经验的开发人员可以很容易的切入到JQuery的学习中来。

出色的DOM操作的封装
　　　　JQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关程序的时候能够得心应手。JQuery轻松地完成各种原本非常复杂的操作，让JavaScript新手也能写出出色的程序。

可靠的事件处理机制
　　　　JQuery的事件处理机制吸收了JavaScript专家Dean Edwards编写的事件处理函数的精华，是的JQuery在处理事件绑定的时候相当可靠。在预留退路、循序渐进以及非入侵式编程思想方面，JQuery也做得非常不错。

完善的Ajax
　　　　JQuery将所有的Ajax操作封装到一个函数$.ajax()里，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。

不污染顶级变量
　　　　JQuery只建立一个名为JQuery的对象，其所有的函数方法都在这个对象之下。其别名$也可以随时交流控制权，绝对不会污染其他的对象。该特性是JQuery可以与其他JavaScript库共存，在项目中放心地引用而不需要考虑到后期的冲突。

出色的浏览器兼容性
　　　　作为一个流行的JavaScript库，浏览器的兼容性是必须具备的条件之一。JQuery能够在IE6.0+,FF 2+,Safari2.+和Opera9.0+下正常运行。JQuery同时修复了一些浏览器之间的的差异，使开发者不必在开展项目前建立浏览器兼容库。

链式操作方式
　　　　JQuery中最有特色的莫过于它的链式操作方式——即对发生在同一个JQuery对象上的一组动作，可以直接接连写无需要重复获取对象。这一特点使得JQuery的代码无比优雅。

隐式迭代
　　　　当用JQuery找到带有“.myClass”类的全部元素，然后隐藏他们时。无需循环遍历每一个返回的元素。相反，JQuery里的方法都被设计成自动操作的对象集合，而不是单独的对象，这使得大量的循环结构变得不再必要，从而大幅度地减少代码量。

行为层与结构层的分离
　　　　开发者可以使用选择器选中元素，然后直接给元素添加事件。这种将行为层与结构层完全分离的思想，可以使JQuery开发人员和HTML或其他页面开发人员各司其职，摆脱过去开发冲突或个人单干的开发模式。同时，后期维护也非常方便，不需要在HTML代码中寻找某些函数和重复修改HTML代码。

丰富的插件支持
　　　　JQuery的易扩展性，吸引了来自全球开发者来编写JQuery的扩展插件。目前已经有超过几百种官方插件支持，而且还不断有新插件面试。

完善的文档
　　　　JQuery的文档非常丰富，现阶段多位英文文档，中文文档相对较少。很多热爱JQuery的团队都在努力完善JQuery中文文档，例如JQuery的中文API。

开源
　　　　JQuery是一个开源的产品，任何人都可以自由地使用并提出修改意见。
————————————————

原文链接：「止南」https://blog.csdn.net/qq_44641053/article/details/103810273