每日三问-前端（第十九期）

最新推荐文章于 2024-10-16 11:23:07 发布

伊泽瑞尔灬

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量325

点赞数

文章标签：前端 css javascript html css3

本文链接：https://blog.csdn.net/qq_30811721/article/details/131118711

版权

文章回顾了ES6的关键特性，如块级作用域、箭头函数、解构赋值等，并介绍了前端自适应布局的常见方法，如媒体查询、Flexbox和栅格系统。同时，讨论了Vue框架中的$nextTick机制，用于在DOM更新后执行回调，以及mixin的用途，用于代码复用。另外，提到了Vue.observable在响应式系统中的作用。

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

先来回顾一下上期的问题及答案：

2023年6月8日

1. es6中增加了哪些扩展？

ES6（ECMAScript 2015）引入了许多扩展和新功能，包括但不限于以下几个：

块级作用域（Block Scope）：引入了 let 和 const 关键字，用于声明块级作用域的变量和常量。
箭头函数（Arrow Functions）：提供了更简洁的函数定义语法，使用箭头 => 表示函数。
解构赋值（Destructuring Assignment）：可以通过模式匹配的方式将数组或对象的属性解构到变量中。
模板字符串（Template Strings）：使用反引号 ` 包裹字符串，可以在字符串中插入变量和表达式，实现更方便的字符串拼接和格式化。
迭代器与生成器（Iterators and Generators）：引入了可迭代对象和迭代器的概念，以及生成器函数的语法，使得处理数据集合更加简洁和可控。
类与模块（Classes and Modules）：引入了类和模块的语法，更加面向对象的编程方式。
Promise 对象（Promises）：提供了处理异步操作的标准化接口，解决了回调地狱的问题。
模块化导入和导出（Module Imports and Exports）：通过 import 和 export 关键字实现模块之间的依赖管理。

2. 前端自适应布局有哪些方案？

前端自适应布局有多种方案可供选择，其中常见的几种包括：

媒体查询（Media Queries）：通过在 CSS 中使用媒体查询，根据不同的设备屏幕尺寸和特性，为不同的布局设置不同的样式规则。
弹性布局（Flexbox）：使用 CSS 的 Flexbox 布局模型，通过设置容器和子元素的属性，实现灵活的自适应布局。
栅格系统（Grid System）：使用栅格系统库（如 Bootstrap）或自定义栅格系统，将页面划分为多个列和行，根据需要放置内容。
百分比布局（Percentage-based Layout）：使用百分比设置元素的宽度和高度，使其相对于父元素自适应调整大小。
Viewport 单位（Viewport Units）：使用视口单位（如 vw、vh、vmin、vmax），根据视口的大小自动调整元素的大小。

3. 静态文件css，js会阻塞页面加载吗？

静态文件（如 CSS 和 JS）会阻塞页面加载。浏览器在解析 HTML 文档时，会按照顺序下载外部的 CSS 文件和 JS 脚本，并在加载完成后才继续解析和渲染页面。当浏览器遇到 <link> 标签引用的外部 CSS 文件时，会发起网络请求下载 CSS 文件。在 CSS 文件下载和解析完成之前，浏览器会阻塞页面的渲染，即页面上的内容不会显示出来，直到 CSS 文件准备就绪。

同样，当浏览器遇到 <script> 标签引用的外部 JS 脚本时，会暂停 HTML 文档的解析，发起网络请求下载 JS 文件，然后执行 JS 脚本。只有当 JS 文件下载和执行完毕后，浏览器才会继续解析和渲染页面。

为了避免页面阻塞，可以将 CSS 文件放在文档头部的 <head> 标签中，并将 JS 脚本放在 <body> 结束标签前，或者使用 defer 或 async 属性来异步加载 JS 脚本。这样可以使页面的渲染和交互更加流畅。