Summarize this content to 400 words in Persian Lang
a چیست DOM? چه می خورد؟
DOM (مدل شیء سند) پایه صفحات وب و توسعه آنهاست. این یک رابط برنامه نویسی برای اسناد HTML و XML است که ساختار یک سند را در یک شی درخت مانند نشان می دهد. با شاخه و برگ. هر عنصر، ویژگی و قطعه متن در سند تبدیل به یک گره در این درخت می شود. این اجازه می دهد تا جاوا اسکریپت با عناصر HTML تعامل داشته باشد، آنها را تغییر دهد یا عناصر جدید اضافه کند. این خلاصه ای است از آنچه که هر فرد در وب تجربه می کند، تعامل، تغییرپذیری، نشانه های بصری پویا و عناصر. وقتی روی یک دکمه یا یک منوی درخشان کلیک می کنید، مغز شما انتظار دارد چیزی اتفاق بیفتد به یک جمله برای تغییر، به یک صفحه be جدید برای بارگیری یا به یک پنجره بازشو با علامت تیک سبز که به ما می گوید که سفارش آنلاین ما با موفقیت پرداخت شده است.
دستکاری سریع DOM، در هر ثانیه، یک نه بزرگ برای حفظ کاربر یا حتی تعامل اولیه از جانب کاربر است. حتی با وجود تمام رفتارهای پویایی که می‌توانیم تجربه کاربر را ایجاد و گسترش دهیم، استفاده بیش از حد از دستکاری‌های DOM می‌تواند بسیار ناامیدکننده باشد. و حرف آخر همیشه از زبان کاربر است. اگر عملیات مهمی در پس‌زمینه صفحه‌تان اتفاق می‌افتد، مانند واکشی داده‌ها، اما پس از تعامل کاربر با آن، عملکرد آن کاهش می‌یابد و هر دقیقه بدتر می‌شود، تعیین دقیق نقاط خفه‌کننده می‌تواند بسیار سخت و دلهره‌آور باشد.
یک مثال از روش ساده استفاده از روش اصلی انجام کارها و انجام سریعتر آن، استفاده از textContent از vanilla js است. بله، می دانم. بیشتر اوقات ما به یک چرخه پیچیده از زندگی برای اجزایی که آنقدر پویا و قابل تغییر هستند نیاز داریم نیاز دارند استفاده از مدیریت دولتی و اینها. اما همیشه اینطور نیست. اگر در هر جلسه فقط مقداری متن را تغییر می‌دهید یا یک کوکی را به‌روزرسانی می‌کنید، آیا واقعاً نیاز به استفاده از چنین گزینه پیچیده منطقی و منابعی دارید؟
تابع textContent در js سریع‌ترین عملکرد را برای دستکاری متن در مقایسه با گزینه‌های عملکردی مشابه، به عنوان مثال، روش محبوب‌تر innerHtml دارد. برای مرجع این تست های زمان بندی شده را ببینید.
چرا؟
می‌توانید حافظه دستگاه کاربر را برای عملیات‌های تأثیرگذارتر ذخیره کنید. برای مثال، گاهی اوقات در دسترس بودن و سرعت معقول در دستگاه‌های اندرویدی یا اپلی واقعاً قدیمی، ضروری است. یا شاید تماس API شما یک JSON آنقدر بزرگ را برمی گرداند که برای تجزیه و دستکاری مناسب به چند ثانیه زمان نیاز دارید. بنابراین هر ثانیه ای که کاربر هیچ بازخوردی دریافت نمی کند یا در تماشای یک انیمیشن CSS روی صفحه گیر می کند، مهم است.
من اخیراً چیزهای زیادی با کدنویسی در جاوا اسکریپت بدون وابستگی به عنوان یک چالش و تجربه یادگیری یاد گرفتم. مانند واکشی داده ها و ایجاد یک برنامه برای انجام فقط با HTML، CSS و جاوا اسکریپت. بدون npm، بدون کتابخانه. و من یک دسته از متدهای Web API و اشیایی را که قبلاً هرگز در مورد آنها نشنیده بودم، مانند شیء DocumentFragment، پیدا کردم. این یک “قطعه” خالی از ساختار DOM ایجاد می کند و به شما اجازه می دهد قبل از تغییر DOM صفحه، آن را دستکاری کنید و آن را پر کنید. بنابراین شما یک شی را با لیست منوها یا عناوین ابزار مجهز به هوش مصنوعی فوق‌العاده فانتزی خود بارگذاری می‌کنید و پس از اتمام عملیات الحاقی و تگ‌های تودرتو، آن را یک بار به DOM وصله می‌کنید. به این ترتیب که تجزیه تنها یک بار اتفاق می افتد، در یک حرکت، به جای انجام یک حلقه for با چندین فراخوانی یکسان، و نیاز به تجزیه جدید درخت در پایان هر تماس.
بنابراین فرض کنید روی یک دکمه خیلی سریع کلیک می کنم، زیرا مورد استفاده من نیاز به رندر بسیار سریع، بیش از 1 بار در ثانیه دارد. استفاده از کتابخانه مدیریت حالت دلخواه شما می‌تواند نوعی مانع در این مورد ایجاد کند، زیرا پس از هر کلیک رویداد جدیدی اجرا می‌شود، بنابراین باید قبل از شروع دومین نمونه از رویداد در پشته، به طور پیش‌فرض خاموش شود. بسته به پیچیدگی یا نیاز یک عملیات همگام، ممکن است بیش از یک ثانیه طول بکشد. در این مورد استفاده، یک معامله شکن است. بنابراین، انتخاب ابزار مناسب می‌تواند ساده‌تر، کوتاه‌تر و حتی سریعتر باشد. امروزه گزینه‌هایی وجود دارد که کتابخانه‌های محبوب برای حل این مشکل ارائه می‌دهند، مانند شکستن اجرای یک رندر زمانی که یک رویداد مشابه جدید اخیراً اجرا شده است. اما هدف من در اینجا این است که فقط دنبال یک اپلیکیشن وب زیبا و مدرن نباشیم. اما برای اینکه زندگی خود را با آسان‌ترین تعمیر و نگهداری آسان‌تر کنید و با اعتماد کورکورانه به تکه‌هایی از کدها به خودتان شلیک نکنید. کسی نوشت و گفت این بهترین گزینه است.
اگر از قبل این بسته‌ها و کتابخانه‌ها را برای راه‌اندازی پروژه خود نصب می‌کنید، چرا بررسی نمی‌کنید که چرا خطاها و استثناها فراخوانی‌های عملکرد ناشناخته یا پیام‌های رمزآلود را روی کنسول پخش می‌کنند؟
نتیجه‌گیری و چند جفت و جور اضافی
راه اندازی و راه اندازی یک سرویس بر روی ابر یا در یک سرویس بسیار رایج به صورت رایگان، امروزه می تواند بسیار سریع و آسان باشد. استفاده از صفحه دیگ بخار مانند نقطه شروع می تواند بسیار مفید باشد و باعث صرفه جویی در وقت شما می شود و نگران کارهای بسیار اساسی و مکرر نباشید. فقط یک فرمان را در ترمینال خود تایپ کنید و در آنجا آن را دارید، مسیریابی پایه و صفحه hello world در حال اجرا بر روی یک سرور محلی.
هیچ‌کس، در هیچ کجای اینترنت، همیشه نمی‌داند که یک کتابخانه معین یا یک چارچوب کامل زیر سرپوش چه کار می‌کند، اما هرچه بیشتر بدانید کارها چگونه کار می‌کنند، اغلب می‌توانید تصمیمات آگاهانه‌تری بگیرید و کارآمدتر کار کنید.
اکثر فریم‌ورک‌های محبوب برای توسعه وب کار بسیار خوبی برای بهینه‌سازی رندرینگ مجدد و دستکاری DOM با استفاده از منابعی مانند DOM مجازی یا پیاده‌سازی نوعی تداوم برای عملیات بسیار سخت که داده‌ها را بازیابی می‌کند، انجام می‌دهند.
ابزار توسعه وب از مرورگر وب انتخابی شما بهترین دوست شما در اینجا است. نسخه‌های جدیدتر این ابزارها می‌توانند به شما تله‌متری بدهند و حتی نشان دهند کدام قسمت از کد شما یا کدام تماس‌ها نقطه خفه‌کننده احتمالی عملکرد شما هستند.
با دانستن اینکه زبان جاوا اسکریپت چگونه کار می‌کند یا نحوه انجام کارها را چگونه پیاده‌سازی می‌کند، می‌توانید به راحتی موقعیت‌هایی را شناسایی کنید که در آن یک تابع آماده برای استفاده از کتابخانه مورد علاقه‌تان ممکن است شما را مجبور به ایجاد یک پایگاه کد متورم‌تر کند و روی حل مشکل تمرکز نکنید. ممکن است فقط توجه شما را به تکرار بخشی از کدی که صدها بار نوشته اید بدزدد. و حتی با وجود هوش مصنوعی برای افزایش بهره‌وری، ممکن است در دام استفاده از راه‌حل پیشنهادی همراه مصنوعی خود بیفتید و در واقع حفظ و نگهداری کارها را در آینده سخت‌تر کنید.
نگران نباشید، ما گاهی اوقات بهتر نمی دانیم. همانطور که گفتم هیچ کس نمی تواند همه چیز را همیشه بداند.
آزمایش و اشتباه کردن در لحظات بخشش بیشتر به شما کمک زیادی می کند و ابزارهایی را که برای بهتر انجام دادن نیاز دارید در اختیار شما قرار می دهد. دفعه بعد که با انجام کاری ساده مانند استقرار یک سرور فایل استاتیک یا کدنویسی منطق بسیار پیچیده در یک مورد کاربردی بسیار خاص مواجه شدید، دانستن اصول اولیه شما را واقعاً به جایی رسانده و هنگام مواجهه با مسائل جدید در حرفه خود وضوح بیشتری به شما می دهد.
من قویاً توصیه می کنم اسناد Web API را بررسی کنید. و همچنین نگاهی به وبلاگ های آنلاین، رسانه های اجتماعی یا منابع متمرکز بر توسعه وب.
اگر من اشتباهاتی انجام دادم، که احتمال دارد، لطفاً در نظرات به من اطلاع دهید. من همه به انتقاد و ایده های جدید گوش می دهم، پس لطفا اگر می خواهید، آنها را به اشتراک بگذارید!
a چیست DOM? چه می خورد؟
DOM (مدل شیء سند) پایه صفحات وب و توسعه آنهاست. این یک رابط برنامه نویسی برای اسناد HTML و XML است که ساختار یک سند را در یک شی درخت مانند نشان می دهد. با شاخه و برگ. هر عنصر، ویژگی و قطعه متن در سند تبدیل به یک گره در این درخت می شود. این اجازه می دهد تا جاوا اسکریپت با عناصر HTML تعامل داشته باشد، آنها را تغییر دهد یا عناصر جدید اضافه کند. این خلاصه ای است از آنچه که هر فرد در وب تجربه می کند، تعامل، تغییرپذیری، نشانه های بصری پویا و عناصر. وقتی روی یک دکمه یا یک منوی درخشان کلیک می کنید، مغز شما انتظار دارد چیزی اتفاق بیفتد به یک جمله برای تغییر، به یک صفحه be جدید برای بارگیری یا به یک پنجره بازشو با علامت تیک سبز که به ما می گوید که سفارش آنلاین ما با موفقیت پرداخت شده است.
دستکاری سریع DOM، در هر ثانیه، یک نه بزرگ برای حفظ کاربر یا حتی تعامل اولیه از جانب کاربر است. حتی با وجود تمام رفتارهای پویایی که می‌توانیم تجربه کاربر را ایجاد و گسترش دهیم، استفاده بیش از حد از دستکاری‌های DOM می‌تواند بسیار ناامیدکننده باشد. و حرف آخر همیشه از زبان کاربر است. اگر عملیات مهمی در پس‌زمینه صفحه‌تان اتفاق می‌افتد، مانند واکشی داده‌ها، اما پس از تعامل کاربر با آن، عملکرد آن کاهش می‌یابد و هر دقیقه بدتر می‌شود، تعیین دقیق نقاط خفه‌کننده می‌تواند بسیار سخت و دلهره‌آور باشد.
یک مثال از روش ساده استفاده از روش اصلی انجام کارها و انجام سریعتر آن، استفاده از textContent از vanilla js است. بله، می دانم. بیشتر اوقات ما به یک چرخه پیچیده از زندگی برای اجزایی که آنقدر پویا و قابل تغییر هستند نیاز داریم نیاز دارند استفاده از مدیریت دولتی و اینها. اما همیشه اینطور نیست. اگر در هر جلسه فقط مقداری متن را تغییر می‌دهید یا یک کوکی را به‌روزرسانی می‌کنید، آیا واقعاً نیاز به استفاده از چنین گزینه پیچیده منطقی و منابعی دارید؟
تابع textContent در js سریع‌ترین عملکرد را برای دستکاری متن در مقایسه با گزینه‌های عملکردی مشابه، به عنوان مثال، روش محبوب‌تر innerHtml دارد. برای مرجع این تست های زمان بندی شده را ببینید.
چرا؟
می‌توانید حافظه دستگاه کاربر را برای عملیات‌های تأثیرگذارتر ذخیره کنید. برای مثال، گاهی اوقات در دسترس بودن و سرعت معقول در دستگاه‌های اندرویدی یا اپلی واقعاً قدیمی، ضروری است. یا شاید تماس API شما یک JSON آنقدر بزرگ را برمی گرداند که برای تجزیه و دستکاری مناسب به چند ثانیه زمان نیاز دارید. بنابراین هر ثانیه ای که کاربر هیچ بازخوردی دریافت نمی کند یا در تماشای یک انیمیشن CSS روی صفحه گیر می کند، مهم است.
من اخیراً چیزهای زیادی با کدنویسی در جاوا اسکریپت بدون وابستگی به عنوان یک چالش و تجربه یادگیری یاد گرفتم. مانند واکشی داده ها و ایجاد یک برنامه برای انجام فقط با HTML، CSS و جاوا اسکریپت. بدون npm، بدون کتابخانه. و من یک دسته از متدهای Web API و اشیایی را که قبلاً هرگز در مورد آنها نشنیده بودم، مانند شیء DocumentFragment، پیدا کردم. این یک “قطعه” خالی از ساختار DOM ایجاد می کند و به شما اجازه می دهد قبل از تغییر DOM صفحه، آن را دستکاری کنید و آن را پر کنید. بنابراین شما یک شی را با لیست منوها یا عناوین ابزار مجهز به هوش مصنوعی فوق‌العاده فانتزی خود بارگذاری می‌کنید و پس از اتمام عملیات الحاقی و تگ‌های تودرتو، آن را یک بار به DOM وصله می‌کنید. به این ترتیب که تجزیه تنها یک بار اتفاق می افتد، در یک حرکت، به جای انجام یک حلقه for با چندین فراخوانی یکسان، و نیاز به تجزیه جدید درخت در پایان هر تماس.
بنابراین فرض کنید روی یک دکمه خیلی سریع کلیک می کنم، زیرا مورد استفاده من نیاز به رندر بسیار سریع، بیش از 1 بار در ثانیه دارد. استفاده از کتابخانه مدیریت حالت دلخواه شما می‌تواند نوعی مانع در این مورد ایجاد کند، زیرا پس از هر کلیک رویداد جدیدی اجرا می‌شود، بنابراین باید قبل از شروع دومین نمونه از رویداد در پشته، به طور پیش‌فرض خاموش شود. بسته به پیچیدگی یا نیاز یک عملیات همگام، ممکن است بیش از یک ثانیه طول بکشد. در این مورد استفاده، یک معامله شکن است. بنابراین، انتخاب ابزار مناسب می‌تواند ساده‌تر، کوتاه‌تر و حتی سریعتر باشد. امروزه گزینه‌هایی وجود دارد که کتابخانه‌های محبوب برای حل این مشکل ارائه می‌دهند، مانند شکستن اجرای یک رندر زمانی که یک رویداد مشابه جدید اخیراً اجرا شده است. اما هدف من در اینجا این است که فقط دنبال یک اپلیکیشن وب زیبا و مدرن نباشیم. اما برای اینکه زندگی خود را با آسان‌ترین تعمیر و نگهداری آسان‌تر کنید و با اعتماد کورکورانه به تکه‌هایی از کدها به خودتان شلیک نکنید. کسی نوشت و گفت این بهترین گزینه است.
اگر از قبل این بسته‌ها و کتابخانه‌ها را برای راه‌اندازی پروژه خود نصب می‌کنید، چرا بررسی نمی‌کنید که چرا خطاها و استثناها فراخوانی‌های عملکرد ناشناخته یا پیام‌های رمزآلود را روی کنسول پخش می‌کنند؟
نتیجه‌گیری و چند جفت و جور اضافی
راه اندازی و راه اندازی یک سرویس بر روی ابر یا در یک سرویس بسیار رایج به صورت رایگان، امروزه می تواند بسیار سریع و آسان باشد. استفاده از صفحه دیگ بخار مانند نقطه شروع می تواند بسیار مفید باشد و باعث صرفه جویی در وقت شما می شود و نگران کارهای بسیار اساسی و مکرر نباشید. فقط یک فرمان را در ترمینال خود تایپ کنید و در آنجا آن را دارید، مسیریابی پایه و صفحه hello world در حال اجرا بر روی یک سرور محلی.
هیچ‌کس، در هیچ کجای اینترنت، همیشه نمی‌داند که یک کتابخانه معین یا یک چارچوب کامل زیر سرپوش چه کار می‌کند، اما هرچه بیشتر بدانید کارها چگونه کار می‌کنند، اغلب می‌توانید تصمیمات آگاهانه‌تری بگیرید و کارآمدتر کار کنید.
اکثر فریم‌ورک‌های محبوب برای توسعه وب کار بسیار خوبی برای بهینه‌سازی رندرینگ مجدد و دستکاری DOM با استفاده از منابعی مانند DOM مجازی یا پیاده‌سازی نوعی تداوم برای عملیات بسیار سخت که داده‌ها را بازیابی می‌کند، انجام می‌دهند.
ابزار توسعه وب از مرورگر وب انتخابی شما بهترین دوست شما در اینجا است. نسخه‌های جدیدتر این ابزارها می‌توانند به شما تله‌متری بدهند و حتی نشان دهند کدام قسمت از کد شما یا کدام تماس‌ها نقطه خفه‌کننده احتمالی عملکرد شما هستند.
با دانستن اینکه زبان جاوا اسکریپت چگونه کار می‌کند یا نحوه انجام کارها را چگونه پیاده‌سازی می‌کند، می‌توانید به راحتی موقعیت‌هایی را شناسایی کنید که در آن یک تابع آماده برای استفاده از کتابخانه مورد علاقه‌تان ممکن است شما را مجبور به ایجاد یک پایگاه کد متورم‌تر کند و روی حل مشکل تمرکز نکنید. ممکن است فقط توجه شما را به تکرار بخشی از کدی که صدها بار نوشته اید بدزدد. و حتی با وجود هوش مصنوعی برای افزایش بهره‌وری، ممکن است در دام استفاده از راه‌حل پیشنهادی همراه مصنوعی خود بیفتید و در واقع حفظ و نگهداری کارها را در آینده سخت‌تر کنید.
نگران نباشید، ما گاهی اوقات بهتر نمی دانیم. همانطور که گفتم هیچ کس نمی تواند همه چیز را همیشه بداند.
آزمایش و اشتباه کردن در لحظات بخشش بیشتر به شما کمک زیادی می کند و ابزارهایی را که برای بهتر انجام دادن نیاز دارید در اختیار شما قرار می دهد. دفعه بعد که با انجام کاری ساده مانند استقرار یک سرور فایل استاتیک یا کدنویسی منطق بسیار پیچیده در یک مورد کاربردی بسیار خاص مواجه شدید، دانستن اصول اولیه شما را واقعاً به جایی رسانده و هنگام مواجهه با مسائل جدید در حرفه خود وضوح بیشتری به شما می دهد.
من قویاً توصیه می کنم اسناد Web API را بررسی کنید. و همچنین نگاهی به وبلاگ های آنلاین، رسانه های اجتماعی یا منابع متمرکز بر توسعه وب.
اگر من اشتباهاتی انجام دادم، که احتمال دارد، لطفاً در نظرات به من اطلاع دهید. من همه به انتقاد و ایده های جدید گوش می دهم، پس لطفا اگر می خواهید، آنها را به اشتراک بگذارید!
