Webフロントエンドのパフォーマンスの最適化の研究ノート2019

 

> A 03.png可逆圧縮、カラー画像の大容量、
WEBP、PNGよりも26%小さいロスレス、JPGよりも25%小さい非可逆

> 二08
でcssファイル< ヘッド>レーン、JSファイル内の < 身体>レーン

jsの変数と関数の最適化:
IDセレクタを使用してみてください
evalのを使用しないようにしてください
jsが可能な限りシンプルに保つ機能します
イベントスロットル機能を使用します
使用イベント委任

JSのアニメーションの最適化:
アニメーションJSの大規模な番号を追加しないでください
アニメーションCSS3を使用してみてください
キャンバスのアニメーションを使用してみてください
代わりにsetTimeout.setIntervalのアニメーションのrequestAnimationFrameの使用の合理化

キャッシュの使用の合理化:
DOMオブジェクトの使用の合理化
キャッシュリストの長さ
キャッシュ可能なAJAXを使用してください

> 09 JavaScriptのキャッシュを最適化する方法
IndexedDB:ストレージ・コントラストクッキーの数百メガバイトの十:キロバイトレベルのストレージ
インデックスデータベース
使用:
クライアントは、構造化データを大量に保存します
ネットワークに接続せずに使用
冗長、めったに変更されませんが、多くの場合、サーバーからデータを取得する任意の時間を避けるためにデータにアクセス

ローカルストレージ:
ローカルストレージ
使用:
キャッシュの静的ファイルの内容(例えばBaiduのM駅ホームなど)JS / CSS
キャッシュAPIインターフェースデータはめったに変更
キャッシュの位置情報
ページの特定の場所をブラウズ

> モジュラーロードスキームを10JS
ES6インポート
//square.js
エクスポート関数正方形(X){
リターンX * X
}
//main.js
import {square} from 'square';
console.log(square(10))//100
一些低级浏览器,ES6经过babel编译,才可以在其中使用

>11怎样减少浏览器的回流和重绘
CSS
避免过多样式嵌套
避免使用CSS表达式
使用绝对定位,可让动画元素脱离文档流
避免使用table布局
尽量不使用float布局
图片最好设置好width height
尽量简化浏览器不必要的任务,减少页面重新布局
使用viewport设置屏幕缩放级别
避免频繁设置样式,最好把新style属性设置完成后,进行一次性更改,比如把样式放在class下面,一次性写在元素上面
避免使用引起回流/重绘的属性,最好把相应变量缓存起来

JS
最小化回流和重排
为了减少回流发生次数,避免频繁或操作DOM,可合并多次对DOM修改,然后一次性批量处理
控制绘制过程和绘制区域
绘制过程开销比较大的属性设置应该尽量避免减少使用
减少绘制区域范围

>12DOM编程优化
控制DOM大小
合理的业务逻辑
延迟加载即将呈现的内容,懒加载

简化DOM操作
对DOM节点的操作统一处理后,再统一插入到DOM Tree中
可以使用fragment,尽量不再页面DOM Tree里直接操作
三大框架用虚拟DOM技术,diff算法简化减少DOM操作

おすすめ

転載: www.cnblogs.com/begin256/p/12005735.html