前端新人关注的Web前端饱和性分析？前端面试必知必会的十点！

╰半夏微凉° 2022-12-13 14:20 96阅读 0赞

现在前端市场是不是已经饱和了？巴巴巴巴巴......

还有：XXX行业是否已经饱和？

angular1.5是不是已经被淘汰？

前端还有前途吗？

bootstrap为什么被称为垃圾框架？等等等

不是博主不友好，只想说一句：饱和的不是市场，饱和的是那曾经不知天高地厚的心。

另一方面，众所周知，语言都是相通的。而前端更是广泛应用的典范，来来来这位小同学，前端早已不再是浅层的静态页面了，大前端时代的到来，带了个无数的就业与发展机会。以下听我细细说来~

![15c4dfde5110264f9004f915392d904d.png][]

大前端时代关系组网图

偶然听学弟说，他现在找工作，应届毕业生很难找到了工作，感觉机会渺茫，公司基本只招3到5年工作经验的，新手并不是那么缺！感觉会h5，css3，js，jQuery已经很难找到工作了。

> 在这里我还是要推荐下我自己建的web前端开发学习群：1075888909，群里都是学web前端开发的，如果你正在学习前端 ，小编欢迎你加入，今天分享的这个案例已经上传到群文件，大家都是软件开发党，不定期分享干货（只有前端软件开发相关的），包括我自己整理的一份2018最新的前端进阶资料和高级开发教程，欢迎进阶中和进想深入前端的小伙伴。

注意，这是事实，但不是全部意义上的事实。

前端开发门槛确实不高，高工资舒适的工作环境造成全民学前端繁荣景象。其次，前端入门真的不是那么难，找到工作工资还比同龄人高出一大截，何乐而不为呢？！不需要多扎实的基本功，买几本书，订阅几个视频教程，下载个编辑器，边学边码，基本上已经达到了初级开发的程度了。是的就这么容易呀… 那这样就真的能找到工作吗？能的，去北京，去深圳，多如牛毛的创业小公司需要你，你去了，可能就是唯一的前端工程师，抄起大jq开干吧！运气好的话，提前扫点面试题月薪5000起步，轻轻松松。

那么，这种水平的前端开发已经快饱和了，不掌握点框架就很难有竞争力了。

由于菜鸡水平开发者的假如，导致前端市场早早的供大于求了。那咋办，大前端时代的框架学习成了必须。并且应该沉下心去学，我当时就找的博客上认识的老哥，我工作之余总结We彗\*\*\*Chat \*\*\*星星 : jianghuyapi 里面一堆免费教学视频，埋头学了几个月就找家小公司练手了。新手很多时候往往最蛋疼的是找工作的面试，那么前端新手面试应该注意哪些呢？？

![2d9d0446c2314f008d824011954de6b3.png][]

# 扫码查看入门1000+前端面试题 #

![20201012150525264.png][]

# **前端面试必知必会的十点：** #

1、常见的浏览器内核有哪些？

IE浏览器的内核：Trident、

Mozilla的Gecko、

Chrome的Blink（WebKit的分支）、

Opera内核原为Presto，现为Blink

2、行内元素有哪些?块级元素有哪些?CSS的盒模型?

块级元素：div p h1 h2 h3 h4 form ul

行内元素: a b br i span input select

Css盒模型:内容，border ,margin，padding

3、简述一下你对HTML语义化的理解？

HTML语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

HTML语义化的主要目的是：

1).为了在没有css的情况下，页面也能呈现出很好地内容结构、代码结构

2).有利于用户体验

3).有利于SEO和搜索引擎建立良好的沟通。

4).方便其他设备解析以意义的方式来渲染网页、

5).便于团队开发和维护，增加可读性。

4、前端页面有哪三层构成，分别是什么？作用是什么？

最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行为层。

**网页的结构层（structural layer）**由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”

**网页的表示层（presentation layer）**由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。

**网页的行为层（behavior layer）**负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

5、**HTML5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和HTML5？**

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

绘画 canvas

用于媒介回放的 video 和 audio 元素

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 的数据在浏览器关闭后自动删除

语意化更好的内容元素，比如 article、footer、header、nav、section

表单控件，calendar、date、time、email、url、search

新的技术webworker, websockt, Geolocation

移除的元素

纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

IE8/IE7/IE6支持通过document.createElement方法产生的标签，

可以利用这一特性让这些浏览器支持HTML5新标签，

浏览器支持新标签后，还需要添加标签默认的样式。

6、**请描述一下 cookies，sessionStorage 和 localStorage 的区别？**

cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会

sessionStorage和localStorage的存储空间更大；

sessionStorage和localStorage有更多丰富易用的接口；

sessionStorage和localStorage各自独立的存储空间。

7、CSS引入的方式有哪些? link和@import的区别是?

内联 内嵌 外链 导入

区别 ：同时加载

前者无兼容性，后者CSS2.1以下浏览器不支持

Link 支持使用javascript改变样式，后者不可

8、CSS清除浮动的几种方法（至少两种）

使用带clear属性的空元素

使用CSS的overflow属性；

使用CSS的:after伪元素；

使用邻接元素处理。

9、**谈一谈JavaScript作用域链**

当执行一段JavaScript代码（全局代码或函数）时，JavaScript引擎会创建为其创建一个作用域又称为执行上下文（Execution Context），在页面加载后会首先创建一个全局的作用域，然后每执行一个函数，会建立一个对应的作用域，从而形成了一条作用域链。每个作用域都有一条对应的作用域链，链头是全局作用域，链尾是当前函数作用域。

作用域链的作用是用于解析标识符，当函数被创建时（不是执行），会将this、arguments、命名参数和该函数中的所有局部变量添加到该当前作用域中，当JavaScript需要查找变量X的时候（这个过程称为变量解析），它首先会从作用域链中的链尾也就是当前作用域进行查找是否有X属性，如果没有找到就顺着作用域链继续查找，直到查找到链头，也就是全局作用域链，仍未找到该变量的话，就认为这段代码的作用域链上不存在x变量，并抛出一个引用错误（ReferenceError）的异常。

10、如何理解JavaScript原型链

JavaScript中的每个对象都有一个prototype属性，我们称之为原型，而原型的值也是一个对象，因此它也有自己的原型，这样就串联起来了一条原型链，原型链的链头是object,它的prototype比较特殊，值为null。

原型链的作用是用于对象继承，函数A的原型属性(prototype property)是一个对象，当这个函数被用作构造函数来创建实例时，该函数的原型属性将被作为原型赋值给所有对象实例，比如我们新建一个数组，数组的方法便从数组的原型上继承而来。

当访问对象的一个属性时, 首先查找对象本身, 找到则返回; 若未找到, 则继续查找其原型对象的属性(如果还找不到实际上还会沿着原型链向上查找, 直至到根). 只要没有被覆盖的话, 对象原型的属性就能在所有的实例中找到，若整个原型链未找到则返回undefined。

其实像更多这样的面试题还要很多， 呆鹅platform编号：EnjoyTheCode,每日新鲜血液补充给大家~那里几乎都可以免费获取各种视频资源，并且每天分享各种前端知识，工作中遇到的问题，希望大家能够一起进步！共争高薪！

![5ae589f487d19fc50064db6b6314179a.png][]

力争每日一更，欢迎关注微信公众号：**信宜钱排**，每天分享干货！

[15c4dfde5110264f9004f915392d904d.png]: /images/20221123/da16f8d33b794dd69f2097528d58f8fe.png
[2d9d0446c2314f008d824011954de6b3.png]: /images/20221123/da2dd61c3c714d1f87e8cf6884d7a5fb.png
[20201012150525264.png]: /images/20221123/069a1d15e7a848b289428ceda91b2e81.png
[5ae589f487d19fc50064db6b6314179a.png]: /images/20221123/7dd7d987bb854275a8492d402f4421c2.png