トピックの概要
- WEB理解と基準やW3Cの意識
- フルスクリーンのスクロール原則
- イベントループの理解
答えの対象
WEB理解と基準やW3Cの意識
- 簡単に言えば、Web標準は、構造、性能や動作に分けることができます。主な構造は、HTMLタグで構成されています。おそらく、我々が書くページ本体内のタグは、ページ構造のためであること人気のポイント。パフォーマンスは、CSSがより美的タグページで構成することができ、CSSスタイルシートを参照します。動作は、特定のページ及びユーザインタラクションを参照し、ページの構造や性能の変化は、主に、JSのが構成されています。ウェブは、一般的に三つの部分は、それがよりモジュールにするために、別々の標準です。しかし、一般的に農産物の挙動は、構造や性能の変化があるだろうが、また、これら三つの境界はそれほど明確ではありません
- 以下の点を含む：実際のプログラミングコード仕様の一部、すなわち標準化された要件からなるウェブのためのW3C標準
- :(構造要件のラベル仕様）は、SEOのための有用なページをクロールする検索エンジンの効率を向上させることができます
- 文字を小文字にラベル
- ラベルには、クローズします
- ネストされたラベルは、任意の許可されていません。
- チェーンのCSSスタイルシートとjsのスクリプトを使用してみてください。構造、性能や動作が準拠した、3つに分割されています。同時に、ページのレンダリング速度を向上させ、ユーザーの利便性を向上させます。
- スタイルは、ライン間のスタイルシートの使用を最小限に抑え、分離、IDタグとクラスの構造と性能は、テキストの意味を参照してください行うことが知られている名前と属性を、以下のラベル、負荷速くユーザーエクスペリエンスが向上し、コードのメンテナンスが容易な改正へ、単純です
- Webサイトのユーザビリティを向上させるために、それは印刷版の内容をコピーすることなく提供することができ、ページの内容を変更しないでください
フルスクリーンのスクロール原則
原則の主なアプリケーション：JSがイベントをリッスンスクロール、JS携帯端末のタッチモニタイベントが機能を絞る、DOM操作
実現
<div class="page-container"> <div class="page-item">1</div> <div class="page-item">2</div> <div class="page-item">3</div> </div>html, body { padding: 0; margin: 0; overflow: hidden; } .page-container { position: relative; top: 0; transition: all 1000ms ease; touch-action: none; } .page-item { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; border: 1px solid #ddd; }var container = document.querySelector('.page-container') // 获取根元素高度, 页面可视高度 var viewHeight = document.documentElement.clientHeight // 获取滚动的页数 var pageNum = document.querySelectorAll('.page-item').length // 初始化当前位置, 距离原始顶部距离 var currentPosition = 0 // 设置页面高度 container.style.height = viewHeight + 'px' // 向下滚动页面 function goDown () { if (currentPosition > - viewHeight * (pageNum - 1)) { currentPosition = currentPosition - viewHeight container.style.top = currentPosition + 'px' } } //初始化滚动事件 // 向上滚动页面 function goUp () { if (currentPosition < 0) { currentPosition = currentPosition + viewHeight container.style.top = currentPosition + 'px' } } //节流函数:即在规定时间内只会触发一次指定方法, 用于滚动时防止多次触发 function throttle (fn, delay) { let baseTime = 0 return function () { const currentTime = Date.now() if (baseTime + delay < currentTime) { fn.apply(this, arguments) baseTime = currentTime } } } //监听鼠标滚动 var handlerWheel = throttle(scrollMove, 1000) // firefox的页面滚动事件其他浏览器不一样 if (navigator.userAgent.toLowerCase().indexOf('firefox') === -1) { document.addEventListener('mousewheel', handlerWheel) } else { document.addEventListener('DOMMouseScroll', handlerWheel) } function scrollMove (e) { if (e.deltaY > 0) { goDown() } else { goUp() } } //监听移动端touch操作 var touchStartY = 0 document.addEventListener('touchstart', event => { touchStartY = event.touches[0].pageY }) var handleTouchEnd = throttle(touchEnd, 500) document.addEventListener('touchend', handleTouchEnd) function touchEnd (e) { var touchEndY = e.changedTouches[0].pageY if (touchEndY - touchStartY < 0) { // 向上滑动, 页面向下滚动 goDown() } else { goUp() } }
イベントループの理解
- シングルスレッドモデル：JSエンジンは複数のスレッドを持っていますが、エンジンが唯一のタスクを実行している間、他のタスクが一つだけのスレッド上で実行するために、そのエンジンの後ろに並んする必要があります。このスレッドは、メインスレッドと呼ばれています。
- イベントループのメカニズム：JS自体がない遅い、遅い読み込みであり、そのようなAjaxリクエストリターン結果を待っているなどの外部データを書き込みます。Ajaxの戻り結果を待っが出てきたし、その後ダウン実行した場合、それは長い時間がかかります。JS機構を設計したので、CPUは関係なく、IOの動作が、作業を中断し、IO操作が結果を返すまで、バックのタスクを実行し、保留中のタスクを続行することができます。同期タスクは、これらの条件が満たされているかどうか、メインスレッドに非同期タスクを切っチェックするために何度も何度も、エンジンを実行します。イベントループ・メカニズムと呼ばれるこのサイクル検査機構、。
- タスクキュー：JSエンジンが実行されているが、実行中のメインスレッドに加えて、非同期的にさまざまなタスクを中断される1つのまたは複数のタスクキューを提供します。まず、すべてが実行されるまで待つように、すべての同期タスク、タスクの同期を実行するためにメインスレッドは、それが、条件が満たされた場合には、非同期タスクを再入力メインスレッドが実行を開始するために、非同期タスク内のタスクキューに行くだろう、それは意志同期タスクになります。実行されるまで、次の非同期タスクを待ってから、メインスレッドが実行を開始します入力してください。タスクキューが空になると、プログラムの実行が終了します。
- 同期および非同期タスクのタスク：プログラムのすべてのタスクは、2つのカテゴリに分けることができます。
- 同期タスク：エンジンは、メインスレッドのタスクの実行のためにキューに入れられ、中断されていません。唯一の最初のタスクは、タスクを実行した後にする前に終了します。
- 非同期タスク：エンジンは、タスクキューの使命に、メインスレッドを入力しなくても、中断されます。タスクを実行することができます唯一の非同期のエンジンは、タスクは、メインスレッドを入力します。非同期タスクのコードの後方には、非同期タスクの終了を待たずにすぐに実行されます。