フロントエンドのパフォーマンスの最適化とセキュリティ

パフォーマンスの最適化

あなたは、フロントエンドのパフォーマンスの最適化を聞いてきたこと？そして、唯一の方法を最適化します！実際には、重要なのは、我々がなぜ最適化したいということでしょうか？ただ、コードの品質を向上させるには？実際には、唯一の、例えば、ユーザ体験;などの経済的利益として...我々は見にズームインすることができます...

いくつかの一般的な方法

リクエストの数 - できるだけは - キーが外部リソースファイルをマージすることです

端末応答時間の80％は、フロントエンドに費やされ、コンポーネントがページにロードされているほとんどの時間：画像、スタイルシート、スクリプト、フラッシュ...これは、ページのスピードを加速するためにHTTPリクエストを削減するための鍵です

外部ファイルをマージし、例えば、一つにJS、CSSファイルを統合します
スプライト（CSSスプライトは）絵のリクエストを減らすことができます。
。イメージマップ：図片が一緒に複数あり、ナビゲーション座標を介して表示を制御します。ここでは古典的な例である、誰かが別のリンクが表示されます画像を選択します。
インライン画像：画像がBASE64符号化ビットに変換され、通常、比較的小さい画像
このような.cssファイル、.jsのファイル、.PNG ...一の以上のバンドルにパッケージ化するよう、各モジュールは、ニーズをプログラムすることができます。静的モジュールJavaScriptアプリケーションパッカーを- WebPACKの私たちがよくやって助けますこれはよく二次要求減らすことができ

、そのデータが、その後減少させることができるならば;読みやすさの利点への影響が、我々は背景にデータを要求するだけでなく、私たちのスピードを加速することができますバックエンドに質問を

ファイルサイズ - 小さい、より良い - キーが圧縮されています

例えば、我々は削除我々のコードをコメントします。スペースは削除;改行取り出し、少量の

合理的なキャッシュ
これは純粋フォアグラウンドではありません。キャッシュ内の背景...純粋なエネルギーがそれを読んでいなければなりません。それはキャッシュを更新することはできていないだろう、と決定するために慣れているユーザーのクリック数、セッション数に基づいているどのくらいの時間、キャッシュ時間...
非同期リクエスト

応答速度の改善：ジャンプを避け、またはのCache-Controlは、Expiresヘッダを追加すると、クライアントのキャッシュが返信ことであってもよく、応答を圧縮

遅延ロード - データ要求の量を減らし

遅延読み込み、ユーザーが左に見えるような、それをプルダウンしていない、ので、我々は遅延読み込みを使用することができます。不要なデータ要求を削減

事前にロードされた-データ要求の量が増加
遅延ロードと競合感じるかもしれない-遅延ロードを、実際には、これらは非常に包括的な分析を取る必要があります。

データ要求はもう少しすることができましょう;例えば、ページング機能として、ユーザーがより速くブラウズし、すぐにブラウザ上で終了し、その後、我々はすべてのデータをロードする必要があり、応答時間を短縮
無条件事前負荷：現在のWebページの読み込みが完了し、すぐに他のコンテンツをダウンロードして行きます。たとえば、Googleはすぐにすべての結果が正常にページがロードした後に使用される画像スプライトをダウンロードして行きます

プリロード・データが
ロードを期待している：ユーザーが頻繁に古いページにアクセスするため、このような状況は、一般的に、ウェブのデザイン変更で発生し、古い古いページの完全なローカルWebコンテンツ・キャッシュがこんなに早く現れると、新しいWebコンテンツはしませんでしたキャッシュは、デザイナーは、古いページのコンテンツに使用されるかもしれない新しいページのコンテンツの一部を事前にロードすることができ、この新しいページは、あなたがダウンロードする必要があるリソースの一部を持って生まれるされます。
ユーザーは、これらのデータの使用を見ていません。プロセス自体の複雑さなどの配慮を

効率的にそれを行うにはどのように、私たちはすべてを知っている理由

数据说话、运营部分、用户访问习惯.概率问题…

如何监控这些数据

上面的方法都是根据用户的访问情况和我们的业务需求来决定的；并不一定是可行的；所以我们要检测这些数据来确定我们的方案；提高我们的性能
1 日志
2. 埋点：有些数据到后台是获取不到的；请求我们肯定是知道用户点击的；但是比如游戏的位置需要我们前端趣确定的;
3. 统计：靠样本推测大的数据大的方向
4. 性能测试的工具

部署优化

再次强调第一条黄金定律，减少网页内容的下载时间。提高下载速度还可以通过CDN(内容分发网络)来提升。CDN通过部署在不同地区的服务器来提高客户的下载速度。如果你的网站上有大量的静态内容，世界各地的用户都在访问，那CDN是必不可少的。
离你近的服务器肯定越快；可以CDN节约机房的带宽…

p2p对等网络…在集中式网络中，服务器成为整个系统的屏颈，无论是容量，和计算机处理能力。但是在P2P网络是，这样的问都都不会出现。系统的资源，计算机能力和存储能力都是分布在所有的节点上的，理论上是这些能力是无限。也就是，客户端本身可以当做一个服务器使用
异构计算:不完全依赖于cpu；并不一定需要昂贵的服务器；比如廉价的电脑；专门的芯片

细讲前端性能优化

CSS

将样式表置顶;经样式表(css)放在网页的HEAD中会让网页显得加载速度更快，因为这样做可以使浏览器逐步加载已将下载的网页内容。这对内容比较多的网页尤其重要，用户不用一直等待在一个白屏上，而是可以先看已经下载的内容。
避免CSS表达式:这个很少用；注意即可
用<link>代替@import
避免使用Filters;这种滤镜的使用会导致图片在下载的时候阻塞网页绘制，另外使用这种滤镜会导致内存使用量的问题。
尽量少用复杂选择器尽量避免类似.a.b{}.list a{}以及其他一些复杂选择器，以提高整站整体CSS渲染。
记住这么个原则，页面刷新载入的时候，应避免页面元素的晃动、位移等，这些都是额外的重绘，会让你的CPU和风扇兴奋的。—张鑫旭
图片设置宽高；外部容器没有定死高宽，则图片在首次载入时候，占据空间会从0到完全出现，左右上下都可能位移，发生大规模的重绘。可以参见新浪微博载入时候页面高度随着图片显示不断变高的问题，这些都让浏览器重绘了，一是体验可能不好，二是烧CPU的。
**避免使用table布局。**即使一些小的变化将导致表格(table)中的所有其他节点回流。
动画效果应用到position属性为absolute或fixed的元素上,它们不影响其他元素的布局，所它他们只会导致重新绘制，而不是一个完整回流。这样消耗会更低。
10.避免设置多层内联样式我们都知道与DOM交互很慢。我们尝试在一种无形的DOM树片段组进行更改，然后整个改变应用到DOM上时仅导致了一个回流。同样，通过style属性设置样式导致回流。避免设置多级内联样式，因为每个都会造成回流，样式应该合并在一个外部类，这样当该元素的class属性可被操控时仅会产生一个reflow。

Javascript

把脚本置底，这样可以让网页渲染所需要的内容尽快加载显示给用户。
使用外部Javascript和CSS文件可以使这些文件被浏览器缓存，从而在不同的请求内容之间重用。
精简;就是将Javascript或CSS中的空格和注释全去掉;JS使用封装或则继承使得代码重用
localStorage本地存储与优化。两种实践。一是：大数据量交互，数据不怎么更新的，含版本控制机制，一次请求，之后高枕无忧；二是代替cookie实现某些功能，带过期时间管理，降低页面cookie大小
事件委托，避免过多的DOM元素的事件绑定,一般使用e.target
面向数据编程这样避免在document上直接进行频繁的DOM操作；可以减少回流和重绘。

HTML

不要在HTML中缩放图片
不要通过图片缩放来适应页面，如果你需要小图片，就直接使用小图片吧。
使用小且可缓存的favicon.ico;网站图标文件favicon.ico，不管你服务器有还是没有，浏览器都会去尝试请求这个图标。所以我们要确保这个图标

移动端

前端优化层出不穷，移动端大行其道的现在，我们可以说优化好移动端，PC端也将会更好。

长列表滚动优化
函数防抖和函数节流.设计到滚动等会被频繁触发的DOM事件，需要做好防抖和节流的工作。(节流可以想象一下，如果在做轮播图，下一张图片还没轮播过去，用户点击就开启了下一个定时器，在点击前两张图片还没轮播完。防抖上面说过，主要是避免额外的重绘)。它们都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。
使用touchstart、touchend代替click，click有300ms点击的延迟；现在的tap事件大都是封装，可以代替click
HTML的viewport设置；这是移动端的配置
开启GPU渲染加速；在3D渲染时，计算量较大，繁重，浏览器会开启显卡的硬件加速来帮助完成这些操作。所以，我们这里可以使用css中的translateZ设定，来欺骗浏览器，让其帮忙开启GPU加速，加快渲染进程。

总结

情報へのアクセスが来る;ので、私は学習過程で発生した何かを、この記事は非常によく書き込みないかもしれないが、それを自分で試してみる必要がありますが、本来の目的：

データ・レベルの最適化、ユーザーの習慣、行動に応じて、クリックしてください。そこに...テストサイトの特定の条件を
圧縮の圧縮、合併の合併
DOM操作およびレンダリングレベルの最適化
二次要求の削減

シンプルで、粗

セキュリティ

のより完全な理解と私は続ける...もっと

学習プロセスは、風のタッチを持って、学習の方法は、グリーンウェイになります。