前端工程师2022版【W整】

时间：2023-07-23 07:15:02 | 来源：网站运营

时间：2023-07-23 07:15:02 来源：网站运营

前端工程师2022版【W整】：Download:

前端工程师2022版如何快速学习

前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。


1：学习过程中遇到一个小错误卡住很长时间，很多人就会在网上不断的找资料，找案例这样效率是比较慢的，应该自己一步一步进行反推，其实有时候可能你本来就没有任何问题而是你的代码出现一个中文符号，空格，括号不全，所以耐心的先反推一下，这样一是提高自己独立解决能力，二是让自己能记住这样错误下次可以快速反应。

2：很多人习惯边看视频边敲代码，其实这样对于提高是有影响的，应该是你先了解原理和写法，然后自己在操作一遍，并且拓展自己这样的原理还在哪里可以运用，这样下次再写类似的效果或者插件的时候，可以直接想起来。

3：格式问题，代码编写的格式，说重要可能不重要，因为只要你写出来效果是没问题的，但是我们要想一下代买的可维护性，当你过几天几周，几个月的时候在看这个代码，你确定你还能知道是怎么写的，并且在给上级看的时候上级能看懂，所以代码的格式也很重要的，所以尽量把代买写的规范一些，记得在大板块的方面加一个小小的备注，不光方便自己也方便他人。

2022最新web前端开发工程师面试题

前端工程师2022版面试

display:none; 和visibility:hidden;

display:none; 彻底消失，释放空间。可能引发页面的reflow回流（重排）。

visibility:hidden; 就是隐藏，但是位置没释放，好比opacity:0; 不会引发页面回流。

你做的页面在哪些浏览器内核中测试过

1、IE浏览器内核：Trident内核，也是俗称的IE内核；

2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；

3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；

4、Safari浏览器内核：Webkit内核；

5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核 ；

6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；

7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；

8、百度浏览器、世界之窗内核：IE内核；

9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核

CSS 选择器权重如何计算

就近原则：直接选中的，一定比继承的权重大。

一样近，比权重：id是100，class是10，标签是1， 总数权重一样谁写在下面听谁的。

行内 > 内嵌 = 外联 > 导入 !important能够提升权限，但是不能提升继承的 class="a b c" 和挂载顺序无关，看写的顺序

web 前端开发，如何提高页面性能优化（常问）

1.减少http请求次数

2.从用户的角度讲，静态资源（图片，css，js）都使用cdn，cdn就是一组分布在不同地方的web服务器，用户离服务器更近，请求的时间就更短

3.讲css放在文件头部，js文件放在底部（资源加载是，自上而下的，先加载css会让用户感觉页面加载更快）

4.尽可能使用iconfont代替图片图标

5.善用缓存，不重复加载相同的资源（数据如果要重复使用，就可以使用缓存，不要重复请求）

6.图片懒加载（当滚动条，滚动到一定值的时候，再加载），

• 不要缩放图片（例如你要50*50的图片，就不要拿500乘以500的大图片，影响加载）
• 降低图片质量
• 尽可能用css来代替图片（例如渐变，阴影）
• 使用webp格式图片

什么叫优雅降级和渐进渐强

优雅降级和渐进渐强 是浏览器兼容的两种方案。

1、优雅降级： 能力检测，如果能力有用新的；如果能力没有，用旧的。（先从高级功能实现，后面在逐级降低）

2、渐进渐强： 低端浏览器仅实现基本功能，高级浏览器实现额外功能。 （先实现基本功能。然后在实现高级功能）

比如上传文件，低端浏览器就给它提供上传按钮，高端浏览器增加外部拖拽文件上传。

如何形成 BFC

BFC是块级格式化上下文。

理论上讲，页面上所有的盒子必须都装到BFC盒子中，页面渲染才快。

BFC的形成：

① 有明确宽度、高度的盒子。

② overflow:hidden；

③ 定位的、浮动的

④ display ：inline-block，

BFC的性质： 内部有浮动，能清除这些浮动，能为浮动元素撑高。

CSS 的盒模型

1、标准盒模型：

范围：margin、border、padding、content

在标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。

增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

标准盒模型下盒子的大小 = content + border + padding + margin

2、IE盒子模型（怪异盒模型）中

范围：margin、border、padding、content都有，但是不同是content包含border、padding

width 和 height 指的是content+border+padding的宽度和高度。

怪异盒模型下盒子的大小=width（content + border + padding） + margin

3、盒模型的选择

可以为box-sizing赋三个值：

content-box： 默认值，border和padding不算到width范围内，可以理解为是W3c的标准模型(default)

border-box：border和padding划归到width范围内，可以理解为是IE的怪异盒模型

padding-box：将padding算入width范围

当设置为box-sizing:content-box时，将采用标准模式解析计算（默认模式）；

当设置为box-sizing:border-box时，将采用怪异模式解析计算；

如何垂直水平居中一个元素（常问）

1、弹性布局：display:flex; justify‐content: center; align‐items: center;

2、定位

3、display:inline-block配合text-align:center

对单位px、em、rem、vh、vw的理解

px物理像素，绝对值；

em相对于父级的大小，相对值；

rem相对于html的大小，相对 值；

vh相对于屏幕的高度，相对值；vw相对于屏幕的宽度，相对值