白癜风公益援助 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
长按下方
