フロントエンドの最適化およびその他の知識

フロントエンドのパフォーマンスの最適化

ページの生成プロセスは、5つのステップに分けることができます。時間のかかる第四のステップと第五工程であります

DOMへのHTMLコード
CSSOMにCSSコード（CSSオブジェクトモデル）
DOMは、結合およびCSSOM、レンダリングツリーを生成する（各ノードの視覚的情報を含みます）
レイアウト（レイアウト）、すべてのすべてのレンダリングツリーノード来る平面合成を生成
画面上のレイアウト図（塗料）

再編成し、トリガーを再描画していきます、それは避けられません。しかし、彼らは非常にリソース集約されている、それは貧弱なWebパフォーマンスの根本的な原因です。ページのパフォーマンスを向上させる、再描画をトリガするために、できるだけ小さな「再配置」「再描画」周波数とコストを削減することです。

HTTPリクエストを削減
使用CDN
Expiresヘッダを追加します。
圧縮コンポーネント
頭の上にスタイルシート
下部のスクリプト
CSS式を使用しないでください
外部JavaScriptとCSSを使用しました
DNSルックアップを減らします
JavaScriptを合理化
リダイレクトを避けます
重複したスクリプトを削除します

パフォーマンスを向上させるためにナインのヒント

まず、読出し動作（または書き込み）のDOMの複数が一緒に配置する必要があります。書き込み操作を追加して、2つの操作の間に読まないでください。

パターンは転位によって得られた場合第二に、それは結果をキャッシュするのが最善です。次回は、ブラウザの使用だけでなく、再編成を避けるためにする場合。

第三に、スタイルを変更するにはバーであってもよいが、クラス、またはcsstext財産、一時間変化のスタイルを変更していません。

第四に、要素のスタイルを変更するには、むしろ真のメッシュDOMよりも、オフラインでDOMを使用するようにします。例えば、操作文書フラグメントオブジェクトは、オブジェクトは、DOMの完了後に添加されます。別の例として、クローン化されたノード上で動作する、cloneNodeを（）メソッドを使用して、その後、クローニングされ、元のノードを交換し。

第五に、素子の第1セットdisplay: none（1再配置を必要とし、再描画）、次にノード100回の動作、及び、最終的に（1再配置及び再描画を必要とする）表示を復元します。その結果、あなたは再レンダリングするために100回まで交換するために二回の潜在的に再レンダリングすることができます。

第六条、位置属性absoluteまたはfixed要素は、オーバーヘッドを再配置しているため、他の要素に与える影響を考慮せずに、比較的小さくなります。

第7条、必要なときだけ目に見えない要素が再配置と再描画には影響しないので、それは、要素の属性が表示されて表示されます。また、visibility : hidden唯一の影響力の再描画する要素は、再配置に影響を与えません。

このようように反応する、仮想DOMスクリプティングのライブラリを使用して第8条、。

再レンダリング両者を調整するためwindow.requestAnimationFrame（）、window.requestIdleCallback（）メソッドを使用して、IX、。

1.ページのDOMノードすぎて、何が起こるのだろうか？どのように最適化するには？

カトンの問題

参照リンクのこの部分：https://blog.csdn.net/u013929284/article/details/56483035

2.どのようにパフォーマンスの監視を行います

タイムラインパネルのクロームブラウザの開発者向けツール、「リフレッシュレート」を見ている最高のツールです。灰色の点がある左上隅が、これは録音ボタンで、それが赤色に変わります押してください。次に、Webページ上で何かをする、記録を完了するために、もう一度ボタンを押してください。

タイムラインパネルには、ビューの2種類が用意されています。バーでは、「イベントモード」（イベントモード）、費やした時間のイベントの表示の再レンダリングされ、垂直バーは、「フレームモード」（フレームモード）で、各フレームを表示します費やした時間。

注意：chrome57バージョンのタイムラインパネルには、パフォーマンスのパネルを変更した後、

あなたが判断することができ、そこから「イベントモード」、パフォーマンスの問題は、JavaScriptの実装、またはレンダリングの中の部分を見てください？

異なる色が異なるイベントを表します。

青：ネットワーク通信やHTMLの構文解析
黄：JavaScriptの実行
パープル：計算のスタイルやレイアウト、すなわち、転位
緑：再描画

どの色より、それがパフォーマンスコストを示しています。色、より大きな問題に長いです。

（）メソッドへwindow.requestAnimationFrame。これは、次の再描画されたときに実行いくつかのコードを置くことができます。

我々は使用することができますwindow.requestAnimationFrame()ので、次の再レンダリングに、すべての書き込み操作を分離を読み書きします。

関数doubleHeight（要素）{
   VAR currentHeight = element.clientHeight。
  window.requestAnimationFrame（関数（）{ 
    element.style.height =（currentHeight * 2）+ 'PX' ; 
  }）; 
} 
elements.forEach（doubleHeight）。

イベントページのスクロール（スクロール）リスナー関数は、それがwindow.requestAnimationFrameに適している（）、次の再レンダリングに延期。

$（ウィンドウ）.on（ 'スクロール'、関数（）{ 
   window.requestAnimationFrame（scrollHandler）; 
}）;

アニメーションが最も適しているシーン

3. SEOとセマンティック

検索エンジン最適化と訳さSEO（検索エンジン最適化）。SEO検索規則は、サイトは現在、関連する自然の検索エンジンにランクされている方法を改善するために、検索エンジンを利用するように設計されています。

検索エンジンは、最も重要なのページ三枚の大のラベルを見て：

title标签
keywords 标签
description标签

3.1 Webページの最適化

メインのウェブサイトの最適化インタフェース、明確かつ合理的なレイアウト、ナビゲーションバーが目を引くと実用的な、広告ページによって占められる大きな領域を使用しないでください。
コードタグの最適化、BaiduのSEOの最適化、生産拠点マップ。

3.2コンテンツの最適化

SEOの最適化は、コンテンツページを最適化されたロングテールのキーワード、に焦点を当てました。通常、約28法律はプライマリとセカンダリのキーワードの最適化を決定話しています。
別のページには、別のタイトル（タイトル）、記述（説明）やキーワード（キーワード）を設定します。
ポジショニングのタイトルのタイトルは：ホームタイトルと説明があり、列のページのタイトルと説明があり、コンテンツページは、タイトル、タイトルのない同じサイトに同時に複数のページを持っています。コンテンツ本体のグラフィックを組み合わせ、それぞれの画像のalt属性に追加SEOランキングでなく、周囲の映像関連するキーワードは、サプリメントを行います。コンテンツページタイトルの設定：ページコンテンツのタイトル名-サイト名。キーワードランキングを見つける必要があるページヘッダの内容は、コンテンツが同時に表示される必要があります。
記事の駅オリジナルタイトルの価値が非常に高いため、サイトには、情報の混乱を投稿しないで、定期的な更新を維持し、コンテンツを公開する必要があります。

3.3内部リンクの最適化

ウェブサイト内のすべてのリンクのために最適化された経路、SEOのランキングライン間のテキストベースのリンクを利用するためには、デッドリンクを表示されません。

3.4外部リンク操作

ナビゲーションは、サイトのナビゲーションは、一般的に分割して、サイトの不可欠な一部です主导航、副导航和分类导航。サイトのナビゲーションは、一般的に頭部、またはサイトの一番下に表示され、あるいは主に小さなクモクロールし、ユーザーはすぐに所望のセクタを見つけるの便宜のために、コンテンツのセクションにあります。ではsf、例えば、からSEOナビゲーションの観点テキストベースであるが、それは写真を撮るために最善ではないはずです、画像の使用に、そして、また、必要に応じて画像の一部であるべきtitleコンテンツとaltコンテンツ。

：このセクションはから取られhttp://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html

第二に、マイクロチャネルアプレット

アプレットおよびH5マイクロチャネルの違い：

アプレットとH5APP開発はいくつかの類似点を持っているが、マイクロ文字のチームはアプレットのためのユニークなファイル形式WXMLとWXSSそれぞれH5APP HTMLやCSSを提供します。

1.Javascript制限

セキュリティ上の理由から、渡す文字列でコードを実行する機能が無効になっています（新機能、evalを、ジェネレーター）。

小さなプログラムに起因するので、ブラウザのオブジェクトモデル（BOM）に関連するAPIに関連したブラウザで実行されていないだけで、リクエストヘッダで送信することができますされていないので、文書は、ウィンドウオブジェクトが使用できない、クッキーはありませんが、クッキーを渡すためにしています。

wx.request（{ 
    ヘッダ：{クッキー： '' }、
    URL： '' 、
    データ：{}、
    成功：関数（）{}、
    失敗：関数（）{} 
}）。

代わりのlocalStorageの2小さなプログラム記憶、各番組のsessionstorage.strageサイズが5Mであり、同期および非同期の両方をサポートします。

3. 5つの数量制限のページを開きます。

4.WXML、WXSSと伝統的なHTML、CSSは、いくつかの違いがあります。

三、gitの

図1 Gitのステータスコードコンバータ。

継続反復コードバージョンを確保するためにGitの管理コード、すなわち：支店コードブランチまたはプッシュコードをマージするための時間は、現在のコードのバージョンでなければならない、または競合します。（言い換えれば、Gitは確実にその日に現在のローカル・コード・アップ）
Gitは変更が提出したました、修正されたコード、gitの管理とメンテナンスの新しいバージョンがあります。
コードのGitのブランチコピーが保存されています。
押す：実際には、ローカルブランチを遠位ブランチライブラリに;プル：リモートブランチは、実際にはローカルブランチにマージされます。

2.便利な演算命令

2.1 gitリポジトリを作成します。

　　カレントディレクトリ内のディレクトリを生成.git Gitの初期化＃（即ち、ディレクトリがディレクトリ.git Gitのリポジトリを含みます）

2.2 Gitの登録ユーザー

　　用于在团队合作开发中，表明代码作者。

　　git config --global user.name XXX #用户名

　　git config --global user.email XXX #用户邮箱

　　git config --list #查看用户信息

注：加--global，全局设置。

2.3 向git库添加修改

　　git add [path］ #会把对应目录或文件，添加到stage状态
　　git add . #会把当前所有的untrack files和changed but not updated添加到stage状态

实际上是为修改内容添加index索引。

2.4 向版本库提交修改

　　git commit –m “XXXX” #提交修改,添加注释

注：git 提示：未有add红色字体，未有commit绿色字体，已提交则worktree是干净的

2.5 查看当前代码库的状态

　　git status

2.6 查看版本信息

　　实际是查看修改提交信息

　　git log

　　git log --graph #以图形化（节点）展示当前git库的提交信息。

2.7 查看指定版本信息

　　git show sdjf974654dd…. #(show后面为每次提交系统自动生成的一串哈希值)

　　git show sdji97 #一般只使用版本号的前几个字符即可

2.8 撤销修改

　　git reset
　　① 撤销整体修改
　　　　git reset --hard #回到原来编辑的地方,改动会丢失。（同样适用于团队对于其他人的修改恢复）
　　　　git reset --hard sdv143kvf…... #可回到指定的版本#(hard后面为每次提交系统自动生成的一串哈希值)
　　 git reset [path] 会改变path指定的文件或目录的stage状态，到非stage状态。
　　 git reset 会将所有stage的文件状态，都改变成非stage状态。
　　② 撤销某次修改
　　回退1个change的写法就是git reset HEAD^，
　　 2个为HEAD^^，
　　 3个为HEAD~3，以此类推。

2.9 向远端库推送修改（提交修改）

　　git push origin 分支名

2.10 暂存修改

　　git stash可以把当前的改动（stage和unstage，但不包括untrack的文件）暂存。

　　然后通过git stash list查看。

　　并通过git stash apply重新取出来。但apply之前要保证worktree是干净的。

3. Git团队开发常用操作指令

3.1 获取远端库项目

　　git clone/pull

3.2 团队开发的基本流程（多分支合并一个分支）

　　git add . #添加改动的文件
　　git commit #（提交至本地）
　　git pull --rebase #（将服务器项目与本地项目合并）
　　git push #（将本地项目上传至远端库）
　　注：在提交前要git pull --rebase 一下，确保当前的本地的代码为最新。

4. Git 分支管理

4.1 建立分支
　　git branch AAA   #建立分支AAA
4.2 分支切换
　　git checkout AAA   #从当前分支切换到AAA分支 (若AAA分支不存在，则自动新建)
4.3 将分支与主枝master合并
　　git checkout master   #（首先切换回主枝）
　　git merge AAA    #（将分支AAA与主枝合并）

注：git merge：默认情况下，Git执行"快进式合并"（fast-farward merge），会直接将Master分支指向Develop分支。
　　使用--no-ff参数后，会执行正常合并，在Master分支上生成一个新节点。为了保证版本演进的清晰（保持提交曲线为直线），建议采用这种方法。

4.4 当前分支查看
　　git branch #默认有master（也称为主枝）
　　git branch -r #查看远端库分支
　　git branch –a #查看当前所有分支（包括本地分支和远端库分支）

4.5 删除分支
　　git branch –d AAA #删除分支AAA

4.6 切下远端库A分支到本地库A分支

　　git checkout -b A origin/A （若本地A分支不存在，则自动新建）

注：上面只是一些基本的操作命令，更多的命令可通过帮助文档查询。
帮助文档的使用：man git- <需查询的指令> #（git后面有“-”）　如commit的查询为 man git-commit

5. 本地代码上传Github

Gtthub上建立远端仓库，复制下载链接。
本地指定目录下，Gitbash粘贴远端仓库下载链接拉取远端仓库代码。
复制本地需要提交的代码到远端仓库目录。
Git add、commit、push 提交本地代码至Github远端仓库。

本部分内容摘自：https://www.cnblogs.com/gavincoder/p/9073368.html

四、移动端

1. 自适应

本部分参考链接：https://segmentfault.com/a/1190000012225828

2. pwa

PWA（Progressive Web App）, 即渐进式web应用。PWA本质上是web应用，目的是通过多项新技术，在安全、性能、体验等方面给用户原生应用的体验。而且无需像原生应用那样繁琐的下载、安装、升级等操作。这里解释下概念中的“渐进式”，意思是这个web应用还在不断地进步中。因为目前而言，PWA还没有成熟到一蹴而就的程度，想在安全、性能、体验上达到原生应用的效果还是有很多的提升空间的。一方面是构建PWA的成本问题，另一方面是目前各大浏览器、安卓和IOS系统对于PWA的支持和兼容性还有待提高。

Service Worker

Service Worker是PWA的核心技术，它能够为web应用提供离线缓存功能，当然不仅如此，下面列举了一些Service Worker的特性：

基于HTTPS 环境，这是构建PWA的硬性前提。（LAMP环境网站升级HTTPS解决方案）
是一个独立的 worker 线程，独立于当前网页进程，有自己独立的 worker context
可拦截HTTP请求和响应，可缓存文件，缓存的文件可以在网络离线状态时取到
能向客户端推送消息
不能直接操作 DOM
异步实现，内部大都是通过 Promise 实现

3. 移动端手势

本部分参考链接：https://www.jianshu.com/p/0754d5daa27e

五、附加

1. 无限滚动方案

首页直接从服务器获取数据，将此数据进行缓存。
然后每次滚动页面，滚动到需要加载数据的临界点时，直接从缓存中提取下一页或者上一页的数据，加载到页面数据中。

优化--预加载

采用一种检测手段，检测用户会不会继续往下看，如果会，就进行预加载，不必等到用户翻到最底部

本部分参考链接：https://www.jianshu.com/p/3125ae249058

优化--图片懒加载

图片进入用户视野才会进行加载，而不是在dom树一构建好就进行加载

本部分参考链接：https://www.jianshu.com/p/d707565e5fa1

2. 如何处理兼容性问题

本部分参考链接：https://blog.csdn.net/qq_18826911/article/details/77678744

3. ES6 class与ES5 function区别及联系

关于构造器

在function定义的构造函数中，其prototype.constructor属性指向构造器自身
在class定义的类中，constructor其实也相当于定义在prototype属性上

重复定义

function会覆盖之前定义的方法
class会报错

原型或者类中方法的枚举

class中定义的方法不可用Object.keys(Point.prototype)枚举到
function构造器原型方法可被Object.keys(Point.prototype)枚举到，除过constructor
所有原型方法属性都可用Object.getOwnPropertyNames(Point.prototype)访问到

都可通过实例的__proto__属性向原型添加方法

推荐使用Object.getPrototypeOf()获取实例原型后再添加方法

class没有变量提升
class定义的类没有私有方法和私有属性

class静态方法与静态属性

class定义的静态方法前加static关键字
只能通过类名调用
不能通过实例调用
可与实例方法重名
静态方法中的this指向类而非实例
静态方法可被继承
在子类中可通过super方法调用父类的静态方法
class内部没有静态属性，只能在外面通过类名定义。

4. vue怎么监听数组

普通的watch

data() {
  return {
    frontPoints: 0
  }
},
watch: {
  frontPoints(newValue, oldValue) {
    console.log(newValue)
  }
}

数组的watch

data() {
  return {
    winChips: new Array(11).fill(0)
  }
},
watch: {
　　winChips: {
　　　　handler(newValue, oldValue) {
　　　　　　for (let i = 0; i < newValue.length; i++) {
　　　　　　　　if (oldValue[i] != newValue[i]) {
　　　　　　　　　　console.log(newValue)
　　　　　　　　}
　　　　　　}
　　　　},
　　　　deep: true
　　}
}

对象的watch

data() {
　　return {
　　　　bet: {
　　　　　　pokerState: 53,
　　　　　　pokerHistory: 'local'
　　　　}
  }
},
watch: {
　　bet: {
　　　　handler(newValue, oldValue) {
　　　　　　console.log(newValue)
　　　　},
　　　　deep: true
　　}
}

对象的具体属性

data() {
　　return {
　　　　bet: {
　　　　　　pokerState: 53,
　　　　　　pokerHistory: 'local'
　　　　}
  }
},
computed: {
　　pokerHistory() {
　　　　return this.bet.pokerHistory
　　}
},
watch: {
　　pokerHistory(newValue, oldValue) {
　　　　console.log(newValue)
　　}
}

5. 写过webpack loader吗

loader就是一个node模块，它输出了一个函数。当某种资源需要用这个loader转换时，这个函数会被调用。并且，这个函数可以通过提供给它的this上下文访问Loader API。

module.exports = function(src) {
  //src是原文件内容（abcde），下面对内容进行处理，这里是反转
  var result = src.split('').reverse().join(''); //edcba
  //返回JavaScript源码，必须是String或者Buffer
  return `module.exports = '${result}'`;
}

6. 微信网页版登录机制思考

本部分参考链接：https://www.jianshu.com/p/cc763dd2914e