免責事項：
著者：フロントエンドの小さな醤油
https://segmentfault.com/a/1190000018225708
小さな会社でし合肥で卒業した後、何の古いドライバは、技術的な雰囲気は、道路上で私は一人で技術を模索することはできません。上司は空気のみで城、混乱しの未来はどんな希望を見ないでしょう。それ以来、私は辞任を決定し、機会に新年に開始するために杭州に来て、ここではインターネット企業は今合肥数回する必要があります。。。。
私は、最初の3日間は、いくつかの企業が面接に来たときに、いくつかの比較的小さなサイズ、いくつかのスタートアップ企業は、いくつかのすでに良い開発し、今日の最近のインタビューの質問は、その複雑なディスクに、原因私の技術に集約するだけでなく、されます質問のほとんどは、Vueのの開発に関連しているので、主にVueのスタック。
MVVM開発モデルのご理解約1での話
MVVMはモデル、ビュー、ViewModelに3つに分割されています。
- モデル：代表的なデータモデル、データとビジネスロジック層は、モデルで定義されています。
- 表示：UIビューの代わりに、データを表示するための責任を負います。
- ViewModelに：モデルの変更は、ビューの更新処理ユーザインタラクションのデータを監視し、制御するための責任があります。
モデルとビューは直接関係なく、むしろ接触のViewModelを通じて、モデルとビューモデルの間のリンクを結合双方向のデータを持っていません。したがって、モデル層のデータの変更はリフレッシュビューをトリガーする際に、ユーザの相互作用の結果は、データがモデルに同期されます変更され表示します。
開発者が唯一、独自の運用DOMを必要とせずに、データのメンテナンス作業に集中する必要があるので、このモードは自動的に、モデルとビューのデータの同期を実現しています。
命令が持っている2. Vueの？
v-html、v-show、v-if、v-for等等。
3. V-IFおよびV-ショーの違いは何ですか？
V-表示のみ表示素子、ディスプレイプロパティトグルブロックとなしの制御と、V-場合DOMノードが存在または不在を制御します。一つだけのショーや、非表示時に、V-IFより合理的なを使用して、我々はパフォーマンスの詳細になりますV-ショーのコスト削減を使用して、多くの場合、表示/非表示の要素を切り替える必要がある場合。
ヴューの4簡単な応答原則
インスタンスがVueのが作成されるとき、VUEは、内部にゲッター/セッターとの依存関係の追跡にObject.definePropertyそれらと、属性データオプションを横断するプロパティがアクセスされ、変更されたときの変化に気づきます。各コンポーネントインスタンスは、対応するウォッチャープログラム例を有し、セッターが呼び出された後依存性は、それによってその関連コンポーネントが更新させる、再計算ウォッチャに通知するときに、レンダリングの組立工程で属性の依存関係として記録されます。
5. Vueがどのように内部の部品に結合双方向のデータを達成するために？
入力ボックスアセンブリ、ユーザ入力コンポーネント同期データ親ページがあると仮定する。
具体的なアイデア：親要素のサブアセンブリに、小道具で通知サブアセンブリ値は$ EMITを通過する親成分値の小道具を変更し、次のように、具体的に実装：
私たちは、親コンポーネントで二つのことをした、サブアセンブリは、最初の小道具を渡すために、第二、入力イベントをリッスンし、そのプロパティの値を同期します。そして、この2段階の操作は、さらに少し簡略化することができますか？答えはイエス、あなただけの親コンポーネントを変更する必要がありますさ：
Vモデルは、実際に私たちは、上記の2つのステップを完了するのに役立ちます。
6. Vueのどのプロパティの値の変化を監視するには？
たとえば、今、私たちは、データを監視するためにobj.a.の変更を必要とします Vueのは、あなたが行うことができ、オブジェクトのプロパティの変更を監視：
ディープ属性は、深いトラバーサルを示しますが、間違いなくOBJのプロパティ内のすべての変更を監視します、我々は望んでいないものを、ので、いくつかの変更を行います
方法はあり、によって計算することができますのみ達成：
依存性の変化は、それが新しい値を再計算されますときに達成される計算された特性を使用して。
7. Vueのは、解決する方法、オブジェクトの属性データに新しい属性を追加する場合はどうなりますか？
示例：
原因在于在Vue实例创建时， obj.b 并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新，这时就需要使用Vue的全局api—— $set()：
$set() 方法相当于手动的去把 obj.b 处理成一个响应式的属性，此时视图也会跟着改变了：
8. delete和Vue.delete删除数组的区别
delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
Vue.delete 直接删除了数组 改变了数组的键值。
9.如何优化SPA应用的首屏加载速度慢的问题？
- 将公用的JS库通过script标签外部引入，减小 app.bundel 的大小，让浏览器并行下载资源文件，提高下载速度；
- 在配置 路由时，页面和组件使用懒加载的方式引入，进一步缩小 app.bundel 的体积，在调用某个组件时再加载对应的js文件；
- 加一个首屏loading图，提升用户体验；
10. 前端如何优化网站性能？
1、减少 HTTP 请求数量
在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。
CSS Sprites
国内俗称CSS精灵，这是将多张图片合并成一张图片达到减少HTTP请求的一种解决方案，可以通过CSS的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。
合并 CSS 和 JS 文件
现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。
采用 lazyLoad
俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。
2、控制资源文件加载优先级
浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受 JS 加载影响。
一般情况下都是CSS在头部，JS在底部。
3、利用浏览器缓存
浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。
4、减少重排（Reflow）
基本原理：重排是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如果Reflow的过于频繁，CPU使用率就会急剧上升。
减少Reflow，如果需要在DOM操作时添加样式，尽量使用 增加class属性，而不是通过style操作样式。
5、减少 DOM 操作
6、图标使用 IconFont 替换
11. 网页从输入网址到渲染完成经历了哪些过程？
大致可以分为如下7步：
- 输入网址；
- 发送到DNS服务器，并获取域名对应的web服务器对应的ip地址；
- 与web服务器建立TCP连接；
- 浏览器向web服务器发送http请求；
- web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的url地址）；
- 浏览器下载web服务器返回的数据及解析html源文件；
- 生成DOM树，解析css和js，渲染页面，直至显示完成；
12. jQuery获取的dom对象和原生的dom对象有何区别？
js原生获取的dom是一个对象，jQuery对象就是一个数组对象，其实就是选择出来的元素的数组集合，所以说他们两者是不同的对象类型不等价。
13.カスタムメソッドを拡張する方法のjQuery
今の会社の面接の質問については、非常に基本的なものですが、いくつかのための研究の追求だけではそう簡単ではないかもしれない学生の原則を使用することはありません。したがって、我々は唯一の学習の広さを追求するだけでなく、深さの追求にはなりません。
「Webサイトのフロントエンドのパフォーマンスの最適化のパフォーマンスについて話す」を参照してください。