【准备面试】前端个人知识梳理（一）三大件

TimeFleeze

已于 2023-03-13 00:34:07 修改

阅读量202

点赞数

文章标签：前端 javascript

于 2023-03-13 00:31:46 首次发布

本文链接：https://blog.csdn.net/Time_Freeze/article/details/129480950

版权

本文详细介绍了前端核心技术，包括HTML5的语义化标签、SVG与Canvas的区别，CSS的盒模型和定位机制，JavaScript的运行流程、ES6的新特性如Promise和async/await，以及前端工程化的模块化、组件化、规范化和自动化理念。同时，提到了SEO最佳实践和不同的图片格式，如Webp和Apng。

摘要由CSDN通过智能技术生成

一三大件

1 HTML

< doctype > 的作用
什么是语义化
块级元素/行内元素/空元素
href和src的区别
async和defer的区别
meta和head的组成
HTML5新增：语义化标签/canvas/svg/webstorage/websocket/webworker/拖拽api/新的表单api/地理api
img 的 srcset 属性的作用
title与h1的区别、b与strong的区别、i与em的区别
Iframe的优缺点
label标签的作用
canvas和svg的区别
1.SVG 支持分层，可以对单独的标签进行修改，Canvas 修改的话，需要将整个画布重新渲染。
2.Canvas放大之后会失真，而 SVG 绘制的矢量图其质量不受缩放影响。
3.Canvas支持的颜色比SVG多，更适合用于图像密集型的游戏
4.SVG 支持事件处理器，而 Canvas 不支持
5.SVG 节点过多时，渲染速度会减慢，Canvas 性能更好一些，但写起来更复杂
乱码原因（浏览器gbk和数据库utf-8不兼容）
HTML5离线储存原理（在 cache.manifest 文件中编写需要离线存储的资源并于html中引入，如果是第一次访问页面，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过页面并且资源已经进行离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件。如果文件没有发生改变，就不做任何操作，如果文件改变了，就会重新下载文件中的资源并进行离线存储。离线的情况下浏览器会直接使用离线存储的资源）
< meta http-equiv =“Content-Security-Policy” content=“upgrade-insecure-requests” > 将http请求变为https
优雅降级和渐进增强
div相较于table，页面加载速度更快，结构化清晰，修改样式方便，易于优化
前端需要注意哪些SEO（语义化的html代码，少用iframe，合理的title、description、keywords，重要HTML代码放前面，重要内容不要用js输出，非装饰性图片必须加 alt）
XML/HTML/XHTML的区别
主流浏览器及其内核
1、IE：Trident
2、Chrome：Webkit -> Blink
3、Firefox：Gecko
4、Safari：Webkit
5、Opera：Presto -> Webkit -> Blink
HTML5 drag API
img的title/alt
HTML全局属性有哪些
WEB标准/W3C标准
HTML5移除了哪些元素：big, center, font, frame…
HTML5 不基于 SGML ，因此不需要对 DTD 进⾏引⽤，但是需要 doctype 来规范浏览器的⾏为，⽽ HTML4.01 基于 SGML，所以需要对 DTD 进⾏引⽤，才能告知浏览器⽂档所使⽤的⽂档类型
网页制作会用到的图片格式：png-8 、 png-24 、 jpeg 、 gif 、 svg
Webp：⾕歌开发的⼀种旨在加快图⽚加载速度的图⽚格式。图⽚压缩体积⼤约只有 JPEG 的 2/3 ，并能节省⼤量的服务器带宽资源和数据空间。在质量相同的情况下，WebP格式图像的体积要⽐JPEG格式图像⼩ 40% 。
Apng：是PNG的位图动画扩展，可以实现png格式的动态图⽚效果。04年诞⽣，但⼀直得不到各⼤浏览器⼚商的⽀持，直到⽇前得到 iOS safari 8 的⽀持，有望代替 GIF 成为下一代动态图标准。
什么是前端工程化？

1.模块化：是指在文件层面上对代码与资源实现拆分与组装，将一个大文件拆分为互相依赖的小文件，再统一拼装与加载。各个模块功能独立，分模块来维护，组合方式更灵活，多人协作也互不干扰。例如：接口模块、资源模块、路由模块等。

2.组件化：是指在功能开发场景中，将具备通用功能的交互设计划分为模板、样式和逻辑组成的功能单元，是具体某个功能的封装，实现了代码更高层次的复用性，提升开发效率。组件的封装也是对象的封装，同样要做到高内聚低耦合，例如分页器、table表格、form表单等。

3.规范化：将一系列预设规范接入工程各个阶段，通过各项指标标准化开发者的工作流程，为每个开发者指明一个方向，引领着成员往该方向走。例如：eslint、stylelint、pre-commit 等，拉齐代码标准，形成规范底线，方便不同人员等交叉维护。

4.自动化：指将一系列繁琐重复的工作流程交由程序根据预设脚本自动处理，常见自动化场景包括但不限于自动化构建、自动化测试、自动化打包、自动化发布和自动化部署等。在保证效率的同时，又解放了双手。

总结：前端工程化不是某个具体的工具，而是对项目的整体架构与整体规划，使开发者能在未来可判断时间内动态规划发展走向，以提升整个项目对用户的服务周期。最终的目的是从手动处理流程全部替换为自动处理流程，以解放团队双手，让其他成员更专注于自身业务需求。

2 CSS

盒模型：content-box 标准盒模型（默认）/ border-box IE怪异盒模型，通过设置box-sizing更改
style里面display可能属性：inline （默认）/block/inline-block/flex/grid/table/list-item/双值的（只有Firefox70支持了这一语法）
position定位机制：absolute/relative/fixed/sticky/static（默认）/inherit（继承），absolute定位的子元素宽度不会影响父元素的宽，而relative定位的子元素会撑大父元素。
flex及其应用场景
css的长度单位
水平垂直居中的方法（包括文本）
块级格式化上下文
层叠上下文
页面重绘和重排
css渲染层合成层
元素截断和隐藏
chrome支持小于12px的文字
css绘制常见图形
sass/less