مشکلات سرعت کم لود شدن صفحات

[NabiKAZ]

سلام
متن زیر بخشی از ایمیل من به یکی از دوستانم است ، گفتم در اینجا مطرح کنم شاید دوستان نظری داشته باشند و بتونن راهنمایی کنند.
======================

با اون TE (Template Enginy)l که معرفی کرده بودی به نتیجه نرسیدم !

رفتم سراغ phpBB و سعی کردم از روش کارش سر در بیارم ... کلاس تمپلیتش رو در آوردم و یه برنامه ساده نوشتم که با اون کار کنه . و یه صفحه معمولی هم بدون استفاده از اون به سبک معمولی خودم ساختم .

وقتی مدت بارگزاری صفحه رو چک کردم دیدم صفحه ای که بر اساس Class TE phpBB لود میشه 0.00686 ثانیه زمان میبره و صفحه ای که به سبک خودم لود میشه 0.00065 ثانیه طول میکشه ! یعنی بیش از 10 بار سریعتر !!! پس این وسط TE چه کار میکنه !!! چرا نتیجه عکس شد ؟!
فایلهای این آزمایش رو ضمیمه همین ایمیل کردم ، بیکار شدی یه نگاه بهشون بنداز شاید من دارم اشتباه میکنم! فایل index.php روش اوله و index2.php روش دوم. اصلا این سبک برنامه نویسی رو پیشنهاد میکنی؟ (منظورم روش فایل index.php است)

اصلا آیا استفاده از TE باعث میشه سرعت بارگزاری صفحاتم سریعتر بشه؟ یا صرفاً برای جدا سازی کدهای html از php بکار میره ؟ تا چه حدی روی سرعت بارگزاری تاثیر گذاره؟ ارزشش رو دارم این همه روش کار کنم؟

ایراد دیگه ای که حدس زدم روی سرعت بارگزاری صفحاتم تاثیر منفی داشته، استفاده مداوم و مکرر در استفاده از بانک اطلاعاتی در یک صفحه بوده. یعنی به عنوان مثال وقتی پیگیری کردم دیدم برای باز شدن صفحه اول سایتم بیشتر از 25 مرتبه دستور mysql_query استفاده شده ! این خیلی موثره یا نه؟

یه چیز دیگه یادم اومد، اون زمانی که ازش صحبت کردم، زمان تبدیل php به html بر روی سرور است، ولی یه زمانی هم لازمه که فایل صفحه دون لود بشه! یعنی حجم فایل خروجی هم مهم باید باشه! الان چک کردم دیدم در مورد صفحه اول سایتم حدود 98 کیلوبایت است و در مورد صفحه اول phpBB حدود 25 کیلوبایت! این موضوع چقدر تاثیر گذار میتونه باشه؟!

یه جا خوندم استفاده از تگ DIV بجای تگ TABLE جزو اصول طراحی وب است. این موضوع چقدر تاصیر گذاره ؟! چون من اصلا از DIV استفاده نکردم و از TABLE هم خیلی خیلی استفاده کردم !

خلاصه هر چی به ذهنم میرسه رو بررسی کردم. سایتم بیشتر از 4 ثانیه طول میکشه تا رو سرور پردازش و ایجاد بشه !!! دیگه چه برسه به دون لود و نمایشش برای کاربر! در حالی که این زمان برای phpBB که در همین سایت نصبه ، حدود 1 ثانیه است ! و این یعنی فاجعه !

دیگه نمیدونم اشکال کار از کجا میتونه باشه .

صحبت بیشتر در مورد سایت http://isoces.ir/main هست (بخش مباحثات فنی همون phpBB است) ، ولی همه سایتهایی که میسازم این مشکلات رو دارن. شاید اشکال از سبک کد نویسیم باشه چون من به اسپاگتی نویسی عادت دارم !!!

======================

قربونتون
نبی

 

[Ali_ix]

ببین نبی جان بحث کند بودن یک سایت خیلی کلیه و به موارد زیادی بستگی داره.
همونطور که خودت گفتی بخشش سمت سرور هست و بخشیش سمت کلاینت !
بخش سرور که به مباحث برنامه نویسی و Optimization مربطو میشه که هم ساختار برنامه بهینه باشه و هم ساختار وب سرور و سرویسهای اون که به بهترین شکل پاسخ بده.

برای سمت کلاینت هم همینطور...
اول اینکه حجم صفحتون یکمی زیادی ... عکسهای متعددی درش به کار رفته و ساختار کدنویسیش پیچیدست.
در مرود استفاده از div به جای table این حرف غلطه و این به تنهایی تاثیر چشم گیری در سرعت نداره
کلا سبک طراحی و کدنویسی صفحه اگر به سمت کدنویسی حرفه ای و جدید بره سرعت بارگذاری صفحه زید میشه.
من در بخش طراحی سمت کلاینت تا حدودی میتونم کمک کنم ..
اگر مایل هستید جزء جزء دربارش بحث میکنیم

 

[overcrash]

بااجازه جناب Ali_ix
درمورد تیبل اینو اظافه کنم که
معمولا تا تمام اجزای تیبل بارگذاری نشه اون تیبل نشون داده نمیشه ولی اگه دایو بشه
هردایو مستقل عمل میکنه و به محض بارگذاری نمایش داده میشه....
امیدوارم بتونه کمکت کنه

 

[NabiKAZ]

سلام

ببخشید دیر سر زدم . ایمیل های سایت به من نمیرسه و مطلع نشده بودم

از صحبتهای دوستان استفاده بردم .
با بخشی از صحبتهای آقای Ali_ix موفقم و با بخشی خیر. در عوض با صحبتهای آقای overcrash کاملا موافقم و درست به همین خاطر است که استفاده از div را رهگشا میدانم .

شما میفرمائید سبک برنامه نویسی باید حرفه ای و جدید باشه ! به نظرم منطقی نمیاد ! برنامه ای که کدها رو تفسیر و اجرا میکنه که نمیتونه بفهمه کدوم کدها حرفه ای و جدید هستند و کدام نیستند و یا مثلا در هم و برهم نوشتن کدها فکر نمیکنم چندان تاثیر گذار باشد چون اینترنت اکسپلورر و دیگر برنامه های مشابه هوشمند نیست و فقط کدها رو خد به خط اجرا میکنند . حرفه ای و جدید و منظم نویسی کدها تنها خواندن سورس را راحت تر میکنه و در اجرا تاثیر گذار نیست !
البته من برداشت های شخصی خودم رو گفتم . شاید منظور شما رو بد برداشت کردم . اگر اینطور است لطفا بیشتر توضیح بفرمائید.

ولی من همچنان اصرار بر این دارم که استفاده از div بجای table ره گشای مشکل است .
این دو لینک را با هم مقایسه کنید :
با استفاده از table:
http://www.ahwazserver.com/temp/isoces/ISOCES_IR.htm
تبدیل یافته همون صفحه به div البته به صورت دستو پا شکسته:
http://www.ahwazserver.com/temp/isoces/ISOCES_IR2.htm

حالا من سایت رو تیبل بندی کردم و از تگ table خیلی زیاد استفاده کردم . حالا میخوام تمام صفحه رو توسط div دوباره بسازم ... ولی خیلی وقت گیره و باید از اول کار کنم . راهی داره که بشه کل تگهای table رو به صورت هوشمند به div تبدیل کرد که سطر و ستون ها مانند مثال بالا به هم نریزه؟

تشکر
نبی

 

[Ali_ix]

خب گویا من خیل یکلی گفتم و منظور منتقل نشده..
در مورد Table حرف overcrach کاملا درسته ... ولی بازهم این به تنهایی نمیتونه تاثر چشمگیری داشته باشه !

در مورد کد نویسی حرفه ای هم منظورم به شکلی بود که حجم کدهای صفحه رو کم کنه ...
یک صفحه رو میشه معادل CSS Based (یا به قولی DIVی) رو طوری ساخت که از مشابه جدولیش سنگین تر باشه ... اینها همه به سبک برنامه نویسی برمیگرده...
شما اگر بخواید روی Performance یک سایت کار کنید ودر واقع Optimize کنید هر خط از کد براتون مهم میشه تا به نتیجه مطلوب برسید...

طراحی حرفه ای هم تقریبا از اینجا شروع میشه : استفاده اصولی و کامل از CSS برای بخش تزئینی - ظاهری سایت (یعنی مطلقا هیچ تگ font-face یا color یا .. در صفحه نباشه !)

ولی این تازه اولشه و اگر بخواید کاملا اصولی باشه باید کدنویسی CSS و XHTML/HTML تون هم معنایی (Semantic) باشه تا برای مرورگرها Rendering صفحات ساده تر بشه.

کد نویسی معنایی هم به این معنی که از هر چیزی به جاش استفاده بشه ..
مثلا من یک لیست نامرتب دارم .. فرضا با مدل CSS میام و با چندین Div و Span و شکل دادنشون با CSS یک لیست قشنگ با عکسهای کناری و .. درست میکنم. این درسته .. درست نمایش داده میشه و مشکلی ایجاد نمیکنه..
ولی از لححاظ ساختاری اشتباهه .. چون برای ایجاد لیستهای نامرتب تگ UL وجود داره که کارها رو خیلی ساده تر میکنه.

مرورگر هم قطعا پیش زمینه ای برای نمایش تگ UL داره و اونو سریعتر میتونه Render بکنه .
به همین شکل برای تمام کدنویسی صفحه...
در مورد CSS هم همینطور... میشه دقیقا برای هر عنصری که توی صفحه میاد کلاسی تعریف کرد و بهش شکل داد .. اصولا غلط نیست ولی اون نتیجه ای رو که میخوایم بهمون نمیده !
در عوض با یکم احاطه به اجزای صفحه میبینیم که خصوصیات خیلی از اجزا مشترکه و میشه به نحوی با کلاسها و کدهای کمتر CSS همون نتیجه (و بلکم بهتر) رو گرفت.

مثلا اگر شما در کل صفحه فونت متنهاتون با Tahoma هست و فقط بعضی جها از فونتهای دیگه استفاده شده بهتره بیاید از تگ body فونتها رو به Tahoma تغییر بدید و در ورت لزوم در موارد خاص اینو نقض کنید .. تا اینکه بیاید برای تک تک بخشهایی که متن داره جداگانه فونت مشخص کنید..

اینها نکته های ریزی هستند که اصلا به چشم نمیان .. ولی در حجم بالا و برای بازده خوب موثرند.

 

[NabiKAZ]

با سلام و تبریکات عید!
آقا علی از شما ممنونم که اینجور موشکافانه موضوع رو توضیح دادید.

در مورد Table حرف overcrach کاملا درسته ... ولی بازهم این به تنهایی نمیتونه تاثر چشمگیری داشته باشه !

البته من منظورم این نبود که صرفا استفاده از div میتونه تمامی مشکلات رو حل کنه . اما هنوزم مصر(مسر) بر اینم که تاثیر استفاده از اون بجای TABLE کم نیست ! در واقع فکر میکنم در این مورد اتفاق نظر بین دوستان است و اختلاف نظر تنها در میزان این تاثیر است. به محض بازسازی سایتم توسط تگ DIV نتیجه رو اعلام میکنم . و میزان این تاثیر مشخص میشه...

طراحی حرفه ای هم تقریبا از اینجا شروع میشه : استفاده اصولی و کامل از CSS برای بخش تزئینی - ظاهری سایت (یعنی مطلقا هیچ تگ font-face یا color یا .. در صفحه نباشه !)

به این موضوع واقفم و صد در صد باهاش موافقم ! و استفاده از CSS درست به خاطر پیاده سازی همین موضوعه که شما فرمودید... حالا عجیبه که چرا گفته بودید همیشه استفاده از CSS نمیتونه صحیح باشه ! شایدم من بد برداشت کردم.

ولی این تازه اولشه و اگر بخواید کاملا اصولی باشه باید کدنویسی CSS و XHTML/HTML تون هم معنایی (Semantic) باشه تا برای مرورگرها Rendering صفحات ساده تر بشه.
کد نویسی معنایی هم به این معنی که از هر چیزی به جاش استفاده بشه ..
مثلا من یک لیست نامرتب دارم .. فرضا با مدل CSS میام و با چندین Div و Span و شکل دادنشون با CSS یک لیست قشنگ با عکسهای کناری و .. درست میکنم. این درسته .. درست نمایش داده میشه و مشکلی ایجاد نمیکنه..
ولی از لححاظ ساختاری اشتباهه .. چون برای ایجاد لیستهای نامرتب تگ UL وجود داره که کارها رو خیلی ساده تر میکنه.
مرورگر هم قطعا پیش زمینه ای برای نمایش تگ UL داره و اونو سریعتر میتونه Render بکنه .
به همین شکل برای تمام کدنویسی صفحه...

به مطلب بجایی اشاره کردید و مثال بجایی زدید ... حتما این موضوع میتونه تاثیر گذار باشه . و تا جای ممکن سعی کردم مد نظر قرار بدم.

مثلا اگر شما در کل صفحه فونت متنهاتون با Tahoma هست و فقط بعضی جها از فونتهای دیگه استفاده شده بهتره بیاید از تگ body فونتها رو به Tahoma تغییر بدید و در ورت لزوم در موارد خاص اینو نقض کنید .. تا اینکه بیاید برای تک تک بخشهایی که متن داره جداگانه فونت مشخص کنید..

نکته ریزی بود و البته پر واضح ! اصلا استفاده از css به همین دلیله و من صد در صد این مورد رو در طراحی هام اعمال میکنم یعنی اگر سایت رو بدون فایل css باز کنید. در صفحه باز شده حتی یک فونت و رنگ قلم یا اندازه قلم خاص مشاهده نمیشه ! و تمامی این خصوصیات رو فایل css و class هایی که به تگهای table و div نسبت داده شده پیاده میکنن. (به طور خاص در مورد وب سایت فوق الذکر در پست های قبلی، فکر میکنم این یک مورد رو رعایت کردم)

نکاتی که اشاره شد رو (به استثنای استفاده از div بجای table) تقریبا رعایت کردم ولی باز هم عجیبه که چرا سایت دیر لود میشه .

باز هم اگر نکته ای بود خوشحال میشم مطرح کنید.

ضمنا از صحبتهای شما (آقا علی) با توجه به اینکه علمی و اصولی توضیح دادید اینجور برداشت کردم که از رفرنس و منبع خاصی استفاده کردید. یعنی منبع شما در مورد این اطلاعات چیست؟ منظورم اینه که با وجود اصطلاحاتی که در پستتون آوردید ، بعیده که تماماً تجربی بوده باشه.

باتشکر
نبی

 

[NabiKAZ]

سلام

تا جايي که بنده تجريه کردم FrontPage و Dreamweaver براي مديريت بر روي تگ DIV کمي بد قلق هستند. نرم افزاري ميخوام که به همون راحتي که اين دو نرم افزار بر روي تگ TABLE مديريت ميکنند بشه بر روي تگ DIV مديريت کرد. يعني در حد اينکه بشه سطر و ستون هايي ايجاد کرد و border يا background اون رو تنظيم کرد.

تشکر
نبي

 

[overcrash]

فکرنکنم dreamweaver برای کار با دایو برنامه ضعیفی باشه!
البته مطمین باش عادت کردن به کار با دریم ویور یکم طول میکشه.
ولی واسه کار با css ها میتونی از این برنامه استفاده کنی که خودمم باهاش کارمیکنم TopStyle
http://www.bradsoft.com/index.asp

هیچ برنامه ای کامل و راحت نیست و مجبوریم که از چند برنامه استفاده کنیم

 

[cactus13]

بحث آموزنده و جالبي شده! منتظر ادامه اش هستم...

 

[NabiKAZ]

فکرنکنم dreamweaver برای کار با دایو برنامه ضعیفی باشه!
البته مطمین باش عادت کردن به کار با دریم ویور یکم طول میکشه.
ولی واسه کار با css ها میتونی از این برنامه استفاده کنی که خودمم باهاش کارمیکنم TopStyle
http://www.bradsoft.com/index.asp

هیچ برنامه ای کامل و راحت نیست و مجبوریم که از چند برنامه استفاده کنیم

از راهنماییتون ممنونم .
دوستان اگر بازم برنامه ای کاربردی در این باره داشتند معرفی کنند.

 

[ALBORZ.VICTOR]

TopStyle
محشره !
بهتره يه نفر كه وارده آموزش نكات حرفه ايشو بده.

 

[NabiKAZ]

سلام

من یه برنامه میخوام که تمام سایت رو به صورت خودکار به بوسیله تگ div بازسازی کنه !
یعنی به صورت هوشمند خودش تمامی تگ های table رو حذف کنه و بجاشون div جایگزین کنه !

ممکنه؟!

 

[echessdesign]

NabiKAZ جان سلام
بحث مفید و آموزنده ای رو شروع کردید و دوستان هوشمندانه بحث رو یاری کردند.
در طراحی Layout صفحه، استفاده از CSS به جای Table بسیار مفید است. بر روی سرعت بار گزاری صفحه تاثیر چشم گیری داره اما مشکلاتی هست که لازم است در اینجا به ذکر اون بپردازم:
1- با وجودی که W3C برای یکپارچه سازی مرورگر ها در رعایت استاندارد ها، تلاش بسیاری کرد امت موفقیت چندانی حاصل نشد، زیرا مایکروسافت کماکان در نسخه IE به سرکشی خود و به روز نکردن اصول وب پایبند هست، مثلا زمانی که شما Padding به لایه خود می دهید، IE پدینگ صفحه را نیز بر طول لایه اضافه می کنه، و نکاتی از این قبیل. اما FireFox با پشتیبانی خود بازهم در رعایت اصول می لنگد، مثلا شما لایه 2 را در لایه 1 با عرض بیشتر بسازید، صفحه شما بهم میریزد.، چیزی که در مرورگر های دیگر اصلا مشکل حساب نمی شود!!!!
OPERA کماکان هوشمندانه در صدر قرار دارد.
2- سایت های بزرگ دنیا مانند: Dell.com , IBM.com , Microsoft.com و.... کماکان در طراحی Layout Table را به CSS ترجیح می دهند!!!! مطلبی که در انتخاب شما جهت طراحی وب تاثیر گذار خواهد بود.صفحه
3- مرورگر های قدیمی Netscape 4.X کماکان با CSS ها مشکل دارند و برای آنها با CSS مجزایی نوشت.
Microsoft با تمام خودکامگی و خود خواهی خود نرم افزار هوشمند : Microsoft Expression Web Designer (Beta) را به طراحان وب تقدیم کرد که راهی را برای اصول نو اندیشی، احترام به استاندارد ها، حرکت به جلو می باشد. توضیح در باره این باکس جدید طراحی وب مایکروسافت در این پست می باشد: http://forum.majidonline.com/forum36/thread54414.html
و حتما پیشنهاد می کنم که دانلود کنید: http://www.microsoft.com/products/expression
مایکروسافت در این باکس سعی کرد به قوانین احترام بگزاره از جمله حاضر شد به جای تگ style="cursor:hand" به تگی که W3C وضع کرده رو بیاره، : Style="cursorointer" و ....
Nabik جان
هیچ بر نامه ای در دنیا در حال حاضر وجود نداره که Table رو به CSS تبدیل کنه. من به تازگی وب سایتی رو طراحی کردم که در تمام کار فقط از CSS استفاده شده (با حفظ استاندارد W3C ) به زودی پس از آپلو اون رو در اختیار علاقه مندان قرار می دهم. کسب دانش و لذتی که در طراحی Layout صفحه توسط CSS هست با Table امکانپذیر نیست.

 

[Ocarina]

خیلی ممنون برای توضیحات مفید شما...
البته من هیچوقت ابزار طراحی خوبی از مایکروسافت برای طراحی وب ندیدم... حالا ببینیم انی که شما گفتی چجوریه.. البته دانلودش واسه من امکان پذر نیست! تو بازار پیدا نمیشه؟؟