javascript - Bahagian hadapan ditanya tentang prestasi dan keselamatan Adakah terdapat ringkasan yang komprehensif?

Question

Prestasi dan keselamatan bahagian hadapan lebih penting dan sering disebut.

Beberapa pemahaman peribadi:

Prestasi

Penggabungan Fail
Mampatan Fail
Gambar Sprite
gzip [Secara amnya dikonfigurasikan pada nginx atau Apache di bahagian belakang, saya rasa bahagian depan tidak dapat dibincangkan]
Pemuatan dinamik
cdn (Secara amnya, terdapat kakitangan yang berdedikasi di bahagian operasi dan penyelenggaraan, bukan bahagian hadapan)

Keselamatan

suntikan sql [serangan merentas tapak]

Soalan:
Sila kongsi pengalaman anda dan rumuskan. Terima kasih!

天蓬老师 · Answer

Prestasi:
Prinsip 1: Kurangkan permintaan http, gabungkan imej, fail css
Prinsip 2: Penggunaan cache: gunakan CDN, gunakan js luaran dan css, tambah Exp. pengepala ires, kurangkan pertanyaan DNS, konfigurasikan Etag dan gunakan caching Ajax.
Prinsip 3: Minta lebar jalur: dayakan GZIP, perkemas js, alih keluar skrip pendua dan optimumkan imej.
Prinsip 4: Struktur halaman: letakkan gaya di kepala, dan js di bahagian bawah, muat semula keluaran dokumen secepat mungkin
Prinsip 5. Elakkan ungkapan css dan elakkan ubah hala
Malah, bermula dari senario perniagaan tertentu, anda akan faham lebih mendalam. Contohnya, halaman hasil carian
Keselamatan:
XSS

phpcn_u1582 · Answer

Saya kebetulan sedang bersiap untuk temu duga baru-baru ini, jadi saya menyusun beberapa pendapat saya sendiri

Prestasi

permintaan http

Idea utama untuk mengurangkan permintaan http adalah untuk mengurangkan bilangan sumber yang dipautkan dalam dokumen HTML:

Apabila projek masuk dalam talian, mampatkan, cantumkan dan bungkus CSS`JavaScript` dan fail lain untuk mengurangkan bilangan dan saiz fail sumberCSS`JavaScript`等文件压缩合并打包，减少源文件的数量和体积
将多张小图片制作成精灵图
将资源转换为base64编码
使用缓存可以加快网页打开速度，有效减少http请求
使用懒加载，按需加载对应资源

页面打开速度

使用CDN加载资源
将CSS放在页面头部，防止页面闪烁
将JavaScript异步或延迟加载，防止JavaScript运行阻塞页面加载
延迟请求首屏外的文件，即优先加载首屏内容。

执行效率

选择器从右向左解析，嵌套顺序不宜过深
JavaScript中减少作用域链的查找，避免使用eval和Function等性能缓慢的接口
DOM操作的代价是十分昂贵的，可以使用DocumentFragment

Buat berbilang gambar kecil menjadi sprite

Tukar sumber kepada pengekodan base64

Menggunakan cache boleh mempercepatkan pembukaan halaman web dan mengurangkan permintaan http dengan berkesan

Gunakan pemuatan malas untuk memuatkan sumber yang sepadan atas permintaan

Laju membuka halaman

🎜🎜Gunakan CDN untuk memuatkan sumber🎜🎜 🎜🎜Letak CSS di kepala halaman untuk mengelakkan halaman berkelip🎜🎜 🎜🎜Muat JavaScript secara tidak segerak atau malas untuk menghalang JavaScript daripada berjalan dan menyekat pemuatan halaman🎜🎜 🎜🎜 Tangguhkan permintaan untuk fail di luar skrin pertama, iaitu, muatkan kandungan skrin pertama dahulu. 🎜🎜 🎜 🎜Kecekapan pelaksanaan🎜 🎜 🎜🎜Pemilih dihuraikan dari kanan ke kiri, dan susunan bersarang tidak boleh terlalu dalam🎜🎜 🎜🎜Kurangkan carian rantai skop dalam JavaScript dan elakkan menggunakan antara muka berprestasi perlahan seperti eval dan Function🎜🎜 🎜🎜Operasi DOM sangat mahal Anda boleh menggunakan DocumentFragment untuk menyimpan sementara nod yang dimasukkan ke dalam dokumen pada satu masa🎜🎜. 🎜 🎜Keselamatan bahagian hadapan🎜 🎜Keselamatan bahagian hadapan terutamanya merujuk kepada isu keselamatan yang secara tidak langsung menjejaskan data pengguna melalui penyemak imbas. 🎜 🎜XSS🎜 🎜Skrip Merentas Tapak merujuk kepada penyerang berniat jahat memasukkan kod Skrip berniat jahat ke dalam halaman Web Apabila pengguna menyemak imbas halaman tersebut, kod Skrip yang dibenamkan dalam Web akan dilaksanakan, dengan itu mencapai tujuan menyerang pengguna secara berniat jahat , seperti mencuri kuki pengguna. 🎜Masalah dengan XSS adalah untuk mencari kelemahan yang boleh dimasukkan ke dalam tapak web sasaran untuk melaksanakan skrip Contohnya, jika sekeping kandungan penyuntingan tertentu disimpan terus dalam pangkalan data tanpa memproses input pengguna, maka apabila pengguna mengakses halaman tersebut. , skrip berniat jahat akan dipaparkan pada halaman Serangan yang sepadan mungkin dilakukan. 🎜 🎜CSRF🎜 🎜Pemalsuan permintaan merentas tapak, contohnya, fungsi pemadaman artikel tapak web sasaran menerima permintaan pemadaman artikel daripada pelanggan tapak web yang berniat jahat ini adalah merentas tapak dan dipalsukan (bukan niat pengguna tapak web sasaran). 🎜Kaedah pelaksanaannya adalah dengan mula-mula membina permintaan GET pada tapak web berniat jahat (disebabkan sekatan asal yang sama bagi Ajax, anda boleh menggunakan permintaan src img, dsb.), dan kemudian menipu pengguna tapak web sasaran untuk mengakses hasad laman web, dan kemudian permintaan yang sepadan akan dimulakan apabila mengakses (dan Dengan maklumat pengenalan pengguna yang sepadan seperti kuki), serangan juga akan berlaku pada masa ini🎜 🎜Rampasan operasi antara muka🎜 🎜Pemalsuan antara muka, mencuri maklumat pengguna, dll...🎜