共计 3395 个字符，预计需要花费 9 分钟才能阅读完成。
人的毕生，总是不免有浮沉。不会永远如旭日东升，也不会永远苦楚潦倒。重复地一浮一沉，对于一个人来说，正是磨难。因而，浮在下面的，不用自豪；沉在底下的，更用不着乐观。必须以率直、虚心的态度，乐观进取、向前迈进。——松下幸之助
大家好，我是江辰，在现在的互联网大环境下，想必大家都或多或少且有感触，塌实的社会之下，只有一直的放弃心性，能力感知不同的播种，互勉。
2023 年最新的面试题集锦，时刻做好筹备。
本文首发于微信公众号：家养程序猿江辰
欢送大家点赞，珍藏，关注
文章列表
- 2023 年前端面试真题之 JS 篇
- 2023 年前端面试真题之 CSS 篇
- 2023 年前端面试真题之编码篇
- 2023 年前端面试真题之 React 篇
- 2023 年前端面试真题之 Vue 篇
meta viewport 是做什么用的，怎么写？
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />目标 是为了在挪动端不让用户缩放页面应用的
解释每个单词的含意
- with=device-width 将布局视窗（layout viewport）的宽度设置为设施屏幕分辨率的宽度
- initial-scale=1 页面初始缩放比例为屏幕分辨率的宽度
- maximum-scale=1 指定用户可能放大的最大比例
- minimum-scale=1 指定用户可能放大的最大比例
浏览器乱码的起因是什么? 如何解决?
编码格局不匹配
浏览器关上网页时, 须要依据网页源代码的编码格局来解码。如果网页的编码格局与浏览器的编码格局不匹配, 就会呈现乱码。比方, 网页的编码格局为 UTF-8, 而浏览器的编码格局是 GB2312, 那么就会呈现乱码。
网页编码谬误
在编写网页的时候, 如果编码呈现谬误, 也会导致浏览器关上网页时呈现乱码。比方, 在写 HTML 代码时, 如果遗记给中文字符指定编码格局, 就会呈现乱码。
字体缺失
有些网页会应用比拟非凡的字体, 如果浏览器中没有这个字体, 就会找不到对应的字符, 从而呈现乱码。
iframe 有那些长处和毛病?
长处
- 能够在页面上独立显示一个页面或者内容, 不会与页面其余元素产生抵触。
- 能够在多个页面中重用同一个页面或者内容, 能够缩小代码的冗余。
- 加载是异步的, 页面能够在不期待 iframe 加载实现的状况下进行展现。
- 不便地实现跨域拜访
毛病
- 搜索引擎可能无奈正确解析 iframe 中的内容
- 会阻塞主页面的 onload 事件
- 和主页面共享连接池, 影响页面并行加载
HTML5 新个性
- 语义化标签
- 增强型表单(如能够通过 input 的 type 属性指定类型是 color 还是 date 或者 url 等)
- 媒体元素标签(video,audio)
- canvas,svg
- svg 绘图
- 天文等位(navigator.geolocation.getCurrentPosition(callback))
- 拖放 API(给标签元素设置属性 draggable 值为 true, 可能实现对指标元素的拖动)
- Web Worker(能够开启一个子线程运行脚本)
- Web Storage(即 sessionStorage 与 localStorage)
- Websocket(双向通信协定, 能够让浏览器接管服务端的申请)
- dom 查问 (document.querySelector() 和 document.querySelectorAll())
如何应用 HTML5 中的 Canvas 元素绘制图形？
Canvas 元素容许在网页上应用 JavaScript 绘制图形和动画。以下是一个简略的绘制矩形的示例：
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);
</script>在这个示例中，应用 document.getElementById() 办法获取 Canvas 元素，并通过 getContext(“2d”) 获取 2D 绘图上下文。
而后，应用 fillStyle 属性设置填充色彩，fillRect() 办法绘制一个矩形。
什么是 data- 属性？
在 JavaScript 框架变得风行之前，前端开发者常常应用 data- 属性，把额定数据存储在 DOM 本身中。过后没有其余 Hack 伎俩（比方应用非标准属性或 DOM 上额定属性）。这样做是为了将自定义数据存储到页面或利用中，对此没有其余更适当的属性或元素。
而当初，不激励应用 data- 属性。起因之一是，用户能够通过在浏览器中利用查看元素，轻松地批改属性值，借此批改数据。数据模型最好存储在 JavaScript 自身中，并利用框架提供的数据绑定，使之与 DOM 放弃更新。
请形容 cookie、sessionStorage 和 localStorage 的区别。
| cookie | localStorage | sessionStorage | |
|---|---|---|---|
| 由谁初始化 | 客户端或服务器，服务器能够应用 Set-Cookie 申请头。 |
客户端 | 客户端 |
| 过期工夫 | 手动设置 | 永不过期 | 以后页面敞开时 |
| 在以后浏览器会话（browser sessions）中是否放弃不变 | 取决于是否设置了过期工夫 | 是 | 否 |
| 是否随着每个 HTTP 申请发送给服务器 | 是，Cookies 会通过 Cookie 申请头，主动发送给服务器 |
否 | 否 |
| 容量（每个域名） | 4kb | 5MB | 5MB |
| 拜访权限 | 任意窗口 | 任意窗口 | 以后页面窗口 |
请形容 script、script async 和 script defer 的区别。
<script>– HTML 解析中断，脚本被提取并立刻执行。执行完结后，HTML 解析持续。<script async>– 脚本的提取、执行的过程与 HTML 解析过程并行，脚本执行结束可能在 HTML 解析结束之前。当脚本与页面上其余脚本独立时，能够应用async，比方用作页面统计分析。<script defer>– 脚本仅提取过程与 HTML 解析过程并行，脚本的执行将在 HTML 解析结束后进行。如果有多个含defer的脚本，脚本的执行程序将依照在 document 中呈现的地位，从上到下程序执行。
留神：没有 src 属性的脚本，async 和 defer 属性会被疏忽。
为什么最好把 CSS 的 link 标签放在 head 之间？为什么最好把 JS 的 script 标签恰好放在 body 之前，有例外情况吗？
把 <link> 标签放在 <head></head> 之间是标准要求的内容。此外，这种做法能够让页面逐渐出现，进步了用户体验。将样式表放在文档底部左近，会使许多浏览器（包含 Internet Explorer）不能逐渐出现页面。一些浏览器会阻止渲染，以防止在页面款式发生变化时，从新绘制页面中的元素。这种做法能够避免出现给用户空白的页面或没有款式的内容。
把 <script> 标签恰好放在 </body> 之前
脚本在下载和执行期间会阻止 HTML 解析。把 <script> 标签放在底部，保障 HTML 首先实现解析，将页面尽早出现给用户。
例外情况是当你的脚本里蕴含 document.write() 时。然而当初，document.write() 不举荐应用。同时，将 <script> 标签放在底部，意味着浏览器不能开始下载脚本，直到整个文档 （document） 被解析。兴许，对此比拟好的做法是，<script> 应用 defer 属性，放在 <head> 中。
什么是渐进式渲染（progressive rendering）？
渐进式渲染是用于进步网页性能（尤其是进步用户感知的加载速度），以尽快出现页面的技术。
在以前互联网带宽较小的期间，这种技术更为广泛。现在，挪动终端的流行，而挪动网络往往不稳固，渐进式渲染在古代前端开发中依然有用武之地。
一些举例：
- 图片懒加载——页面上的图片不会一次性全副加载。当用户滚动页面到图片局部时，JavaScript 将加载并显示图像。
- 确定显示内容的优先级（分档次渲染）——为了尽快将页面出现给用户，页面只蕴含根本的最大量的 CSS、脚本和内容，而后能够应用提早加载脚本或监听
DOMContentLoaded/load事件加载其余资源和内容。 - 异步加载 HTML 片段——当页面通过后盾渲染时，把 HTML 拆分，通过异步申请，分块发送给浏览器。