乐趣区

关于css:前端面试题汇总

jiezi

1. 输出一个 URL 到页面过程中产生了什么

  1. 首先在浏览器中输出 URL
  2. 查找缓存：浏览器先查看浏览器缓存 - 零碎缓存 - 路由缓存中是否有该地址页面，如果有则显示页面内容。如果没有则进行下一步。
  3. DNS 域名解析：浏览器向 DNS 服务器发动申请，解析该 URL 中的域名对应的 IP 地址。DNS 服务器是基于 UDP 的，因而会用到 UDP 协定。
  4. 建设 TCP 连贯：解析出 IP 地址后，依据 IP 地址和默认 80 端口，和服务器建设 TCP 连贯
  5. 发动 HTTP 申请：浏览器发动读取文件的 HTTP 申请，，该申请报文作为 TCP 三次握手的第三次数据发送给服务器
  6. 服务器响应申请并返回后果：服务器对浏览器申请做出响应，并把对应的 html 文件发送给浏览器
  7. 敞开 TCP 连贯：通过四次挥手开释 TCP 连贯
  8. 浏览器渲染：客户端（浏览器）解析 HTML 内容并渲染进去，浏览器接管到数据包后的解析流程为：
  9. 构建 DOM 树：词法剖析而后解析成 DOM 树（dom tree），是由 dom 元素及属性节点组成，树的根是 document 对象
  10. 构建 CSS 规定树：生成 CSS 规定树（CSS Rule Tree）
  11. 构建 render 树：Web 浏览器将 DOM 和 CSSOM 联合，并构建出渲染树（render tree）
  12. 布局（Layout）：计算出每个节点在屏幕中的地位
  13. 绘制（Painting）：即遍历 render 树，并应用 UI 后端层绘制每个节点。

浏览器渲染机制、重绘、重排

  1. 重排：当 DOM 的变动影响了元素的几何信息 (DOM 对象的地位和尺寸大小)，浏览器须要从新计算元素的几何属性，将其安放在界面中的正确地位，这个过程叫做重排。
    触发条件：
    增加或者删除可见的 DOM 元素
    元素尺寸扭转——边距、填充、边框、宽度和高度
  2. 重绘：当一个元素的外观产生扭转，但没有扭转布局, 从新把元素外观绘制进去的过程，叫做重绘。
    触发条件：扭转元素的 color、background、box-shadow 等属性

2. 平铺三个 div 和一个按钮

3.position 属性

  1. 固定定位 fixed：元素的地位绝对于浏览器窗口是固定地位，即便窗口是滚动的它也不会挪动。Fixed 定 位使元素的地位与文档流无关，因而不占据空间。Fixed 定位的元素和其余元素重叠。
  2. 绝对定位 relative：如果对一个元素进行绝对定位，它将呈现在它所在的地位上。而后，能够通过设置垂直 或程度地位，让这个元素“绝对于”它的终点进行挪动。在应用绝对定位时，无论是 否进行挪动，元素依然占据原来的空间。因而，挪动元素会导致它笼罩其它框。
  3. 相对定位 absolute：相对定位的元素的地位绝对于最近的已定位父元素，如果元素没有已定位的父元素，那 么它的地位绝对于。absolute 定位使元素的地位与文档流无关，因而不占据空间。absolute 定位的元素和其余元素重叠。
  4. 粘性定位 sticky：元素先依照一般文档流定位，而后绝对于该元素在流中的 flow root（BFC）和 containing block（最近的块级先人元素）定位。而后，元素定位体现为在逾越特定阈值前为绝对定 位，之后为固定定位。
  5. 默认定位 Static：默认值。没有定位，元素呈现在失常的流中（疏忽 top, bottom, left, right 或者 z-index 声 明）。inherit: 规定应该从父元素继承 position 属性的值。

4.transition 和 animation 的区别

答：transition 是适度属性，强调适度，它的实现须要触发一个事件（比方鼠标挪动下来，焦点，点击等）才执行动画。它相似于 flash 的补间动画，设置一个开始关键帧，一个完结关键帧。
animation 是动画属性，它的实现不须要触发事件，设定好工夫之后能够本人执行，且能够循环一个动画。它也相似于 flash 的补间动画，然而它能够设置多个关键帧（用 @keyframe 定义）实现动画。

5.CSS 款式优先级

!important
内联款式（1000）
ID 选择器（0100）
类选择器（0010）
元素选择器（0001）
通配符选择器（0000）
vue 中对组件款式的批改 无 scoped 的状况

6.EventLoop（高频）

JS 是单线程的，为了避免一个函数执行工夫过长阻塞前面的代码，所以会先将同步代码压入执行栈中，顺次执行，将异步代码推入异步队列，异步队列又分为宏工作队列和微工作队列，因为宏工作队列的执行工夫较长，所以微工作队列要优先于宏工作队列。微工作队列的代表就是，Promise.then，MutationObserver，宏工作的话就是 setImmediate setTimeout setInterval

requestAnimationFrame 是属于什么工作？宏工作？或二者都不是

7.map 跟 forEach 的区别

map 有返回值 forEach 没有返回值

8.computed 与 watch

watch 属性监听 是一个对象，键是须要察看的属性，值是对应回调函数，次要用来监听某些特定数据的变动，从而进行某些具体的业务逻辑操作, 监听属性的变动，须要在数据变动时执行异步或开销较大的操作时应用

computed 计算属性 属性的后果会被缓存，当 computed 中的函数所依赖的属性没有产生扭转的时候，那么调用以后函数的时候后果会从缓存中读取。除非依赖的响应式属性变动时才会从新计算，次要当做属性来应用 computed 中的函数必须用 return 返回最终的后果 computed 更高效，优先应用。data 不扭转，computed 不更新。

9.webpack 相干

罕用 Loader（高频）
  1. raw-loader：加载文件原始内容（utf-8）
  2. file-loader：把文件输入到一个文件夹中，在代码中通过绝对 URL 去援用输入的文件 (解决图片和字体)
  3. source-map-loader：加载额定的 Source Map 文件，以不便断点调试
  4. svg-inline-loader：将压缩后的 SVG 内容注入代码中
  5. image-loader：加载并且压缩图片文件
  6. json-loader 加载 JSON 文件（默认蕴含）
  7. babel-loader：把 ES6 转换成 ES5
  8. ts-loader: 将 TypeScript 转换成 JavaScript
  9. awesome-typescript-loader：将 TypeScript 转换成 JavaScript，性能优于 ts-loader
  10. sass-loader：将 SCSS/SASS 代码转换成 CSS
  11. css-loader：加载 CSS，反对模块化、压缩、文件导入等个性
  12. style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS
  13. postcss-loader：扩大 CSS 语法，应用下一代 CSS，能够配合 autoprefixer 插件主动补齐 CSS3 前缀
  14. vue-loader：加载 Vue.js 单文件组件

罕用的 Plugin

  1. define-plugin：定义环境变量 (Webpack4 之后指定 mode 会主动配置)
  2. ignore-plugin：疏忽局部文件
  3. html-webpack-plugin：简化 HTML 文件创建 (依赖于 html-loader)
  4. web-webpack-plugin：可不便地为单页利用输入 HTML，比 html-webpack-plugin 好用
  5. uglifyjs-webpack-plugin：不反对 ES6 压缩 (Webpack4 以前)
  6. terser-webpack-plugin: 反对压缩 ES6 (Webpack4)
  7. webpack-parallel-uglify-plugin: 多过程执行代码压缩，晋升构建速度
  8. mini-css-extract-plugin: 拆散款式文件，CSS 提取为独立文件，反对按需加载 (代替 extract-text-webpack-plugin)
  9. serviceworker-webpack-plugin：为网页利用减少离线缓存性能
  10. clean-webpack-plugin: 目录清理

10. 优化我的项目相干（凋谢）

11.vue router 模式及实现原理

一种是 Hash 模式，一种是 History 模式

Hash 模式：是以 url 中 #前面的内容作为路由地址，能够间接通过 location.url 来切换浏览器的地址，如果只扭转了# 前面的内容，浏览器不会向服务器申请这个地址，然而会把这个地址记录在浏览器的拜访记录中，当 hash 扭转后，要监听 hash 的变动，并做相应的解决，咱们能够监听 hashchange 事件，当 hash 发生变化时，会触发 hashchange 事件，在 hashchange 事件中记录以后路由地址，并找到以后路由对应的组件，从新渲染在浏览器中

History 模式：门路就是一般的 url，通过 history.pushState()办法来扭转地址栏，并把以后地址记录在浏览器的拜访历史中，并不会真正的跳到指定的门路，也就是浏览器不会向服务器发送申请。通过监听 popstate 事件，能够监听到浏览器历史操作的变动，在 popstate 事件中能够记录浏览器地址栏扭转后的地址，要留神的是，调用 history.pushSate()和 history.replaceState()不会触发 popstate 事件，只有点击浏览器的后退后退按钮及调用 history.forward()、history.back()、history.go()办法时才会触发 popstate 事件。最初通过路由找到对应的组件，渲染在浏览器中

12. 小程序相干

小程序的吊起机制：
小程序调起机制如下图，当用户在 H5 页面中点击含有 Scheme 协定的 url 时：

  1. 挪动设施会辨认 scheme 协定，关上百度 App，并将 url 的 Source 传递给百度 APP。URL Scheme 是一种 App 间的调起协定。App 外部注册协定后，当用户在浏览器或其余 App 内点击相应的 scheme 链接，就可能调起 App 并关上 App 内的相干页面。
  2. 当百度 App 承受到 source 后，辨认小程序标识，调起小程序框架。
  3. 小程序框架通过 appKey 加载小程序代码，关上指定小程序。
  4. 小程序依据 path 和 query 渲染具体页面，加载页面内容。

小程序架构
微信小程序的框架蕴含两局部 View 视图层、App Service 逻辑层，View 层用来渲染页面构造，AppService 层用来逻辑解决、数据申请、接口调用，它们在两个过程（两个 Webview）里运行。
视图层和逻辑层通过零碎层的 JSBridage 进行通信，逻辑层把数据变动告诉到视图层，触发视图层页面更新，视图层把触发的事件告诉到逻辑层进行业务解决。

退出移动版