2011-01-04 13 views
8

के समान मुझे पता है कि इस तरह के तरह एक साधारण कार्यों बदल कर के रूप में वहाँ कई उपकरण है कि JavaScript फ़ाइलों मुश्किल होता में सक्षम हैं:को कम करने और Obsfucating सीएसएस जावास्क्रिप्ट

function testing() 
{ 
    var testing; 
    var testing2; 
    alert(testing+testing2); 
} 

में

function a(var a,b;alert(a+b);) 

मेरे सवाल यह है कि ऐसा कुछ ऐसा है जो सीएसएस/एचटीएमएल के साथ उपयोग के लिए मौजूद है (या क्या कोई ऐसा उपकरण है जिसका समान प्रभाव है)? विशेष रूप से, एक छोटाकरण/obfuscation उपकरण जो वास्तव में चर और नामों का नाम बदलता है और अतिरिक्त सफेद-स्थान इत्यादि को हटा देता है

और यदि ऐसा है - तो प्रदर्शन में लाभ दोनों सीएसएस/एचटीएमएल/जावास्क्रिप्ट minification/obfuscation में पठनीयता से अधिक होगा?

+0

निश्चित रूप से जब आप कुछ कम करते हैं, तो आप खिड़की से पूरी तरह से पठनीयता को फेंक रहे हैं! –

+0

मैं सहमत हूं - मैं बस सोच रहा हूं कि प्रदर्शन में बढ़ोतरी के लाभ (यदि कोई हैं) के लायक हैं। –

+0

मुझे लगता है कि एकमात्र लाभ यह है कि फ़ाइल छोटी है, इसलिए यदि आप एक दिन में हजारों उपयोगकर्ता एजेंटों को धक्का दे रहे हैं तो आपकी बचत बैंडविड्थ। –

उत्तर

9

एचटीएमएल या सीएसएस को 'छोटा' करना बहुत मुश्किल है क्योंकि सुरक्षित रूप से सहेजे जा सकने वाले सभी को सफेद स्थान (जो एक बड़ी बचत की मात्रा नहीं है) है। कक्षा के नामकरण के लिए, आप वेब का एक महत्वपूर्ण हिस्सा खो देते हैं जिसमें अर्थपूर्ण कोड होता है (जो अर्थ का प्रतिनिधित्व करता है)। मुझे लगता है कि सबसे अच्छा विकल्प यह सुनिश्चित करना है कि आपके वेब सर्वर पर gzip संपीड़न सक्षम हो और जहां भी संभव हो, अपनी संपत्ति को एक फ़ाइल में संयोजित करने पर ध्यान केंद्रित करें।

+0

धन्यवाद केविन - मैं बस सोच रहा था कि क्या ऐसा कोई कार्य करने में सहायता करने के लिए वहां कोई उपकरण था (वास्तव में एक सीएसएस फ़ाइल को रोकना और उसके बाद वास्तविक HTML को बदलना और बदलना) क्योंकि मुझे यकीन है कि वहां कुछ गुदा डिजाइनर होंगे उनके काम पर "पुन: उपयोग" होने का मौका नहीं चाहिए। –

+19

कोई भी "वेब डेवलपर" जो मानता है कि उनका काम पुन: उपयोग से सुरक्षित होना चाहिए शीर्षक के योग्य नहीं है। आपकी टिप्पणी zzzzBov के लिए – zzzzBov

+0

+1। :) –

2

वाईयूआई कंप्रेसर minifies CSS, लेकिन मुझे यकीन नहीं है कि यह सरल gzip संपीड़न पर कितनी बड़ी जीत हो सकती है। यदि आपके पास इतना सीएसएस है, तो यह बड़ी समस्याओं का चेतावनी संकेत हो सकता है।

+0

धन्यवाद हैंक - मैंने पहले यूयूआई कंप्रेसर पर एक संक्षिप्त रूप लिया था - जैसा कि मेरा मानना ​​है कि यह "सीएसएस को कम करता है" जितना हो सके (सभी सफेद-स्थान हटा देता है)। मैं सिर्फ यह देखना चाहता था कि जावास्क्रिप्ट-शैली के उपकरणों के समान कोई था या नहीं। (ओह और चिंता न करें - किसी मुद्दे के कारण यह नहीं पूछा गया था, केवल जिज्ञासा से अधिक) –

+0

हैंक - यदि आप एक बड़ी परियोजना (विशेष रूप से एंटरप्राइज़ पर्यावरण में) पर काम करते हैं तो सीएसएस फाइलों के असंख्य सामना करना आम बात है साइट पर प्रदर्शन प्रभाव को कम करने के लिए खनन की आवश्यकता है। मैंने कुछ बड़ी कंपनियों को सीएसएस minification.Obfuscation को संभालने के लिए YUI कंप्रेसर का उपयोग किया है, हालांकि ... इतना नहीं। – calvinf

+0

@calvinf मुझे यकीन है कि नियम के अपवाद हैं, लेकिन अधिकांश साइटों को वास्तव में सीएसएस के रीम्स और रीम्स की आवश्यकता नहीं है। यहां तक ​​कि यदि आपको सीएसएस के * बहुत * की आवश्यकता है, तो सीएसएस मिनीफायर के साथ शुरू करने के लिए आपको कितने केबी की आवश्यकता है? उन्हें सभी को एक फ़ाइल में जोड़ना नहीं होगा, tweaks कैशिंग, और GZip संपीड़न सभी एक बड़ा प्रभाव डालते हैं? –

1

इस पर एक नज़र डालें: minifycss

कहानियो के रूप में मुझे यकीन है कि इस तरह के एक अच्छा विचार है नहीं कर रहा हूँ। सीएसएस कक्षाओं को कहीं भी छेड़छाड़ की जा सकती है। जिस समय आप सीएसएस बदलते हैं, आप कक्षाओं/आईडी आदि के लिंक खो देंगे ...

0

html5boilerplate.com पर एक नज़र डालें; विशेष रूप से गिटहब पर नवीनतम स्रोत-कोड।

एचटीएमएल 5 बॉयलरप्लेट की बिल्ड स्क्रिप्ट आपके लिए जावास्क्रिप्ट, सीएसएस और एचटीएमएल को कम कर सकता है। यह आपके सीएसएस चयनकर्ताओं का नाम नहीं बदलता है, लेकिन यह शायद आपके द्वारा प्राप्त स्वचालित "obfuscator" के सबसे नज़दीक है।


तुम सिर्फ प्रत्येक पृष्ठ से कुछ अतिरिक्त बाइट्स बाहर eek देख रहे हैं सुनिश्चित करें कि आप gzip उपयोग कर रहे हैं/संपीड़न हवा निकालना और फिर अपने CSS चयनकर्ता गुण और अपने HTML तत्व की विशेषताएं और उनके मान alphabetizing प्रयास करें। उपरोक्त विधि पर Google की विस्तृत अनुशंसाओं के लिए

Read this


एचटीएमएल सहायकों (asp.net/C#) की तरह आप html नियंत्रण के "ClientID" विधि के ऊपर लिख एक यादृच्छिक स्ट्रिंग होने के लिए और गतिशील रूप से अपने HTML करने के लिए अपने CSS चयनकर्ताओं का लिंक कर सकते हैं के साथ कुछ गतिशील भाषाओं में (अच्छी तरह से, सर्वर-साइड नियंत्रण जो HTML प्रस्तुत करते हैं)। लेकिन यह पूरी तरह से एक और सवाल के लिए होगा और संभवतः वह नहीं है जो आप प्राप्त करने के लिए देख रहे हैं। यह एक रखरखाव दुःस्वप्न भी बन जाएगा।


0

आप रूबी का उपयोग करते हैं, यहाँ एक Ruby CSS Minifier है कि मैं अच्छे प्रभाव के लिए इस्तेमाल करते हैं। मेरी पहले से ही terse शैली को देखते हुए, यह मुझे मेरे फ़ाइल आकार में लगभग 15% कमी देता है।

उदाहरण के लिए, एक परियोजना पर 32 में कुल 5 फाइलें।3kiB 26.4kiB (18%) की 1 फ़ाइल बन जाती है। एक अन्य परियोजना पर, 21.6kiB की 2 फाइलें 1 9 .0 9बीबी (12%) की 1 फ़ाइल बन गईं।

9

HTML Muncher एक पायथन टूल है जो HTML, जावास्क्रिप्ट और सीएसएस फ़ाइलों में आईडी और सीएसएस क्लास नामों का नाम बदलने का प्रयास करता है। Google क्लोजर कंपाइलर या वाईयूआई सीएसएस कंप्रेसर जैसे अन्य टूल्स में फ़ाइलों को पास करने से पहले, आप इसे अपनी अनुकूलन प्रक्रिया में पहले चरण के रूप में उपयोग कर सकते हैं।

+0

एचटीएमएल मुन्चर एक महान उपकरण है। हालांकि, अगर आप पहले से ही gzip का उपयोग कर रहे हैं तो बचत कभी भी बड़ी नहीं होगी। मूल = 148k - ** न्यूनतम + gzip = 17929 v। Munched + minify + gzip = 15905 ** - बहुत सारे काम के लिए लगभग 2k की बचत – CalM

+0

लाखों पृष्ठदृश्यों के लिए उन 2kb खाते हैं, और इससे कोई फर्क पड़ता है :) –

-1

सीएसएस न्यूनीकरण जैसी चीजों के लिए आप कई ऑनलाइन टूल्स का उपयोग कर सकते हैं। यहां एक online css minifier है! मुझे मिला।

सीएसएस कक्षाओं का नाम बदलने के लिए, मैं कोशिश करता हूं और इससे बचता हूं क्योंकि आप अपने एचटीएमएल से बहुत अधिक पठनीयता खो देंगे।

-3

मैंने ओबफस्केटिंग सीएसएस के लिए टूल विकसित किया है। इसका लक्ष्य स्टाइलशीट को तेज़ या जो कुछ भी लोड करना नहीं है, लेकिन चोरी करने से अपना "पुन: प्रयोज्य" काम सुरक्षित करना है। इसमें कई तरीकों हैं कि मूल सीएसएस स्रोत प्राप्त करने का नरक कैसे बनाया जाए (लेकिन यह अभी भी विकास में है और बेहतर तरीकों का उपयोग किया जाएगा)। मैं इसे एचटीएमएल/सीएसएस टेम्पलेट विक्रेताओं को वापस कर दूंगा, जो लाइव डेमो प्रदान करते हैं और चोरी के बारे में चिंतित हैं, और कोडर के लिए भी - फ्रीलांसर, जो अपना काम (अविश्वसनीय) ग्राहकों को पेश करना चाहते हैं। आप इसे आजमा सकते हैं: http://cssobfuscator.com

संबंधित मुद्दे