白癜风公益援助 https://4001582233.114.qq.com/ndetail_3913.html最新年的web前端开发面试题:
问题1:px、em、rem、vw单位分别有什么区别?
解析:(1)px:px就是pixel的缩写,意为像素。px就是一张图片最小的一个点,一张位图就是千千万万的这样的点构成的,比如常常听到的电脑像素是x的,表示的是水平方向是个像素点,垂直方向是个像素点。
(2)em:参考物是父元素的font-size,具有继承的特点。如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。
(3)rem:css3新单位,相对于根元素html(网页)的font-size,不会像em那样,依赖于父元素的字体大小,而造成混乱。
(4)vw:css3新单位,viewpointwidth的缩写,视窗宽度,1vw等于视窗宽度的1%。
举个例子:浏览器宽度px,1vw=px/=12px。
问题2:title与h1的区别、b与strong的区别、i与em的区别?
解析:(1)title用于网站信息标题,突出网站标题或关键字,一个网站可以有多个title,seo权重高于H1;H1概括的是文章主题,一个页面最好只用一个H1,seo权重低于title。
A.从网站角度而言,title则重于网站信息标题,突出网站标题或关键字用title,一篇文章,一个页面最好只用一个H1,H1用得太多,会稀释主题;一个网站可以有多个title,最好一个单页用一个title以便突出网站页面主题信息。
B.从文章角度而言,H1则概括的是文章主题,突出文章主题,用H1,面对的用户,要突出其视觉效果。
C.从SEO角度而言,title的权重高于H1,其适用性要比H1广。
(2)b为了加粗而加粗,strong为了标明重点而加粗
A.b这个标签对应bold,即文本加粗,其目的仅仅是为了加粗显示文本,是一种样式/风格需求;
B.strong这个标签意思是加强字符的语气,表示该文本比较重要,提醒读者/终端注意。为了达到这个目的,浏览器等终端将其加粗显示;
(3)同(2)i为了斜体而斜体,em为了标明重点而斜体,且对搜索引擎来说strong和em比b和i要重视的多
问题3:img上title与alt区别?
解析:title指图片的信息(鼠标移到图片上显示)、alt指图片不显示时显示的文字
问题4:以下哪个是块级元素
A.div
B.input
C.img
D.p
解析:块级元素特性占满整行,可见div和p标签是占满整行的。故选A和D
问题5:关于HTML语义化,以下哪个说法是正确的?
A、语义化的HTML有利于机器的阅读,如PDA手持设备、搜索引擎爬虫;但不利于人的阅读
B、Table属于过时的标签,遇到数据列表时,需尽量使用div来模拟表格
C、语义化是HTML5带来的新概念,此前版本的HTML无法做到语义化
D、header、article、address都属于语义化明确的标签
解析:A错误在于语义化就是为了利于人的阅读而产生的。B错误Table标签语义化明确本就是用来做数据列表的,用div来模拟则不满足标签语义化使用。C语义化是为了利于人的阅读不管html还是html5或者是xml都可尽量做到语义化。故选D
问题6:前端如何进行seo优化,以下说法错误的是:
A.爬虫依赖于标签来确定上下文和各个关键字的权重;
B.重要内容HTML代码放在最前:搜索引擎抓取HTML顺序是从上到下,保证重要内容一定会被抓取
C.重要内容要用js输出:爬虫会执行js获取内容
D.非装饰性图片必须加alt
解析:重要内容不能用js输出:爬虫不会执行js获取内容,选C
问题7:伪类和伪元素的区别
解析:伪类和伪元素是为了修饰不在文档树中的部分,比如一句话的第一个字母,列表中第一个元素。
伪类用于当已有元素处于某种状态时候,为其添加对应的样式,这个状态是根据用户行为变化而变化的。比如说hover。虽然他和普通的css类似,可以为已有的元素添加样式,但是他只有处于dom树无法描述的状态才能为元素添加样式,所以称为伪类
伪元素用于创建一些原本不在文档树中的元素,并为其添加样式,比如说:before。虽然用户可以看到这些内容,但是其实他不在文档树中。
问题8:请解释JSONP的工作原理,以及它为什么不是真正的Ajax?
解析:JSONPS是利用当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
href是HypertextReference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果我们在文档中添加那么浏览器会识别该文档为css文件,就会并行下载资源并且不会停止对当前文档的处理。
问题9:react-hooks的优劣如何
解析:ReactHooks优点/p>
简洁:ReactHooks解决了HOC和RenderProps的嵌套问题,更加简洁
解耦:ReactHooks可以更方便地把UI和状态分离,做到更彻底的解耦
组合:Hooks中可以引用另外的Hooks形成新的Hooks,组合变化万千
函数友好:ReactHooks为函数组件而生,从而解决了类组件的几大问题/p>
this指向容易错误
分割在不同声明周期中的逻辑使得代码难以理解和维护
代码复用成本高(高阶组件容易使代码量剧增)
ReactHooks缺陷/p>
额外的学习成本(FunctionalComponent与ClassComponent之间的困惑)
写法上有限制(不能出现在条件、循环中),并且写法限制增加了重构成本
破坏了PureComponent、React.memo浅比较的性能优化效果(为了取最新的props和state,每次render()都要重新创建事件处函数)
在闭包场景可能会引用到旧的state、props值
内部实现上不直观(依赖一份可变的全局状态,不再那么“纯”)React.memo并不能完全替代shouldComponentUpdate(因为拿不到statechange,只针对propschange)
问题10:react-router里的Link标签和a标签有什么区别
解析:从渲染的DOM来看,这两者都是链接,都是a标签,
区别是:
Link是react-router里实现路由跳转的链接,配合Route使用,react-router拦截了其默认的链接跳转行为,区别于传统的页面跳转,
Link的“跳转”行为只会触发相匹配的Route对应的页面内容更新,而不会刷新整个页面。a标签是html原生的超链接,用于跳转到href指向的另一个页面或者锚点元素,跳转新页面会刷新页面。
蘑菇天堂求职计划
IT职业规划+快速突击+助力你的offer
咨询求职计划你将得到
一条适合自己的职业规划道路
一个懂你帮你的行业大牛陪伴导师
获得快速求职成功的机会和能力
助力你的职业启航
立即咨询把握offer
长按下方