{"id":19720733,"url":"https://github.com/jcodelife/fe-interview-2022","last_synced_at":"2025-09-22T21:12:34.669Z","repository":{"id":108000182,"uuid":"459110396","full_name":"jCodeLife/FE-interview-2022","owner":"jCodeLife","description":"🍰  2022 前端高频面试题及答案","archived":false,"fork":false,"pushed_at":"2022-02-27T01:36:14.000Z","size":10,"stargazers_count":4,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-10T16:13:42.151Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jCodeLife.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-14T10:14:00.000Z","updated_at":"2022-07-21T02:57:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"4b24544b-126d-44ea-9a82-a932a933694f","html_url":"https://github.com/jCodeLife/FE-interview-2022","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jCodeLife%2FFE-interview-2022","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jCodeLife%2FFE-interview-2022/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jCodeLife%2FFE-interview-2022/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jCodeLife%2FFE-interview-2022/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jCodeLife","download_url":"https://codeload.github.com/jCodeLife/FE-interview-2022/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241040812,"owners_count":19898938,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T23:12:20.460Z","updated_at":"2025-09-22T21:12:29.647Z","avatar_url":"https://github.com/jCodeLife.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# 简介\n\n本项目用于收集高频前端面试题，包含参考答案\n\n助力2022年金三银四跳槽拿高薪\n\n\n# 题\n## HTML\n1. DOCTYPE的作⽤？\n\nDOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个 ⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript 脚本的解析\n\n⽂档解析类型有： \n- BackCompat：怪异模式，浏览器使⽤⾃⼰的怪异模式解析渲染⻚⾯。（如果没有声明DOCTYPE，默认就是这个 模式） \n- CSS1Compat：标准模式，浏览器使⽤W3C的标准解析渲染⻚⾯。 \n- IE8还有⼀种介乎于上述两者之间的近乎标准的模式，但是基本淘汰了\n\n2. meta标签有哪些常见的形式？\n\nmeta标签由name和content两个属性来定义，来描述⼀个HTML⽹⻚⽂档的属性，例如作者、⽇期和时间、⽹⻚描述、 关键词、⻚⾯刷新等，除了⼀些http标准规定了⼀些name作为⼤家使⽤的共识，开发者也可以⾃定义name\n\n常见形式：\n- charset，⽤于描述HTML⽂档的编码形式\n```\n\u003cmeta charset=\"UTF-8\" \u003e\n```\n- http-equiv，顾名思义，相当于http的⽂件头作⽤,⽐如下⾯的代码就可以设置http的缓存过期⽇期\n```\n＜meta http-equiv=\"expires\" content=\"Wed, 20 Jun 2019 22:33:00 GMT\"＞\n```\n- viewport，移动前端最熟悉不过，Web开发⼈员可以控制视⼝的⼤⼩和⽐例\n```\n\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1\"\u003e\n```\n- apple-mobile-web-app-status-bar-style,开发过PWA应⽤的开发者应该很熟悉，为了⾃定义评估⼯具栏的颜⾊\n```\n\u003cmeta name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\"\u003e\n```\n3. src和href的区别？\n\nsrc是指向外部资源的位置，指向的内容会嵌⼊到⽂档中当前标签所在的位置，在请求src资源时会将其指向的资源 下载并应⽤到⽂档内，如js脚本，img图⽚和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处 理，知道将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在底部⽽不是头部\n\nhref是指向⽹络资源所在位置（的超链接），⽤来建⽴和当前元素或⽂档之间的连接，当浏览器识别到它他指向的 ⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理\n\n4. defer和async的区别？\n\ndefer：浏览器指示脚本在⽂档被解析后执⾏，script被异步加载后并不会⽴刻执⾏，⽽是等待⽂档被解析完毕后执⾏\n\nasync：同样是异步加载脚本，区别是脚本加载完毕后⽴即执⾏，这导致async属性下的脚本是乱序的，对于script 有先后依赖关系的情况，并不适⽤\n\n\n5. 前端存储方式和区别？\n\n前端存储方式有以下几种方式：cookies、localstorage、sessionstorage、Web SQL、IndexedDB\n\n区别如下：\n\ncookies： 在HTML5标准前本地储存的主要⽅式，优点是兼容性好，请求头⾃带cookie⽅便，缺点是⼤⼩只有4k， ⾃动请求头加⼊cookie浪费流量，每个domain限制20个cookie，使⽤起来麻烦需要⾃⾏封装 \n\nlocalStorage：HTML5加⼊的以键值对(Key-Value)为标准的⽅式，优点是操作⽅便，永久性储存（除⾮⼿动删 除），⼤⼩为5M，兼容IE8+ \n\nsessionStorage：与localStorage基本类似，区别是sessionStorage当⻚⾯关闭后会被清理，⽽且与cookie、 localStorage不同，他不能在所有同源窗⼝中共享，是会话级别的储存⽅式 \n\nWeb SQL：2010年被W3C废弃的本地数据库数据存储⽅案，但是主流浏览器（⽕狐除外）都已经有了相关的实 现，web sql类似于SQLite，是真正意义上的关系型数据库，⽤sql进⾏操作，当我们⽤JavaScript时要进⾏转换， 较为繁琐\n\nIndexedDB： 是被正式纳⼊HTML5标准的数据库储存⽅案，它是NoSQL数据库，⽤键值对进⾏储存，可以进⾏快 速读取操作，⾮常适合web场景，同时⽤JavaScript进⾏操作会⾮常⽅便。\n\n\n\n\n\n## CSS\n1. 说说CSS选择器的优先级？\n2. em和rem的区别？以及Rem布局的原理是什么？\n3. 什么是margin塌陷和margin合并？如何解决？\n4. 重绘和重排的区别？如何减少重绘重排？\n5. 说说flex布局，它有哪些属性？\n6. 如何隐藏一个元素？\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcodelife%2Ffe-interview-2022","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjcodelife%2Ffe-interview-2022","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcodelife%2Ffe-interview-2022/lists"}