位置: 编程技术 - 正文

前端面试题及答案整理(二)(前端面试题及答案2023vue3)

编辑:rootadmin

推荐整理分享前端面试题及答案整理(二)(前端面试题及答案2023vue3),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端面试题及答案2023vue3,前端面试题及答案,前端面试题及答案2023pdf,前端面试题及答案2023pdf,前端面试题及答案2022,前端面试题及答案2023,前端面试题及答案2023,前端面试题及答案2022,内容如对您有帮助,希望把文章链接给更多的朋友!

Part1 CSS相关

1 内联元素(inline-element)和块元素(block element)分别有哪些

常见内联元素(行内元素)有a、b、span、i 、em、input、select 、img等常见的块元素有div、ul、li、h1~h6、talbe、ol、 ul、td、p等

2 浮动相关

浮动布局指将元素脱离普通流/文档流,使其可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响到块级元素的布局而只会影响内联元素的排列。正因为浮动元素脱离了文档流,其父级元素并不知道它的存在,因此会表现为高度为0,无论浮动元素如何变化,其父级元素也不会随它变化将其包裹,这种现象也叫作“高度塌陷”。下面的例子中,不管#floatDom高度如何变化,#parent高度始终为0,这将导致父元素边框不能被撑开,背景不能显示等问题

因为高度塌陷的存在(这往往不是我们所期望的),必须要清除浮动,下面介绍清除浮动的几种方式:&#;在浮动元素后添加样式含有“clear:both”的元素

也可以添加br标签,其自带clear:both属性

利用这种方式清除浮动的优点在于通俗易懂,容易掌握,缺点也很明显,增加了很多无意义的标签,这个在后期维护中是很痛苦的。&#;为父元素添加样式“overflow:hidden"

利用这种方式不存在结构和语义化问题而且代码量极少,然而在内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。&#;利用:after伪元素

利用这种方式,仅需在目标元素上添加一个类,也是目前使用最多的一种方式。

Referenceiyunlu.com/view/css-xht

3 相对布局(relative)和绝对布局的区别(absolute)

相对布局和绝对布局最本质的区别在于是否脱离文档流。相对布局未脱离文档流,即设置元素相对布局后,文档流仍然保持其原始的位置,通过设置top、left等属性可设置其相对于原始位置的偏移量。绝对布局是脱离文档流的,即文档流中的要素并不知道该绝对布局要素的存在,绝对布局的定位是相对于父元素中具有相对布局或绝对布局的要素,若都不存在则相对于body布局。

4 盒模型(Box Model)

盒模型定义了一个元素的显示形式,包括content(内容)、padding(内边距)、border(边界)以及margin(外边距)几部分组成,目前有两种盒模型标准,一种是W3C标准盒子模型,还有一种是IE盒子模型,采用的是Microsoft自己的标准。

这两种盒模型的区别主要在于元素宽度的计算。标准模式下css中定义的width即为content(内容)的宽度,整个元素在页面中占有的宽度,计算公式为:

而在IE盒子模型中,css中定义的width为content + padding + border,因此在IE盒子模型中,整个元素在页面中占有的宽度为(高度同理)

在CSS3中利用box-sizing保留了两种盒子模型,当我们设置box-sizing: content-box(默认),采用的是W3C标准盒模型,当设置box-sizing:border-box时,采用的是IE盒模型。

5 CSS reset(重置)

每个浏览器都有一些自带的样式,而且各个浏览器这些自带的样式往往又存在不同,这给我们布局上带来了一些不便。因此在实践中往往需要对浏览器的css样式进行“清零”,即CSS reset。最简单的一种reset代码如下:

这种方式虽然简单但太过“暴力”,因为很多要素像div、li等本身默认就没有margin、padding样式,这无异于造成大量冗余,更推荐的方式根据自己需要编写reset代码。

Reference:www.zhangxinxu.com/wordpress///html5-css-reset

6 CSS hack

由于不同的浏览器对CSS的解析和支持是不同的,这会导致相同的CSS代码在不同浏览器中的显示方式并不是完全一致的,这就需要通过CSS Hack来解决不同浏览器的兼容性问题。针对不同浏览器写不同的样式的这个过程就称为CSS hack。

CSS Hack常见的形式有如下几种:&#;属性Hack

比如IE6能识别_width以及*width,而在IE7中能识别*width,但是不能识别_width,在FireFox中两个都不识别。&#;选择符Hack

比如IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}。&#;条件Hack

IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句。比如针对所有IE:

针对IE6及以下版本:

这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。

Reference

优雅降级(graceful degradation)与渐进增强(progressive enhancement)

渐进增强指针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

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

两者的区别在于优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。

8 说出遇到的浏览器兼容问题&#;不同浏览器中显示的内边距、外边距不同,如ul标签在FireFox中默认是有padding值的,而在IE中只有margin有值

利用CSS Reset(参见第5条)&#;IE6的双倍边距BUG,在块级元素浮动后本来外边距px,但IE解释为px

将其该块级元素display设置为inline&#;IE6中不支持min-height

min-height的作用是作用是当容器的内容较少时,能保持一个最小的高度,以免破坏了布局或UI设计效果。而当容器内的内容增加的时候,容器能够自动的伸展以适应内容的变化。

通过这种下面的方式可以解决:

&#;在标准的事件绑定中绑定事件的方法函数为addEventListener,而IE使用的是attachEvent

前端面试题及答案整理(二)(前端面试题及答案2023vue3)

通过条件判断分别写两条绑定语句或者使用jquery这类web框架库绑定。&#;标准浏览器采用事件捕获的方式,而IE采用的是事件冒泡机制

后来标准认为冒泡更合理,利用设置addEventListener第三个参数兼容两种机制,事件冒泡为默认值。&#;事件处理中的event属性IE中获取方式和标准浏览器不同

标准浏览器是作为参数带入,而ie是window.event方式获得,获得目标元素ie为e.srcElement 标准浏览器为e.target

Part2 其它

1 了解常用http状态码

OK 一切正常,对GET和POST请求的应答文档跟在后面。

Created服务器已经创建了文档,Location头给出了它的URL。

Accepted 已经接受请求,但处理尚未完成。

Not Modified 客户端有缓冲的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告 诉客户,原来缓冲的文档还可以继续使用。

Bad Request 请求出现语法错误。

Not Found 无法找到指定位置的资源。这也是一个常用的应答。

Method Not Allowed 请求方法(GET、POST、HEAD、DELETE、PUT、TRACE等)对指定的资源不适用。(HTTP 1.1新)

Internal Server Error 服务器遇到了意料不到的情况,不能完成客户的请求。

Bad Gateway 服务器作为网关或者代理时,为了完成请求访问下一个服务器,但该服务器返回了非法的应答。

2 手写ajax请求

这是XMLHttpRequest传统的用法,XMLHttpRequest Level 2提出了很多新的方法,我们常提到的CORS也是源自该方法。

要了解详细XHR2推荐 XMLHttpRequest Level 2 使用指南

3 跨域问题

当我们在页面中通过ajax请求其它服务器的数据时,由于浏览器对于JavaScript的同源策略,客户端就会发生跨域问题。所谓同源策略,指的是一段脚本只能请求来自相同来源(相同域名、端口号、协议)的资源。

如果上面XMLHttpRequest请求的服务地址与当前文件不同源的话,浏览器中会出现如下错误:

那么该如何解决这类跨域问题?

(1)利用CORS跨域

"跨域资源共享"(Cross-origin resource sharing,简称CORS)。CORS是是在XHR2中拓展的能力,使用方法很简单,在服务端设置:Header set Access-Control-Allow-Origin *

这种设置将接受所有域名的跨域请求,也可以指定具体网址,也可以对域名进行限定:Header set Access-Control-Allow-Origin

然而,这种方式的局限性在于要求客户端支持,并且服务端进行相关设置。在这两者满足的情况下,通过CORS进行跨域不仅支持所有类型的HTTP请求,而且开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。

(2)利用JSONP实现跨越

对于较老的浏览器,它们往往不支持CORS,因此使用JSONP进行跨域也是很常见的一种方式。我们知道在网页中通过<script>元素的src指定加载目标脚本时是不受同源策略的影响的,因此可以使用它们从其他服务器请求数据,这种利用<script>元素作为Ajax传输的技术就称为JSONP。

JSONP实现的原理如下:

JSONP也存在一些弊端,首先JSONP支持GET不支持POST方法,另外使用<script>元素进行Ajax请求,这意味着允许Web页面可以执行远程服务器发送过来的任何JavaScript代码,因此对于不信任的服务器,不应该采用该技术。

(3)利用window.name进行跨域

window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置,因此可以借助window.name在不同源的页面中传递数据。

如www.a.com/a.html想要获得www.b.com/b.html中的数据,原理如下:

a) 在b.html中将数据存储在window.name中

b) 在a.html中构建一个隐藏(display:none)的iframe标签,假设id设为proxy,src设置为和a.html同源即可。

c) 通过如下代码在a.html中获取到data

d) 移除相关元素

(4) 使用window.postMessage进行跨域

这种方式比较简单,在a页面中利用windowObj.postMessage(message, targetOrigin)向目标页面发送信息,而在b页面中通过监听message事件获取信息。这种方式是在HTML5中新增的方法,对于IE6、IE7等老版本浏览器无法使用。

4 如何提高网站性能

请参看博主的另外两篇文章:

关于提高网站性能的几点建议

关于提高网站性能的几点建议2

发现新内容会持续更新...

博文作者:vicfeel

XMLHttpRequest Level 2 使用指南 XMLHttpRequest是一个浏览器接口,使得Javascript可以进行HTTP(S)通信。最早,微软在IE5引进了这个接口。因为它太有用,其他浏览器也模仿部署了,ajax操作因

每个程序员都需要学习 JavaScript 的7个理由小结 最近在和招聘经理交流现在找一个好的程序员有多难的时候,我渐渐意识到了现在编程语言越来越倾重于JavaScript。Web开发人员尤其如此。所以,如果你

JavaScript 函数模式详解及示例 JavaScript设计模式的作用是提高代码的重用性,可读性,使代码更容易的维护和扩展在javascript中,函数是一类对象,这表示他可以作为参数传递给其他函

标签: 前端面试题及答案2023vue3

本文链接地址:https://www.jiuchutong.com/biancheng/373579.html 转载请保留说明!

上一篇:js前端面试题及答案整理(一)(前端面试题csdn)

下一篇:XMLHttpRequest Level 2 使用指南

  • 随机赠送礼品个人所得税
  • 水电怎么开票
  • 凭证附件的粘法
  • 个人所得税B表和C表
  • 小规模未达起征点销售额是多少
  • 按季度支付贷款利息权责发生制
  • 坐收坐支在会计上如何反映
  • 非货币性资产交换补价大于25%的会计处理
  • 个税父母赡养抵扣3000
  • 预缴税款缴多了怎么办
  • 公司用现金支付的形式有哪些
  • 政府补助结转是什么科目
  • 平行登记要求总账
  • 购销合同印花税优惠政策
  • 个体工商户季度不超过30万免增值税吗
  • 税收缴款书怎么做凭证
  • 以现金形式发放的员工餐费补贴,可并入职工福利费
  • 从租计征的房产税减半政策
  • 发票密码区出来了一些
  • 万元的票可以开到多大金额
  • 工会经费2020年免征
  • 自助设备使用费会计科目
  • 会议费税前扣除最新税务规定
  • 技术转让减免所得额
  • 一般劳务报酬和其他劳务报酬的区别
  • 连接另外一个设备
  • 合同印花税的5个税目
  • 简介linux系统中的10个常用命令及功能
  • php源码怎么上传到服务器
  • php如何实现
  • 暂估入库怎么暂估
  • mac桌面的东西怎么放回去
  • 期权能套现吗
  • 铁路运输企业所得税优惠
  • 什么叫错账调整
  • php如何防止后门
  • quota命令 显示磁盘已使用的空间与限制
  • 企业财务准则最新
  • PYTHON中使用什么符号表示单行注释
  • 出口汽车配件怎么报关
  • 小微企业报税是多久报一次
  • 免税收入与不征收的区别
  • 分红需要满足的条件包括
  • 企业所得税汇算表
  • 企业赠送个人房产 所得税
  • 销售商品发生的销售退回计入什么科目
  • 跨年已付款发票未到会计分录
  • 制造费用包括哪些部门
  • 其他应收款内部往来
  • 收到的出口退税款需要并入利润总额吗
  • 抵货款怎么做账
  • 小规模取得增值税专用发票怎么做账
  • 提取法定盈余公积金会计分录
  • 企业转让固定资产企业所得税
  • 备用金没有发票,只有支付凭证
  • 分公司注销余额转总公司会计分录
  • 税控盘网上抄报税的步骤
  • 公司变更地址后需要做哪些事情
  • 施工企业应收账款周转率多少合适
  • sqlserver Union和SQL Union All使用方法
  • sql server中replace()函数用法解析
  • xp硬盘安装win7系统教程
  • [下载转存] 经验本题库源文件下载转存 秒结
  • windows8.1怎么升级
  • centos如何操作
  • perl中\s+
  • python虚拟环境管理
  • jquery实现(textarea)placeholder自动换行
  • scrapy爬虫教程
  • jquery获取document对象
  • 用python怎么写字
  • shell生成excel文件
  • js模拟用户点击
  • jquery遍历object
  • python multinomial
  • 长春国税局科员工资是多少
  • 北京大兴区地税局电话
  • 国税地税征管体制改革方案全文
  • 17%增值税什么时候开始
  • 营改增之前和之后
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设