수집할 가치가 있는 선택된 웹 프런트엔드 인터뷰 질문을 공유하세요(답변 포함).

• 상위 구성 요소의 메소드를 호출합니다. this.$parent.event를 통해 하위 구성요소에 직접 추가됩니다.

상위 구성 요소는 메소드를 하위 구성 요소에 전달하고 해당 메소드는 하위 구성 요소에서 직접 호출됩니다.

query 매개변수

1.路由配置：
name: 'home',
path: '/home'
2.跳转：
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
3.获取参数
html取参: $route.query.id
script取参: this.$route.query.id

params 매개변수

rreee
경로를 통해 직접 매개변수 전송

1.路由配置：
name: 'home',
path: '/home/:id'(或者path: '/home:id')
2.跳转：
this.$router.push({name:'home',params: {id:'1'}})
注意：
// 只能用 name匹配路由不能用path
// params传参数(类似post)  路由配置 path: "/home/:id" 或者 path: "/home:id"否则刷新参数消失
3.获取参数
html取参:$route.params.id 
script取参:this.$route.params.id

• (3)this.$router.replace()

• 사용법은 위와 동일합니다

• (4)this.$router.go(n)

• 앞으로 또는 뒤로 이동 n times 페이지, n은 양수 또는 음수일 수 있습니다.

• 
  차이점:
  
  
this.$router.push

는 지정된 URL 경로로 이동하지만 기록 스택에는 기록이 없습니다. 돌아가기를 클릭하면 이전 페이지로 이동합니다(즉, 현재 페이지가 직접 교체됩니다).

n 페이지를 앞으로 또는 뒤로 이동합니다. n은 양수 또는 음수일 수 있습니다

Vue.js 2.0 데이터 하이재킹(프록시 모드)을 사용합니다. 게시자-구독자 모드(PubSub 모드)와 결합된 Object.defineProperty()는 각 속성의 setter 및 getter를 하이재킹하고, 데이터 변경 시 구독자에게 메시지를 게시하고, 해당 수신 콜백을 트리거하는 데 사용됩니다.

• 每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。

  Vue.js 3.0, 放弃了Object.defineProperty ，使用更快的ES6原生 Proxy (访问对象拦截器, 也称代理器)

• 50、Computed和Watch的区别

  • computed 计算属性 : 依赖其它属性值,并且 computed 的值有缓存,只有它依赖的 属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值。

  • watch 侦听器 : 更多的是观察的作用,无缓存性,类似于某些数据的监听回调,每 当监听的数据变化时都会执行回调进行后续操作。

  • 运用场景：

    • 当我们需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可以利用 computed的缓存特性,避免每次获取值时,都要重新计算。
    • 当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用 watch 选项允许我们执行异步操作 ( 访问一个 API ),限制我们执行该操作的频率, 并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。
    • 多个因素影响一个显示，用Computed；一个因素的变化影响多个其他因素、显示，用Watch;

  • Computed 和 Methods 的区别

    • computed: 计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值对于 method ，只要发生重新渲染，
    • method 调用总会执行该函数

• 51、过滤器 (Filter)

  • 在Vue中使用filters来过滤(格式化)数据，filters不会修改数据，而是过滤(格式化)数据，改变用户看到的输出（计算属性 computed ，方法 methods 都是通过修改数据来处理数据格式的输出显示。
  • 使用场景： 比如需要处理时间、数字等的的显示格式；

• 52、axios是什么
  易用、简洁且高效的http库， 支持node端和浏览器端，支持Promise，支持拦截器等高级配置。

• 53、sass是什么？如何在vue中安装和使用？
  sass是一种CSS预编译语言安装和使用步骤如下。

1. 用npm安装加载程序（ sass-loader、 css-loader等加载程序)。
2. 在 webpack.config.js中配置sass加载程序。

• 54、Vue.js页面闪烁
  Vue. js提供了一个v-cloak指令，该指令一直保持在元素上，直到关联实例结束编译。当和CSS一起使用时，这个指令可以隐藏未编译的标签，直到实例编译结束。用法如下。

	[v-cloak]{ 
	display:none; 
	} 
	<div v-cloak>{{ title }}</div>

• 55、如何解决数据层级结构太深的问题
  在开发业务时，经常会岀现异步获取数据的情况，有时数据层次比较深，如以下代码: span 'v-text="a.b.c.d">, 可以使用vm.$set手动定义一层数据: vm.$set("demo"，a.b.c.d)

• 56、vue常用指令

1. v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model）
2. v-bind 动态绑定 作用： 及时对页面的数据进行更改
3. v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面
4. v-for 格式： v-for=“字段名 in(of) 数组json” 循环数组或json(同angular中的ng-repeat)
5. v-show 显示内容 （同angular中的ng-show）
6. v-hide 隐藏内容（同angular中的ng-hide）
7. v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）
8. v-else-if 必须和v-if连用
9. v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
10. v-text 解析文本
11. v-html 解析html标签
12. v-bind:class 三种绑定方法
    • 对象型 ‘{red:isred}’
    • 三元型 ‘isred?“red”:“blue”’
    • 数组型 ‘[{red:“isred”},{blue:“isblue”}]’
13. v-once 进入页面时 只渲染一次 不在进行渲染
14. v-cloak 防止闪烁
15. v-pre 把标签内部的元素原位输出

• 57、$route和$router的区别

  • $route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
  • $router是“路由实例”对象包括了路由的跳转方法，钩子函数等

• 58、怎样理解 Vue 的单项数据流

  • 데이터는 항상 상위 구성 요소에서 하위 구성 요소로 전달됩니다. 하위 구성 요소는 상위 구성 요소가 전달한 데이터를 수정할 권한이 없으며 상위 구성 요소에 원본 데이터를 수정하도록 요청할 수만 있습니다. 이렇게 하면 하위 구성 요소가 실수로 상위 구성 요소의 상태를 변경하여 애플리케이션의 데이터 흐름을 이해하기 어려워지는 것을 방지할 수 있습니다.
  • 참고: 상위 구성 요소에서 하위 구성 요소로 전달된 props를 바인딩하기 위해 v-model을 직접 사용하는 것은 불규칙한 작성 방식이며 개발 환경에서 경고를 보고합니다.
  • 부모 컴포넌트의 props 값을 정말로 변경하고 싶다면 데이터에 변수를 정의하고 prop 값으로 초기화한 다음 $emit를 사용하여 부모 컴포넌트에 수정하라고 알릴 수 있습니다.

• 59. 가상 DOM이란 무엇인가요? 장점과 단점은 무엇입니까?
  브라우저에서 DOM을 조작하는 것은 비용이 많이 들기 때문입니다. DOM에서 자주 작업하면 특정 성능 문제가 발생합니다. 이것이 가상 돔을 만든 이유입니다. Vue2의 Virtual DOM은 오픈 소스 라이브러리 snabbdom의 구현을 활용합니다. Virtual DOM의 핵심은 네이티브 JS 객체를 사용하여 실제 DOM의 추상화 계층인 DOM 노드를 설명하는 것입니다.

  • 장점:
    • 1. 보장된 성능 하한: 프레임워크의 가상 DOM은 상위 계층 API에서 생성될 수 있는 모든 작업에 적응해야 하므로 일부 DOM 작업은 보편적이어야 하므로 성능이 최적화되지 않습니다. ; 그러나 조잡한 것에 비해 DOM의 DOM 작업 성능은 훨씬 더 우수하므로 프레임워크의 가상 DOM은 최소한 수동 최적화 없이도 여전히 좋은 성능을 제공할 수 있음을 보장할 수 있으며 이는 성능의 하한을 보장할 뿐만 아니라
    • 2. DOM을 수동으로 작동할 필요가 없습니다. DOM을 수동으로 작동할 필요가 없습니다. 프레임워크는 가상 DOM과 데이터를 양방향으로 바인딩하기만 하면 됩니다. 예측 가능한 방식으로 뷰를 업데이트하면 개발 효율성이 크게 향상됩니다.
    • 3. 크로스 플랫폼: Virtual DOM은 본질적으로 JavaScript 개체이며 DOM은 플랫폼과 밀접한 관련이 있습니다. 이에 비해 virtual DOM은 서버 측 렌더링, weex 개발 등과 같은 보다 편리한 크로스 플랫폼 작업을 수행할 수 있습니다. .
  • 단점:
    • 1. 극단적인 최적화를 수행할 수 없음: 가상 DOM + 합리적인 최적화는 대부분의 애플리케이션의 성능 요구 사항을 충족하기에 충분하지만 성능 요구 사항이 매우 높은 일부 애플리케이션에서는 가상 DOM을 극단적으로 최적화할 수 없습니다.
    • 2. 처음으로 많은 양의 DOM을 렌더링하는 경우 DOM 계산의 추가 레이어로 인해 innerHTML 삽입보다 속도가 느려집니다.

• 60. Vuex 페이지를 새로 고칠 때 데이터 손실 문제를 해결하는 방법은 무엇입니까?

  • Vuex 데이터 지속성이 필요합니다. 일반적으로 데이터를 저장하려면 로컬 스토리지 솔루션을 사용하거나 타사 플러그인을 사용할 수 있습니다.
  • Vuex 영구 저장소용 플러그인인 vuex-persist 플러그인 사용을 권장합니다. 저장소에 수동으로 액세스할 필요는 없지만 상태를 쿠키나 localStorage에 직접 저장합니다.

• 61. Vuex를 모듈로 나누고 네임스페이스를 추가해야 하는 이유는 무엇인가요?

  • Module: 단일 상태 트리를 사용하기 때문에 애플리케이션의 모든 상태가 상대적으로 큰 개체에 집중됩니다. 애플리케이션이 매우 복잡해지면 저장소 개체가 상당히 커질 수 있습니다. 위의 문제를 해결하기 위해 Vuex를 사용하면 저장소를 모듈로 분할할 수 있습니다. 각 모듈에는 고유한 상태, 변형, 작업, getter 및 중첩된 하위 모듈이 있습니다.

  • Namespace: 기본적으로 모듈 내부의 작업, 변형 및 게터는 전역 네임스페이스에 등록됩니다. 이를 통해 여러 모듈이 동일한 변형 또는 작업에 응답할 수 있습니다. 모듈이 더 높은 수준의 캡슐화 및 재사용성을 갖기를 원한다면 네임스페이스:true를 추가하여 이름이 지정된 모듈로 만들 수 있습니다. 모듈이 등록되면 모듈의 모든 getter, 작업 및 변형 이름이 모듈에 등록된 경로에 따라 자동으로 지정됩니다.

• 62. vue에서는 어떤 디자인 패턴이 사용되나요?

  • 1. 팩토리 모드 - 매개변수를 전달하여 인스턴스를 생성합니다.
    가상 DOM은 다양한 매개변수에 따라 기본 태그의 Vnode와 구성 요소의 Vnode를 반환합니다.
  • 2. 싱글톤 모드 - 전체 프로그램에는 단 하나의 인스턴스만 있습니다.
    vuex 및 vue-router의 플러그인 등록 방법 설치는 인스턴스가 시스템에 존재하는 경우 직접 반환됩니다.
  • 3. 게시-구독 모델. (vue 이벤트 메커니즘)
  • 4. 관찰자 모드. (반응형 데이터 원칙)
  • 5. 데코레이터 모드(@데코레이터 사용)
  • 6. 전략 모드는 객체가 특정 동작을 가지고 있음을 의미하지만, 다른 시나리오에서는 이 동작에 다른 구현 솔루션이 있습니다. 옵션 병합 전략.

• 63. Vue에 대해 어떤 성능 최적화를 수행했나요?
  여기서는 Vue의 성능 최적화만 나열합니다. 전체 프로젝트의 성능 최적화는 큰 프로젝트입니다.

  • 对象层级不要过深，否则性能就会差。
  • 不需要响应式的数据不要放在 data 中（可以使用 Object.freeze() 冻结数据）
  • v-if 和 v-show 区分使用场景
  • computed 和 watch 区分场景使用
  • v-for 遍历必须加 key，key最好是id值，且避免同时使用 v-if
  • 大数据列表和表格性能优化 - 虚拟列表 / 虚拟表格
  • 防止内部泄露，组件销毁后把全局变量和时间销毁
  • 图片懒加载
  • 路由懒加载
  • 异步路由
  • 第三方插件的按需加载
  • 适当采用 keep-alive 缓存组件
  • 防抖、节流的运用
  • 服务端渲染 SSR or 预渲染

• 64、Vue.set 方法原理
  在两种情况下修改 Vue 是不会触发视图更新的。

  • 1、在实例创建之后添加新的属性到实例上（给响应式对象新增属性）
  • 2、直接更改数组下标来修改数组的值。
  • Vue.set 或者说是 $set 原理如下
    因为响应式数据 我们给对象和数组本身新增了__ob__属性，代表的是 Observer 实例。当给对象新增不存在的属性，首先会把新的属性进行响应式跟踪 然后会触发对象 ob 的dep收集到的 watcher 去更新，当修改数组索引时我们调用数组本身的 splice 方法去更新数组。

• 65、函数式组件使用场景和原理
  函数式组件与普通组件的区别

  • 1、函数式组件需要在声明组件时指定 functional:true
  • 2、不需要实例化，所以没有this，this通过render函数的第二个参数context代替
  • 3、没有生命周期钩子函数，不能使用计算属性，watch
  • 4、不能通过$emit对外暴露事件，调用事件只能通过context.listeners.click的方式调用外部传入的事件
  • 5、因为函数组件时没有实例化的，所以在外部通过ref去引用组件时，实际引用的是HTMLElement
  • 6、函数式组件的props可以不用显示声明，所以没有在props里面声明的属性都会被自动隐式解析为prop，而普通的组件所有未声明的属性都解析到$attrs里面，并自动挂载到组件根元素上（可以通过inheritAttrs属性禁止）

  优点：1.由于函数组件不需要实例化，无状态，没有生命周期，所以渲染性要好于普通组件2.函数组件结构比较简单，代码结构更清晰

  使用场景：

  一个简单的展示组件，作为容器组件使用 比如 router-view 就是一个函数式组件。 “高阶组件”—用于接受一个组件为参数，返回一个被包装过的组件。
  相关代码如下：

if (isTrue(Ctor.options.functional)) { // 带有functional的属性的就是函数式组件 
return createFunctionalComponent(Ctor, propsData, data, context, children);
} 
const listeners = data.on; 
data.on = data.nativeOn; 
installComponentHooks(data); // 安装组件相关钩子 （函数式组件没有调用此方法，从而性能高于普通组件）

• 66、子组件为何不可以修改父组件传递的 Prop？
  所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

• 67、vue项目创建。路由配置、环境配置以及组件传值等

css、html面试题

• HTML和HTML5有什么区别？

  主要有三个区别：

  • 1、文档声明区别

    HTML：超文本标记语言，一种纯文本类型的语言。

    HTML5.0：文档声明HTML5方便书写，精简，有利于程序员快速的阅读和开发。

  • 2、结构语义区别

    html：没有体现结构语义化的标签，如：<div id="nav"></div>

    html5: <article>, <aside>, <audio>, <bdi>...<code><article>、<aside>、<audio>、<bdi>...</bdi></audio></aside></article>

  • 3과 같은 의미 체계 태그를 많이 추가했습니다. HTML: 웹을 정의하는 데 사용되는 확장 가능한 벡터 그래픽, 벡터 기반 그래픽을 나타냅니다.

    HTML5: HTML5의 캔버스 요소는 스크립트(일반적으로 JavaScript 사용)를 사용하여 웹 페이지에 이미지를 그리며 캔버스의 모든 픽셀을 제어할 수 있습니다.

박스 모델이란 무엇인가요?

• 상자를 내용, 패딩, 테두리, 여백의 여러 부분으로 나눌 것입니다. 즉, 상자 모델은 여백, 패딩, 테두리 및 내용으로 구성됩니다.
  • 상자 모델은 표준 상자 모델로 구분됩니다. 및 IE 상자 모델
HTML5 의미를 이해하는 방법은 무엇입니까?

• HTML 의미 체계 태그
  header - 제목
  1. nav - 탐색
  2. article - 기사
  3. section - 섹션 또는 단락
  4. aside - 사이드바
  5. footer - 바닥글
의미론 이점은 무엇입니까 변신의?

1. 사용자 경험 개선: 제목, 대체 설명을 사용합니다. 명사와 사진 정보
2. 는 SEO에 좋습니다. 의미화는 검색 엔진과 더 나은 연결을 설정하고, 검색을 최적화하며
3. 팀 개발 및 유지 관리를 용이하게 합니다. 의미화는 더 읽기 쉽습니다

1. 쿠키
• (1) 클라이언트와 서버 사이의 통신에 사용됩니다
  (2) 하지만 로컬 저장 기능이 있어서 "빌려온 것"입니다
  (3) document.cookie = . ..get and Just 수정
  (4) 쿠키 저장의 단점
  ①저장 용량이 너무 작아서 4kb에 불과합니다
  ②모든 http 요청이 전달되므로 리소스 획득 효율성에 영향을 미칩니다
  ③API가 간단하고 캡슐화되어야 합니다. document.cookie를 사용하려면
  2 , localStorage, sessionStorage
  (1) html5는 저장소용으로 특별히 설계되었으며 최대 용량은 5M입니다
  (2) API는 간단하고 사용하기 쉽습니다
  (3) lcoalStorage.setItem(key, value);localStorage.getItem(key);
  (4) iOS 사파리의 숨겨진 모드에서: localStorage.getItem은 오류를 보고합니다. try-catch 캡슐화를 사용하는 것이 좋습니다. 3. SessionStorage는 로컬에 데이터를 저장하는 데 사용됩니다. 이러한 데이터는 동일한 세션의 페이지에서만 액세스할 수 있으며 세션이 종료된 후에도 데이터가 삭제됩니다. 따라서 sessionStorage는 영구 로컬 저장소가 아니며 세션 수준 저장소일 뿐입니다. LocalStorage는 데이터가 적극적으로 삭제되지 않는 한 영구 로컬 저장소에 사용됩니다.
  
  일반적인 브라우저 커널은 무엇인가요?
  **Trident 커널: ** 브라우저가 IE 브라우저라는 의미이므로 Trident 커널은 E 커널이라고도 합니다. 이 커널은 Windows 플랫폼에서만 사용할 수 있으며 오픈 소스가 아닙니다.
• 
  **Gecko 커널: **는 브라우저가 Firefox 브라우저임을 나타냅니다. Gecko 커널은 오픈 소스이며 가장 큰 장점은 크로스 플랫폼이 가능하다는 것입니다.

webkit

**Presto 커널: **브라우저 Opera 브라우저(중국어는 "Open Browser"로 번역됨)를 나타냅니다. Presto 커널은 세계에서 가장 빠른 렌더링 엔진으로 인정받고 있지만 2013년 이후 Open은 Google에 합류할 것이라고 발표했습니다. 캠프가 이 커널을 버렸습니다.

• 웹 표준:
  • 웹 표준은 크게 구조, 성능, 동작의 세 부분으로 나뉩니다.
    구조: 우리가 일반적으로 본문에 작성하는 태그를 말하며 주로 HTML 태그로 구성됩니다. 스타일은 주로 CSS 스타일로 구성됩니다.
    동작: 페이지와 사용자 간의 상호 작용을 나타내며 주로 JS 부분으로 구성됩니다.
    W3C:

  W3C
  • 은 웹 표준, 즉 코드 사양

    구조 요구 사항

    1. 라벨 문자는 소문자여야 합니다.
  • 2. 라벨은 닫혀 있어야 합니다.
    3. 라벨은 임의로 중첩될 수 없습니다.
    요구 사항 성능 및 동작을 위해
    1 외부 링크 사용을 권장합니다. CSS 및 js 스크립트는 구조와 성능, 구조와 동작의 분리를 실현하여 페이지의 렌더링 효율성을 향상시키고 웹 콘텐츠를 더 빠르게 표시할 수 있습니다

  • 브라우저 반응형 레이아웃을 구현하는 방법은 무엇입니까?
미디어 쿼리 사용(@media)

• flex elastic 레이아웃 사용

  백분율 단위 사용
  • rem 단위 사용
  • VH, HW 단위 사용
  • CSS 선택기와 우선순위를 이해하고 계십니까?
• 일반적으로 사용되는 CSS 선택기
  ID 선택기, 클래스 선택기, 태그 선택기, 속성 선택기, 의사 클래스 선택기, 하위 선택기

  • 가중치 나누기

  • 같은 수준에서:
    !중요 > 인라인 스타일 > ID 선택기 > 클래스 선택기 > (태그 선택기, 의사 클래스 선택기, 속성 선택기)
  다양한 수준에서:

  일반적으로 가중치 값이 높을수록 우선순위가 높지만, 구체적인 가중치 값 구분이 없어서 대부분의 개발에서는 레벨이 깊어질수록 우선순위가 높아집니다.

• 에 대한 생각을 이야기해 보세요. 리플로우와 다시 그리기를 이해하나요?

  • 리플로우란 무엇인가요?

    • 요소의 너비와 높이, 레이아웃, 표시 또는 숨기기 또는 요소 내부의 텍스트 구조가 변경되어 페이지를 다시 작성해야 하는 경우 리플로우가 발생합니다.

  • 다시 그리기란 무엇인가요?

    • 요소의 너비, 높이, 레이아웃, 표시 또는 숨기기는 변경되지 않고 요소의 모양 스타일만 변경되면 다시 그리기가 발생합니다.

    • 리플로우는 언제 수행되나요?
      보이는 DOM 요소가 추가되거나 삭제될 때
      요소의 위치가 변경됩니다.
      요소의 크기가 변경됩니다.
      콘텐츠가 변경됩니다.
      페이지가 처음으로 렌더링될 때

    • 언제 다시 그려질까요?

      관련 CSS 스타일 목록: 색상, 배경, 배경 크기, 가시성, 상자 그림자

• 불투명도: 0, 가시성: 숨김, 디스플레이: 없음 차이점은 무엇입니까?

  • opacity=0, 요소는 숨겨지지만 페이지 레이아웃은 변경되지 않습니다. 또한 요소가 클릭 이벤트와 같은 일부 이벤트에 바인딩된 경우 이 영역을 클릭하면 클릭 이벤트가 트리거될 수도 있습니다

  • visibility=hidden, 요소가 숨겨지지만 페이지 레이아웃은 변경되지 않지만 요소에 바인딩된 이벤트는 트리거되지 않습니다.

  • display=none, 요소가 숨겨지고 페이지 레이아웃이 실행됩니다. 페이지에서 요소를 삭제하는 것과 같습니다

• css 전처리기

  • less
  • sass

• <img alt="수집할 가치가 있는 선택된 웹 프런트엔드 인터뷰 질문을 공유하세요(답변 포함)." > <img alt="수집할 가치가 있는 선택된 웹 프런트엔드 인터뷰 질문을 공유하세요(답변 포함)." >的 title 和 alt 有什么区别

  • 通常当鼠标滑动到元素上的时候显示
  • alt 是<img alt="수집할 가치가 있는 선택된 웹 프런트엔드 인터뷰 질문을 공유하세요(답변 포함)." >
  일반적으로 마우스가 요소 위로 슬라이드할 때 표시됩니다
• alt는 <img alt="수집할 가치가 있는 선택된 웹 프런트엔드 인터뷰 질문을 공유하세요(답변 포함)." >의 고유 속성입니다. 이미지 콘텐츠에 대한 동등한 설명이며 이미지에 사용됩니다. 디스플레이를 로드할 수 없습니다. 이미지를 읽으려면 화면 판독기가 필요합니다. 순전히 장식적인 이미지를 제외하고 의미 있는 값을 설정해야 검색엔진이 분석에 집중하게 되므로 이미지의 접근성을 높일 수 있습니다.

  인라인 요소와 블록 수준 요소란 무엇인가요? img는 어떤 요소에 속하나요

  
  
  block element
  
  address - address
  blockquote - block quote
  center - center alignment block
  dir - 디렉토리 목록
  div - 일반적으로 사용되는 블록 레벨도 CSS 레이아웃의 주요 태그입니다
  dl - 정의 목록
  fieldset – 양식 제어 그룹
  form – 대화형 양식
  h1 – 제목
  h2 – 부제
  h3 – 레벨 3 제목
  h4 – 레벨 4 제목
  h5 – 레벨 5 제목
  h6 – 레벨 6 제목
  hr – 가로 구분선
  isindex – 입력 프롬프트
  메뉴 – 메뉴 목록
  noframes – 프레임 선택적 콘텐츠, (프레임을 지원하지 않는 브라우저의 경우 이 차단 콘텐츠 표시)
  noscript – 선택적 스크립트 콘텐츠 (스크립트를 지원하지 않는 브라우저의 경우 이 콘텐츠 표시)
  ol – 정렬된 양식

  p – 단락

  사전 – 서식 있는 텍스트

  표 – 표

  ul – 정렬되지 않은 목록

  
  
  인라인 요소
  
  a – 앵커
  abbr – 약어
  두문자어 – 첫 글자
  b – 굵게(권장하지 않음)
  bdo – bidi override
  big – 큰 글꼴
  br – 줄 바꿈
  cite – quote
  code – 컴퓨터 코드(소스 코드 인용 시 필요)
  dfn – 필드 정의
  em – 강조
  글꼴 – 글꼴 설정(권장하지 않음)
  i – 기울임꼴
  img – 그림
  입력 – 입력 상자
  kbd – 키보드 텍스트 정의
  레이블 – 테이블 레이블
  q – 짧은 인용
  s – 밑줄(권장하지 않음)
  samp – 정의 샘플 컴퓨터 코드
  선택 – 항목 선택
  작은 – 작은 글꼴 텍스트
  범위 – 일반적으로 사용되는 인라인 컨테이너, 텍스트 내의 블록 정의
  파업 – 밑줄
  강함 – 굵은 강조
  하위 – 아래 첨자

  sup – 위 첨자

  textarea - 여러 줄 텍스트 입력 상자

  tt - 텔렉스 텍스트

  u - 밑줄

• img는 인라인 대체 요소이며 그 효과는 블록 요소와 동일합니다.
  • 폼에서 읽기 전용과 비활성화의 차이점
  • 
    
    공통점: 사용자가 내용을 변경하는 것을 방지합니다. in the form
    
  차이점:
  1. 읽기 전용은 입력 및 텍스트 영역에만 유효하지만 비활성화는 라디오 및 체크박스를 포함한 모든 양식 요소에 유효합니다
2. 읽기 전용은 포커스를 얻을 수 있지만 텍스트 상자 세트는 수정할 수 없습니다. bydisabled가 포커스를 얻을 수 없습니다

• Browser

  
  1. 전체 프로세스에서 일어나는 일
  
  
  도메인 이름 확인
  tcp 3방향 핸드셰이크 시작

  tcp 연결을 설정한 후 http 요청을 시작합니다

  서버가 http 요청에 응답하고, 브라우저는 html 코드를 얻습니다
브라우저는 html 코드를 구문 분석하고 html 코드에 있는 리소스를 요청합니다
• 브라우저는 페이지를 렌더링하여 사용자에게 표시합니다
  🎜🎜🎜 2. 쿠키의 단점🎜

  각 특정 도메인 이름에서 생성되는 최대 쿠키 수에는 제한이 있습니다.
  IE와 Opera는 최근에 가장 적게 사용된 쿠키를 지우고 Firefox는 무작위로 쿠키를 지웁니다.
  호환성을 위해 일반적으로 최대 쿠키 크기는 4096바이트입니다.
  보안 문제, 쿠키가 하이재킹되면 모든 세션 정보를 얻을 수 있습니다

• 3. 주류 브라우저 및 커널

  Google chrome: webkit/blink
  safari: webkit
  IE: trident
  firefox: gecko
  Opera: presto/webkit/blink

• 4. sessionStorage와 localStorage의 차이점

  sessionStorage는 세션에 로컬로 데이터를 저장하는 데 사용됩니다. 세션 및 시기 세션이 종료된 후 데이터가 삭제됩니다.
  localStorage는 데이터가 적극적으로 삭제되지 않는 한 영구 로컬 저장소에 사용됩니다.

• 5 bfc 사양에 대한 이해에 대해 이야기해 주세요.

  bfc는 블록 서식 컨텍스트, 즉 서식 컨텍스트입니다.
  bfc는 레이아웃을 결정하는 데 사용되는 페이지 CSS 시각적 렌더링의 일부입니다. 블록박스와 플로팅 상호작용 영역의 범위
  bfc의 가장 중요한 효과 중 하나는 bfc 내부와 외부 요소를 서로 격리하여 내부 요소와 외부 요소의 위치가 서로 영향을 미치지 않도록 하는 것입니다

• 6 페이지 로딩 시간을 줄이는 방법을 세 가지 이상 말해 보세요.

  페이지에서 반복되는 http 요청을 최소화하세요.
  파일 헤더에 CSS 스타일을 배치하고 파일 끝에 js 스크립트를 배치하세요. js 및 css 코드 병합
  서버에서 gzip 압축 활성화
  

• 7. 웹 사이트 성능을 최적화하는 방법은 무엇입니까?
  콘텐츠 측면
  • HTTP 요청 감소: 파일 병합, CSS 스프라이트, 인라인 이미지
    • DNS 쿼리 감소: DNS 캐시, 호스트 이름의 올바른 수에 리소스 배포
    • DOM 요소 수 감소
  서버 Aspect
  • CDN 사용
    • Etag 구성
    • 구성 요소에 Gzip 압축 사용
  쿠키 Aspect
  • 쿠키 크기 줄이기
  css Aspect
  • 스타일시트를 페이지 상단에 배치
    • CSS 표현식을 사용하지 마세요.
    • <link> 不使用 @import
  Javascript 관점 사용
  • 스크립트를 페이지 하단에 배치
    • 외부에서 javascript 및 css 도입
    • javascript 및 css 압축
    • 불필요한 스크립트 삭제
    • DOM 액세스 줄이기
  이미지 측면
  • 이미지 최적화: 실제 색상 요구에 따라 색상 심도 및 압축을 선택하세요.
    • CSS 스프라이트 최적화
    • HTML에서 이미지를 늘리지 마세요
• 8.
  일시적인 경우에는 런타임에만 사용할 수 있는 메모리에만 데이터를 저장하면 됩니다.
  • 영구 저장소는 브라우저 측과 서버 측으로 나눌 수 있습니다.
  • 브라우저:
    • 쿠키: 일반적으로 사용됩니다. 저장 사용자 ID, 로그인 상태 등은 자동으로 http에 저장됩니다. 크기의 상한은 4K입니다.
      • localStorage/sessionStorage: 장기 저장/창 닫기 및 삭제. 크기 제한은 4~5M
      • indexDB
    server
    • 분산 캐시 redis
      • database
• 9.
  get: 캐시, 요청 길이가 제한되어 있으며 기록에 저장됩니다.
  • 부작용 없음(리소스가 수정되지 않음), 멱등성(요청 수는 리소스와 관련 없음) 시나리오
  post: 보안, 빅데이터, 기타 다양한 인코딩 유형
• 10. 보안 문제가 있나요?
  XSS 공격: 악성 코드 삽입
  • cookie 설정 httpOnly
    • 페이지의 입력 내용과 출력 내용을 이스케이프합니다
  CSRF: 크로스 사이트 요청 위조, 보호:
  • get은 데이터를 수정하지 않습니다
    • 차단되지 않음 제3자 웹사이트가 사용자의 쿠키에 접근할 때
    • 화이트리스트를 설정하고 제3자 웹사이트의 요청을 받지 마세요
    • 확인 요청

성능 최적화

• 1. 성능 최적화의 측면은 무엇인가요?
  리소스 압축 및 병합, HTTP 요청 감소
  • 비핵심 코드의 비동기 로딩
  • 브라우저 캐시 활용
  • CDN 사용
  • DNS 사전 확인
• 2. 비동기 로딩?
  동적 스크립트 로딩
  • defer
  • async
• 3. 로딩 방법의 차이점은 무엇인가요?
  defer는 HTML이 여러 개 있는 경우 로드 순서대로 실행됩니다.
  • async는 로드된 후 즉시 실행됩니다. 4. 사전 로딩?
  • • 在开发中，可能会遇到这样的情况。有些资源不需要马上用到，但是希望尽早获取，这时候就可以使用预加载。
    • 预加载其实是声明式的 fetch ，强制浏览器请求资源，并且不会阻塞 onload 事件，可以使用以下代码开启预加载
    • <link rel="preload" href="http://example.com">
    • 预加载可以一定程度上降低首屏的加载时间，因为可以将一些不影响首屏但重要的文件延后加载，唯一缺点就是兼容性不好。

  • 5、DNS 预解析?

    • DNS 解析也是需要时间的，可以通过预解析的方式来预先获得域名所对应的 IP。
      <meta http-equiv="'x-dns-prefetch-control'" content="'on'">
<link rel="dns-prefetch" href="//yuchengkai.cn">
    • 在https协议中默认a标签不会开启预解析,因此需要手动设置meta

  • 6、懒执行?
    懒执行就是将某些逻辑延迟到使用时再计算。该技术可以用于首屏优化，对于某些耗时逻辑并不需要在首屏就使用的，就可以使用懒执行。懒执行需要唤醒，一般可以通过定时器或者事件的调用来唤醒。

  • 7、懒加载?
    懒加载就是将不关键的资源延后加载。

    懒加载的原理就是只加载自定义区域（通常是可视区域，但也可以是即将进入可视区域）内需要加载的东西。对于图片来说，先设置图片标签的 src 属性为一张占位图，将真实的图片资源放入一个自定义属性中，当进入自定义区域时，就将自定义属性替换为 src 属性，这样图片就会去下载资源，实现了图片懒加载。

    懒加载不仅可以用于图片，也可以使用在别的资源上。比如进入可视区域才开始播放视频等等。

  react面试题

  1、什么时候使用状态管理器?

  • 从项目的整体看
    • 目用户的使用方式复杂
    • 不同身份的用户有不同的使用方式（比如普通用户和管理员）
    • 多个用户之间可以协作
    • 与服务器大量交互，或者使用了 WebSocket
    • View 要从多个来源获取数据
  • 从组件角度看
    • 某个组件的状态，需要共享
    • 某个状态需要在任何地方都可以拿到
    • 一个组件需要改变全局状态
    • 一个组件需要改变另一个组件的状态
  • 组件有相当大量的，随时间变化的数据
  • state 需要有一个单一可靠数据源
  • 所有 state 放在顶层组件已经无法满足需求了

  2、说说 React 有什么特点?

  • 它使用**虚拟 DOM **而不是真正的 DOM。
  • 它可以用服务器端渲染。
  • 它遵循单向数据流或数据绑定

  3、列出 React 的一些主要优点?

  • 它提高了应用的性能
  • 可以方便地在客户端和服务器端使用
  • 由于 JSX，代码的可读性很好
  • React 很容易与 Meteor，Angular 等其他框架集成
  • 使用 React，编写 UI 测试用例变得非常容易

  4、什么是 JSX?

  • 它 JSX 是 J avaScript XML 的简写。是 React 使用的一种文件，它利用 JavaScript 的表现力和类似 HTML 的模板语法。这使得 HTML 文件非常容易理解。此文件能使应用非常可靠，并能够提高其性能
  • 例子

    render() {
    	return(
    		<div>
    			<h1> Hello World </h1>
    		</div>
    	)
    }

  5、说说为什么浏览器无法读取 JSX?

  • 浏览器只能处理 JavaScript 对象，而不能读取常规 JavaScript 对象中的 JSX。所以为了使
    浏览器能够读取 JSX，首先，需要用像 Babel 这样的 JSX 转换器将 JSX 文件转换为
    JavaScript 对象，然后再将其传给浏览器

  6、你理解“在 React 中，一切都是组件”这句话?

  • 组件是 React 应用 UI 的构建块。这些组件将整个 UI 分成小的独立并可重用的部分。每个
    组件彼此独立，而不会影响 UI 的其余部分

  7、 React 中 render()的目的?

  • 每个 React 组件强制要求必须有一个 render()。它返回一个 React 元素，是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素，则必须将它们组合在一个封闭标记内，例如<form></form>、<group></group>、<div> 等。此函数必须保持纯净，即必须每次调用时都返回相同的结果<p>8、什么是 Props?</p> <ul><li>Props는 React의 속성을 줄인 말입니다. 읽기 전용 구성 요소이므로 순수하게 유지되어야 합니다. 즉, 변경할 수 없습니다. 이는 항상 애플리케이션 전체에서 상위 구성 요소에서 하위 구성 요소로 전달됩니다. 하위 구성 요소는 소품을 상위 구성 요소로 다시 보낼 수 없습니다. 이는 단방향 데이터 흐름을 유지하는 데 도움이 되며 동적으로 생성된 데이터를 표시하는 데 자주 사용됩니다</li></ul> <p>9. </p> <ul><li>상태는 React 구성요소의 핵심이자 데이터 소스입니다. 가능한 한 단순해야 합니다. 기본적으로 상태는 구성 요소의 표현과 동작을 결정하는 개체입니다. Props와 달리 변경 가능하며 동적 및 대화형 구성 요소를 생성합니다. this.state()를 통해 접근할 수 있습니다. </li></ul> <p>10. 상태와 Prop을 구별합니까?</p> <table> <thead><tr class="firstRow"> <th>conditions</th> <th>State</th> <th>Props</th> </tr></thead> <tbody> <tr> <td>부모 구성 요소의 초기 값을 수락합니다</td> <td>예</td> <td>예</td> </tr> <tr> <td>상위 구성 요소는 값을 변경할 수 있습니다. </td> <td>No</td> <td>Yes</td> </tr> <tr> <td>컴포넌트에 기본값 설정 </td> <td>No</td> <td>Yes</td> </tr> <tr> <td>컴포넌트 내부 변경 </td> <td>Yes</td> <td>No</td> </tr> <tr> <td>하위 컴포넌트의 초기값 설정 </td> <td>예 </td> <td>예 </td> </tr> <tr> <td>하위 구성 요소 내부 변경</td> <td>아니요</td> <td>예</td> </tr> </tbody> </table> <p>11. 컴포넌트 상태를 업데이트하는 방법</p> <ul><li> <code>this.setState()을 사용하여 컴포넌트 상태를 업데이트하세요

  12. React 컴포넌트 수명 주기의 단계는 무엇인가요?

  • React 컴포넌트의 수명 주기 세 가지 단계가 있습니다:
    • 초기 렌더링 단계: 구성 요소가 인생 여정을 시작하고 DOM에 들어가려는 단계입니다.
    • 업데이트 단계: 구성 요소가 DOM에 추가되면 소품이나 상태가 변경될 때만 업데이트되고 다시 렌더링될 수 있습니다. 이 단계에서만 발생합니다
    • 언로드 단계: 이는 구성 요소 수명 주기의 마지막 단계로, 구성 요소가 DOM

  에서 제거됩니다. 13 React의 참조에 대해 무엇을 알고 있나요?

  • Refs are React 에 인용된 약어입니다. 이는 구성 요소 렌더링 구성 함수에 의해 반환되는 특정 React 요소 또는 구성 요소에 대한 참조를 저장하는 데 도움이 되는 속성입니다. render()에서 반환된 특정 요소나 구성 요소에 대한 참조입니다. DOM 측정을 수행하거나 구성 요소에 메서드를 추가해야 할 때 유용합니다.
  • 참조를 사용해야 하는 상황을 나열해 보세요.
    • 포커스, 텍스트 선택 또는 미디어 재생을 관리해야 할 때
    • 트리거된 애니메이션
    • party DOM 라이브러리 통합

  14. React에서 코드를 모듈화하는 방법은 무엇입니까?

  • 내보내기 및 가져오기 속성을 사용하여 코드를 모듈화할 수 있습니다. 서로 다른 파일에 컴포넌트를 별도로 작성하는 데 도움이 됩니다

  15. 고차 컴포넌트 HOC란 무엇인가요?

  • 고차 컴포넌트는 컴포넌트 로직을 재사용하는 고급 방법이며 React에서 파생된 컴포넌트 패턴입니다. HOC는 내부에 다른 구성요소를 포함하는 사용자 정의 구성요소입니다. 하위 구성 요소가 제공하는 모든 역학을 허용할 수 있지만 입력 구성 요소의 동작을 수정하거나 복사할 수는 없습니다. HOC를 "순수한" 구성 요소로 생각할 수 있습니다.

  16. HOC로 무엇을 할 수 있나요?

  • HOC는 다양한 작업에 사용할 수 있습니다.
    • 코드 재사용, 논리 및 부트스트래핑 추상화 사용
    • 렌더 하이재킹
    • 상태 추상화 및 제어
    • Props 제어

  17. React에서 키의 중요성은 무엇인가요?

  • key는 UI를 구동하는 고유한 가상 DOM 요소와 해당 데이터를 식별하는 데 사용됩니다. 이는 현재 DOM에 있는 모든 요소를 ​​재활용하여 React가 렌더링을 최적화하는 데 도움이 됩니다. 이러한 키는 고유한 숫자나 문자열이어야 하며 React는 요소를 다시 렌더링하는 대신 단순히 요소의 순서를 변경합니다. 이렇게 하면 애플리케이션의 성능이 향상될 수 있습니다

  18. MVC 프레임워크의 주요 문제점은 무엇입니까?

  • 주요 DOM 작업이 매우 비쌉니다
  • 프로그램이 느리고 비효율적으로 실행됩니다
  • 심각한 메모리 낭비
  • 순환으로 인해 dependency, 컴포넌트 모델은 모델과 뷰를 중심으로 생성되어야 합니다

  19. Flux에 대해 설명해 주시겠습니까?
  

  • Flux는 단방향 데이터 흐름을 강제하는 아키텍처 패턴입니다. 파생된 데이터를 제어하고 모든 데이터 권한이 있는 중앙 저장소를 사용하여 여러 구성 요소 간의 통신을 가능하게 합니다. 애플리케이션 전체의 데이터 업데이트는 여기에서만 발생해야 합니다. Flux는 애플리케이션에 안정성을 제공하고 런타임 오류를 줄입니다.

  20. "단일 소스"란 무엇을 이해합니까?

  • Redux는 "저장소"를 사용하여 프로그램의 전체 상태를 동일한 장소에 저장합니다. 따라서 모든 구성 요소의 상태는 저장소에 저장되며 저장소 자체에서 업데이트를 받습니다. 단일 상태 트리를 사용하면 시간 경과에 따른 변경 사항을 더 쉽게 추적하고 프로그램을 디버깅하거나 검사할 수 있습니다.

  21. Redux의 구성 요소를 나열해 보세요.

  • Redux는 다음 구성 요소로 구성됩니다.
    • Action 이는 발생한 일을 설명하는 데 사용되는 객체입니다.
    • Reducer 상태가 어떻게 변할지 결정하는 곳입니다
    • Store 전체 프로그램의 상태/객체 트리는 Store
    • View에 저장되며 Store

  22 Redux에서 Store의 의미는 무엇입니까?

  • Store는 JavaScript 객체입니다. 저장할 수 있는 프로그램의 상태이며 상태에 액세스하고 작업을 예약하고 리스너를 등록하는 방법을 제공합니다. 애플리케이션의 전체 상태/객체 트리는 단일 저장소에 보관됩니다. 따라서 Redux는 매우 간단하고 예측 가능합니다. 미들웨어를 저장소에 전달하여 데이터를 처리하고 저장소 상태를 변경하는 다양한 작업을 기록할 수 있습니다. 모든 작업은 Reducer를 통해 새로운 상태를 반환합니다.

  결과 예측성

  서버 측 렌더링
  • 테스트 용이 -
  • 24. 라우팅?
  • React Routing은 애플리케이션에 새로운 화면과 흐름을 추가하는 데 도움이 되는 React를 기반으로 구축된 강력한 라우팅 라이브러리입니다. 이렇게 하면 URL이 웹페이지에 표시된 데이터와 동기화된 상태로 유지됩니다. 표준화된 구조와 동작을 유지하는 역할을 하며 단일 페이지 웹 애플리케이션을 개발하는 데 사용됩니다. React 라우팅에는 간단한 API가 있습니다.
  25. React의 렌더링 원리에 대해 어떻게 이해하고 계시나요?
  • 단방향 데이터 흐름. React는 MVVM 프레임워크로 간단히 말하면 MVC 패턴 아래 프런트엔드 부분에서 데이터 레이어와 뷰 레이어를 분리합니다. 단방향 데이터 흐름은 데이터 계층의 변경 사항이 뷰 계층의 변경 사항에만 영향을 미칠 수 있으며 반대 방향으로는 영향을 미칠 수 없음을 의미합니다(양방향 바인딩 제외)
  • 데이터 기반 뷰. 페이지의 DOM에는 주의를 기울일 필요가 없고 데이터에만 주의하면 됩니다
  • 렌더링 프로세스, 수명 주기...
  • setState()는 성능 향상을 위해 대부분의 경우 비동기적으로 실행됩니다.

  26. React에서 구성 요소를 만드는 세 가지 방법은?

  • React.createClass(), ES6 클래스 및 상태 비저장 함수입니다.

  JQuery

  • jQuery의 몇 가지 일반적인 함수 이름과 그 의미는 무엇입니까?
    (1) get()은 일치하는 모든 DOM 요소 집합을 얻습니다.
    (2) get(index)는 하나를 얻습니다. 일치하는 요소의 인덱스는 어떤 일치 요소를 얻었는지 나타냅니다.
    (3) Append(content)는 각 일치 요소에 콘텐츠를 추가합니다.
    (4) after(content)는 각 일치 요소에 콘텐츠를 추가합니다.
    (5) ) html()/html(var)은 일치하는 요소의 html 콘텐츠를 가져오거나 설정합니다.
    (6) find(expr)는 지정된 표현식과 일치하는 모든 요소를 ​​검색합니다.
    (7) 바인딩(type ,[data], fn) 이벤트 처리 함수를 일치하는 각 요소의 특정 이벤트에 바인딩합니다.
    (8) empty()는 일치하는 요소 집합의 모든 하위 노드를 삭제합니다.
    (9) hover(over,out) 호버 이벤트를 모방하는 방법( 마우스가 객체 위로 이동합니다.
    (10) attr(name)은 첫 번째로 일치하는 요소의 속성 값을 가져옵니다.

  【관련 추천: jq tutorial】

  • jQuery는 무엇을 할 수 있나요?
    페이지의 요소를 가져오고, 페이지의 내용을 변경하고, 페이지를 새로 고치지 않고 페이지에 동적 효과를 추가합니다. .
    

  • DOM 트리에 HTML 요소를 추가하는 방법은 무엇입니까?

    appendTo() 메서드를 통해 지정된 DOM 요소 끝에 기존 요소나 새 HTML 요소를 추가할 수 있습니다.
    

  • jQuer는 무엇을 할 수 있나요?

    jQuery는 JavaScript를 사용하여 웹 페이지 특수 효과를 개발할 때 발생하는 복잡성 중 일부를 단순화하고 일반적인 작업을 자동화하고 복잡한 작업을 단순화하는 JavaScript 라이브러리 세트입니다.
    

    • jQuery의 역할
      문서 요소를 빠르게 가져오기
      • 아름다운 페이지 동적 효과 제공
      • 새로 고침되지 않는 Ajax 웹 페이지 만들기
      • JavaScript 언어에 향상된 기능 제공
      • 향상된 이벤트 처리
      • 웹 페이지 콘텐츠 변경
      • JQuery는 웹 페이지의 콘텐츠를 변경할 수 있습니다. 웹 페이지의 텍스트를 삽입하거나 웹 페이지 이미지를 삽입하거나 변환하는 등 jQuery는 원래 JavaScript 코드를 사용했던 방식을 단순화합니다.
        

  • JQuery의 장점 1. CSS 선택기를 사용하여 고속 요소 검색 동작을 제공합니다.
    2. 다양한 공통 작업을 표준화하고 다양한 브라우저의 호환성 문제를 해결할 수 있는 추상화 계층을 제공합니다.
    3. 복잡한 코드를 단순화하고 직렬 프로그래밍 모드를 제공하여 코드 작동을 크게 단순화합니다.
    

  (동영상 공유 학습:

  웹 프론트엔드 시작하기, jQuery 동영상 튜토리얼)