3 lines
46 KiB
HTML
3 lines
46 KiB
HTML
<!doctype html><html lang="bg" itemscope itemtype="https://schema.org/Article"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Въпроси за интервю за front-end разработчици ★ Front-end Developer Interview Questions</title><meta name="description" content="A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore."><meta name="keywords" content="front-end, interview questions, css questions, js questions, html questions, performance questions, interview test"><meta name="author" content="Front-end Developer Interview Questions"><meta itemprop="author" content="Front-end Developer Interview Questions"><meta itemprop="name" content="Въпроси за интервю за front-end разработчици ★ Front-end Developer Interview Questions"><meta itemprop="description" content="A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore."><meta itemprop="image" content="https://h5bp.org/Front-end-Developer-Interview-Questions//assets/images/og-image.png"><meta property="og:title" content="Въпроси за интервю за front-end разработчици ★ Front-end Developer Interview Questions"><meta property="og:description" content="A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore."><meta property="og:url" content="https://h5bp.org/Front-end-Developer-Interview-Questions//translations/bulgarian/"><meta property="og:site_name" content="Front-end Developer Interview Questions"><meta property="og:image" content="https://h5bp.org/Front-end-Developer-Interview-Questions//assets/images/og-image.png"><meta property="og:type" content="website"><meta property="og:locale" content="en_US"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="Въпроси за интервю за front-end разработчици ★ Front-end Developer Interview Questions"><meta name="twitter:description" content="A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore."><meta name="twitter:site" content="@h5bp"><meta name="twitter:image" content="https://h5bp.org/Front-end-Developer-Interview-Questions//assets/images/og-image.png"><meta name="twitter:creator" content="@h5bp"><link type="image/png" rel="apple-touch-icon" href="https://h5bp.org/Front-end-Developer-Interview-Questions//assets/images/apple-touch-icon.png"><link type="image/png" sizes="32x32" rel="icon" href="https://h5bp.org/Front-end-Developer-Interview-Questions//assets/images/favicon-32x32.png"><link type="image/png" sizes="16x16" rel="icon" href="https://h5bp.org/Front-end-Developer-Interview-Questions//assets/images/favicon-32x32.png"><link type="image/png" color="#181818" rel="mask-icon" href="https://h5bp.org/Front-end-Developer-Interview-Questions//assets/images/favicon-96x96.png"><meta name="mobile-web-app-capable" content="yes"><meta name="robots" content="index,follow"><script>console.log(page.lang)</script><style>code[class*=language-],pre[class*=language-]{color:#c5c8c6;text-shadow:0 1px rgba(0,0,0,.3);font-family:Inconsolata,Monaco,Consolas,'Courier New',Courier,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#370b44}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#7c7c7c}.token.punctuation{color:#c5c8c6}.namespace{opacity:.7}.token.keyword,.token.property,.token.tag{color:#96cbfe}.token.class-name{color:#ffffb6;text-decoration:underline}.token.boolean,.token.constant{color:#9c9}.token.deleted,.token.symbol{color:#f92672}.token.number{color:#ff73fd}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a8ff60}.token.variable{color:#c6c5fe}.token.operator{color:#ededed}.token.entity{color:#ffffb6}.token.url{color:#96cbfe}.language-css .token.string,.style .token.string{color:#87c38a}.token.atrule,.token.attr-value{color:#f9ee98}.token.function{color:#dad085}.token.regex{color:#e9c062}.token.important{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}:root{--font-family-heading:sans-serif;--font-family-body:Georgia,serif;--font-family-code:Menlo,Monaco,'Courier New',monospace;--color-primary:#835EFF;--color-secondary:#FF008D;--color-safe:#8338EC;--color-gradient:linear-gradient(to right, var(--color-primary), var(--color-secondary));--color-highlight:var(--color-primary);--color-gray-opacity:rgba(39,39,39,0.04);--color-heading:#23231A;--color-text:#23231A;--background-default:#F9F9F9;--border-radius-default:5px;--box-shadow-default:0 2rem 4rem rgba(0,0,0,.15);--transition-duration:0.27s}body.rtl{--font-family-body:Arial,Helvetica,sans-serif}*{margin:0;padding:0;box-sizing:border-box;outline-color:var(--color-primary)}::selection{background:var(--color-primary);color:var(--background-default)}::-moz-selection{background:var(--color-primary);color:var(--background-default)}.nav{padding:1rem 0;position:relative;font-family:var(--font-family-heading)}.nav li{word-wrap:none;white-space:nowrap}.navigation{list-style:none;display:flex;flex-wrap:wrap;font-size:1rem}.navigation-questions-label{margin-right:auto}@media (min-width:60em){.navigation-questions-label{margin-right:0}}.navigation-toggle{display:inline-block;appearance:none;border:0;font-size:1rem;font-weight:600;cursor:pointer;background:0 0}.navigation-toggle::after{content:'\25BE';padding-left:.3rem;display:inline-block;font-size:1.2rem;font-weight:700;color:var(--color-primary);transform-origin:center}.navigation-toggle:active::after,.navigation-toggle:focus::after,.navigation-toggle:hover::after{color:var(--color-secondary)}.navigation.open .navigation-toggle::after{transform:scaleY(-1) translateY(-.25em)}@media (min-width:60em){.navigation-toggle{color:var(--color-text);pointer-events:none;cursor:default}.navigation-toggle::after{display:none}}.navigation-questions-list{padding:.5rem 1rem;display:flex;flex-direction:column;position:absolute;top:calc(100% - 1rem);left:0;z-index:1;opacity:0;transform:scale(.5,0);transform-origin:center top;transition:opacity .1s,transform .2s ease-out;background-color:#fff;box-shadow:0 0 0 1px var(--color-secondary),0 2px 4px -1px var(--color-text)}.navigation.open .navigation-questions-list{opacity:1;transform:none}.navigation.no-motion .navigation-questions-list{transition:none}@media (min-width:60em){.navigation-questions-list{padding:0;flex-direction:row;position:static;opacity:1;transform:none;transition:none;background-color:transparent;box-shadow:none}.navigation-questions-list li{margin:0}}.navigation-questions-anchor{visibility:hidden}.navigation.open .navigation-questions-anchor{visibility:visible}@media (min-width:60em){.navigation-questions-anchor{visibility:visible}}.navigation-item-emoji{width:100%;font-size:1rem;line-height:1rem;padding-bottom:1.5rem;margin-bottom:1.5rem;vertical-align:top;align-content:flex-start;border-bottom:1px solid #efefef}.navigation-item-home{border-bottom:none;padding-bottom:0;font-weight:600}@media (min-width:60em){.navigation-item-emoji{width:50%;margin-bottom:2rem;border-bottom:1px solid #efefef}}.navigation-item-emoji em{font-style:normal;margin-right:.5rem}.navigation-item-translations{text-align:left}@media (min-width:60em){.navigation-item-translations{text-align:right}}.navigation-item-home em{color:#835eff}.navigation-item-emoji a{text-decoration:none;display:inline-block;vertical-align:middle}@media (min-width:60em){.navigation-item:not(:last-of-type){margin-right:.8rem}}.navigation-anchor[rel~=external]::after{content:' ➚';color:var(--color-highlight)}.navigation-anchor.current{border-bottom:2px solid var(--color-highlight);padding:0 0 5px 0}.topbar{width:100%;height:.18rem;background:var(--color-gradient)}.skip-link{position:absolute;top:0;left:0;padding:.5rem 1rem;background-color:var(--color-primary);color:#fff;text-decoration:none;transform:translateY(-100%)}.skip-link:focus{transform:none}.header{margin-bottom:2rem}.header-big-title{font-size:2.3rem;line-height:1.06;margin:1.4rem 0 .7rem;color:var(--color-primary);word-break:break-word}.rtl .header-big-title{text-align:right}@media (min-width:30em){.header-big-title{margin:1.4rem 0 .7rem;font-size:4.6rem}}@media (min-width:60em){.header-big-title{margin:2.1rem 0 .7rem;font-size:5.4rem}}@supports (mix-blend-mode:lighten){.header-big-title{display:inline-block;position:relative;color:#000;background:#fff;mix-blend-mode:multiply}.header-big-title::before{content:'';display:block;position:absolute;top:0;right:0;bottom:0;left:0;background-image:url('https://h5bp.github.io/Front-end-Developer-Interview-Questions/assets/images/gradient.svg');background-size:cover;pointer-events:none}.header-big-title::before{mix-blend-mode:screen}}.header-heading{font-size:2.3rem;text-transform:uppercase}.header-big-description{font-size:1.2rem;line-height:1.4;padding:1rem 0}@media (min-width:30em){.header-big-description{font-size:1.5rem}}@media (min-width:60em){.header-big-description{font-size:1.8rem}}.header-description{padding-top:1rem}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--font-family-body);font-weight:400;font-size:1.2rem;line-height:2;color:var(--color-text)}section+section{padding-top:2rem}h1,h2,h3,h4,h5,h6{font-family:var(--font-family-heading);color:var(--color-heading);font-style:normal;line-height:1.2;font-weight:600}section+section{padding-top:2rem}a{color:inherit;text-decoration:none;color:var(--color-secondary);transition:color ease-out var(--transition-duration)}a.current,a:focus:not(.skip-link),a:hover:not(.skip-link){color:var(--color-primary)}a:not(.navigation-anchor)[rel~=external]:after{content:' ➚'}ul:not(.navigation):not(.inline-list){list-style:none}ul:not(.navigation):not(.inline-list) li::before{content:"\25A0";color:var(--color-primary);font-weight:700;display:inline-block;width:1em;margin-left:-1em}.rtl ul:not(.navigation):not(.inline-list) li::before{margin-right:-1em;margin-left:initial}li{margin-bottom:.6rem}b,strong{font-weight:600}time{display:inline-block;color:var(--color-gray-70)}[tabindex='-1']{outline:0}img,svg{vertical-align:middle}img{display:block;max-width:100%;border-radius:var(--border-radius-default)}code{font-family:var(--font-family-code);color:var(--color-code);font-style:normal;font-size:1rem}blockquote:not([class]){padding-left:1rem;margin-left:-1rem;border-left:2px solid var(--color-primary);color:var(--color-gray-70);font-style:italic}code[class*=language-],pre[class*=language-]{font-size:.9rem;font-style:normal}p+pre[class*=language-]{margin-bottom:1.8rem}mark{color:var(--color-highlight);background-color:transparent}dt{font-weight:700}dd+dt{padding-top:.5rem}abbr[title],acronym[title]{background:var(--color-gray-opacity);border:1px solid var(--color-gray-opacity);cursor:help}.container{max-width:66rem;padding:1.5rem 2rem 2rem;margin-right:auto;margin-left:auto}@media (min-width:30rem){.container{padding:3rem 4rem 4rem}}.content li:not(:last-of-type){margin-bottom:1.2rem}.content h2{max-width:33rem}.content>:not(:last-child){margin-bottom:2rem}.content :not(hr)+h2,.content :not(hr)+h3{padding-top:1rem}.content ol:not(.inline-list),.content ul:not(.inline-list){padding-left:1.2rem}.content-simple li:not(:last-of-type){margin-bottom:.5rem}.content-edit{text-align:right;margin-top:2rem}.inline-list{padding:0;list-style:none;display:flex;flex-wrap:wrap}.inline-list li{padding:0 5px;display:inline-block;vertical-align:middle;text-align:center}.inline-list li::before{content:'';margin-left:0}.inline-list li img{display:block;margin:auto;margin-bottom:.6rem}.inline-list li a{display:inline-block;vertical-align:middle;margin:0 .15rem}.inline-list-contributors li a,.inline-list-original li a{font-size:1rem}.avatar{max-width:12rem}hr{border:none;bacground:none;border-bottom:1px solid #efefef}.footer{padding-top:3rem}.footer-text{font-size:.8rem}</style></head><body class=""><div class="topbar"></div><div class="container"><a class="skip-link" href="#main-content">Skip to main content</a><nav class="nav"><ul class="navigation" id="navigation"><li class="navigation-item-emoji navigation-item-home"><a class="navigation-anchor" href="/Front-end-Developer-Interview-Questions/" title="Home"><em>★</em><span>Front-end Developer Interview Questions</span></a></li><li class="navigation-item-emoji navigation-item-translations"><a class="navigation-anchor" href="/Front-end-Developer-Interview-Questions/translations" title="Translations"><em>🌐</em><span>Translations</span></a></li><li class="navigation-item navigation-questions-label"><button class="navigation-toggle" id="navigation-toggle">Questions:</button></li><li class="navigation-item navigation-questions"><ul class="navigation navigation-questions-list"><li class="navigation-item"><a class="navigation-anchor navigation-questions-anchor" href="/Front-end-Developer-Interview-Questions/questions/general-questions/" title="General Questions">General</a></li><li class="navigation-item"><a class="navigation-anchor navigation-questions-anchor" href="/Front-end-Developer-Interview-Questions/questions/html-questions/" title="HTML Questions">HTML</a></li><li class="navigation-item"><a class="navigation-anchor navigation-questions-anchor" href="/Front-end-Developer-Interview-Questions/questions/css-questions/" title="CSS Questions">CSS</a></li><li class="navigation-item"><a class="navigation-anchor navigation-questions-anchor" href="/Front-end-Developer-Interview-Questions/questions/javascript-questions/" title="JavaScript Questions">JavaScript</a></li><li class="navigation-item"><a rel="external noreferrer noopener" target="_blank" class="navigation-anchor navigation-questions-anchor" href="https://scottaohara.github.io/accessibility_interview_questions/" title="Accessibility Questions (external link)">A11y</a></li><li class="navigation-item"><a class="navigation-anchor navigation-questions-anchor" href="/Front-end-Developer-Interview-Questions/questions/testing-questions/" title="Testing Questions">Testing</a></li><li class="navigation-item"><a class="navigation-anchor navigation-questions-anchor" href="/Front-end-Developer-Interview-Questions/questions/performance-questions/" title="Performance Questions">Performance</a></li><li class="navigation-item"><a class="navigation-anchor navigation-questions-anchor" href="/Front-end-Developer-Interview-Questions/questions/network-questions/" title="Network Questions">Network</a></li><li class="navigation-item"><a class="navigation-anchor navigation-questions-anchor" href="/Front-end-Developer-Interview-Questions/questions/coding-questions/" title="Coding Questions">Coding</a></li><li class="navigation-item"><a class="navigation-anchor navigation-questions-anchor" href="/Front-end-Developer-Interview-Questions/questions/fun-questions/" title="Fun Questions">Fun</a></li></ul></li></ul></nav><main id="main-content" tabindex="-1"><header class="header"><h1 class="header-big-title">Въпроси за интервю за front-end разработчици</h1></header><div class="content"><h1>Въпроси за интервю за front-end разработчици</h1><p>Това репозитори съдържа въпроси от интервюта на front-end разработчици, които могат да бъдат използвани за отсяване на потенциални кандидати. Не препоръчваме използването на всеки въпрос за всеки кандидат (това би отнело часове). Избирането на няколко въпроса от списъка би могло да помогне да се проверят търсените умения у кандидатите.</p><p>Статията <a href="http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/">Baseline For Front-End Developers</a> на <a href="http://rmurphey.com/">Rebecca Murphey</a> също е чудесен ресурс за четене преди провеждането на интервю.</p><p><strong>Бележка:</strong> Имайте предвид, че много от тези въпроси могат да породят интересни дискусии и да ви помогнат по-добре да проверите познанията и начина на мислене на кандидата, отколкото ако получавате директен отговор.</p><h2 id="%D1%81%D1%8A%D0%B4%D1%8A%D1%80%D0%B6%D0%B0%D0%BD%D0%B8%D0%B5" tabindex="-1"><a class="header-anchor" href="#%D1%81%D1%8A%D0%B4%D1%8A%D1%80%D0%B6%D0%B0%D0%BD%D0%B8%D0%B5"></a> <a name="toc">Съдържание</a></h2><ol><li><a href="#contributors">Участници в проекта</a></li><li><a href="#general">Общи въпроси</a></li><li><a href="#html">HTML въпроси</a></li><li><a href="#css">CSS въпроси</a></li><li><a href="#js">JS въпроси</a></li><li><a href="#jquery">jQuery въпроси</a></li><li><a href="#testing">Въпроси, свързани с тестване</a></li><li><a href="#performance">Въпроси, свързани с бързодействие</a></li><li><a href="#network">Мрежови въпроси</a></li><li><a href="#jscode">Въпроси, свързани с програмиране</a></li><li><a href="#fun">Забавни въпроси</a></li><li><a href="#references">Допълнителни ресурси</a></li></ol><h4><a href="#toc">[⬆]</a> <a name="contributors">Участници в проекта:</a></h4><p>Мнозинството от въпроси са взети от <a href="http://oksoclap.com/">oksoclap</a> измислени от <a href="http://paulirish.com">Paul Irish</a> (<a href="http://twitter.com/paul_irish">@paul_irish</a>) и благодарение на:</p><ul><li><a href="http://twitter.com/bentruyman">@bentruyman</a> - <a href="http://bentruyman.com">http://bentruyman.com</a></li><li><a href="http://twitter.com/cowboy">@cowboy</a> - <a href="http://benalman.com">http://benalman.com</a></li><li><a href="http://ajpiano">@ajpiano</a> - <a href="http://ajpiano.com">http://ajpiano.com</a></li><li><a href="http://twitter.com/slexaxton">@SlexAxton</a> - <a href="http://alexsexton.com">http://alexsexton.com</a></li><li><a href="http://twitter.com/boazsender">@boazsender</a> - <a href="http://boazsender.com">http://boazsender.com</a></li><li><a href="http://twitter.com/miketaylr">@miketaylr</a> - <a href="http://miketaylr.com">http://miketaylr.com</a></li><li><a href="http://twitter.com/vladikoff">@vladikoff</a> - <a href="http://vladfilippov.com">http://vladfilippov.com</a></li><li><a href="http://twitter.com/gf3">@gf3</a> - <a href="http://gf3.ca">http://gf3.ca</a></li><li><a href="http://twitter.com/jon_neal">@jon_neal</a> - <a href="http://twitter.com/jon_neal">http://twitter.com/jon_neal</a></li><li><a href="http://twitter.com/wookiehangover">@wookiehangover</a> - <a href="http://wookiehangover.com">http://wookiehangover.com</a></li><li><a href="http://twitter.com/iansym">@iansym</a> - <a href="http://twitter.com/iansym">http://twitter.com/iansym</a></li></ul><h4><a href="#toc">[⬆]</a> <a name="general">Общи въпроси:</a></h4><ul><li>Какво научихте вчера / тази седмица?</li><li>Какво ви привлича в писането на код?</li><li>С какво техническо предизвикателство се сблъскахте наскоро и как го решихте?</li><li>Какво свързва потребителския интерфейс, сигурността, функционирането, SEO, поддръжката или технологиите по между им при създаването на уеб приложения или сайтове?</li><li>Разкажете за предпочитанията ви към операционни системи, редактори, браузъри, инструменти и т.н.</li><li>С кои системи за управление на версиите (source control) сте запознати?</li><li>Можете ли да обясните последователността от действия, които извършвате, когато създавате уеб страници?</li><li>Ако имате 5 различни стилови файла, как бихте ги интегрирали?</li><li>Можете ли да обясните разликите между progressive enhancement и graceful degradation?</li><li>Как бихте оптимизирали зареждането на ресурси за дадена уеб страница?</li><li>По колко ресурса едновременно свалят браузърите от даден домейн?<ul><li>Какви са изключенията?</li></ul></li><li>Назовете 3 начина да намалите скоростта на зареждане на уеб страница (забележимата или реалната скорост на зареждане).</li><li>Ако започнете работа по проект, в чийто код са използвани табулации, а вие сте използвали интервали, какво ще направите?</li><li>Обяснете как бихте изградили страница със слайд-шоу.</li><li>Ако можете да научите много добре 1 технология тази година, каква ще е тя?</li><li>Обяснете важността на стандартите и организациите за стандартизация.</li><li>Какво е Flash of unstyled content? Как се справяте с FOUC?</li><li>Обяснете какво е ARIA и екранни четци и как да правим сайтовете по-достъпни.</li><li>Обяснете предимствата и недостатъците на CSS анимациите пред тези на JavaScript.</li><li>Какво означава CORS и какъв проблем решава?</li></ul><h4><a href="#toc">[⬆]</a> <a name="html">HTML въпроси:</a></h4><ul><li>Какво прави <code>doctype</code>?</li><li>Каква е разликата между режимите “standards mode”, “almost standards mode” и “quirks mode”?</li><li>Каква е разликата между HTML и XHTML?</li><li>Има ли проблеми при обработката на страници с <code>application/xhtml+xml</code>?</li><li>Как показвате страници със съдържание на няколко езика?</li><li>Какви неща трябва да се имат предвид, когато правите дизайн или разработвате многоезични страници?</li><li>За какво служат HTML атрибутите, които започват с <code>data-</code>?</li><li>Представете си HTML5 като отворена уеб платформа. Кои са градивните елементи на HTML5?</li><li>Обяснете разликата между бисквитки, <code>sessionStorage</code> и <code>localStorage</code>.</li><li>Обяснете разликата <code><script></code>, <code><script async></code> и <code><script defer></code>.</li><li>Защо е добре да се зарежда CSS <code><link></code> в елемента <code><head></head></code> и JS <code><script></code> преди затварящия таг <code></body></code>? Знаете ли за изключения?</li><li>Какво означава progressive rendering?</li><li>Защо бихте използвали <code>srcset</code> атрибут в <code><img></code> таг? Обяснете процеса, през който минава браузърът, когато обработва съдържанието на този атрибут.</li><li>Използвали ли сте различни шаблонни HTML езици?</li></ul><h4><a href="#toc">[⬆]</a> <a name="css">CSS въпроси:</a></h4><ul><li>Каква е разликата между class и ID в CSS?</li><li>Каква е разликата между “resetting” и “normalizing” в CSS? Кое бихте избрали и защо?</li><li>Обяснете плаващите елементи (floats) и как работят.</li><li>Обяснете z-index и как се формира наслагването на елементите.</li><li>Опишете BFC (Block Formatting Context) и как работи той.</li><li>Кои са различните clearing техники и кои в какъв контекст се използват?</li><li>Обяснете CSS sprite-овете, и как можете да ги вкарате на уеб страница или сайт.</li><li>Кои са любимите ви техники, които заменят картинките и в кои случаи кои от тях използвате?</li><li>Как бихте подходили за да решите специфичните стилове за различните браузъри?</li><li>Как показвате страниците си на браузъри, които не поддържат част от възможностите на HTML5?<ul><li>Какви техники/процеси използвате?</li></ul></li><li>Какви са различните начини визуално да скриете съдържание от уеб страницата (и да го направите видимо само за екранните четци)?</li><li>Използвали ли сте грид система и ако да, коя предпочитате?</li><li>Използвали ли сте media queries или специфичен за мобилните платформи layouts или CSS?</li><li>Запознати ли сте със стилизирането на SVG?</li><li>Как оптимизирате вашите уеб страници за принтиране?</li><li>Кои са някои от “триковете” за писане на ефективен CSS?</li><li>Какви са предимствата/недостатъците при използване на препроцесори?<ul><li>Опишете какво ви харесва и не ви харесва при използването им.</li></ul></li><li>Как реализирате уеб дизайни, които използват нестандартни фонтове?</li><li>Обяснете как уеб браузърите разбират кои елементи отговарят на даден CSS селектор.</li><li>Опишете псевдо-елементите и обяснете за какво се използват.</li><li>Обяснете как разбирате box model и как бихте накарали браузъра с CSS да изпълни layout в различни box model-и.</li><li>Какво прави <code>* { box-sizing: border-box; }</code>? Какви са предимствата му?</li><li>Направете списък на всички стойности на <code>display</code>, за които можете да се сетите.</li><li>Каква е разликата между inline и inline-block?</li><li>Каква е разликата между позиционирането на елементите relative, fixed, absolute и static?</li><li>‘C’ в CSS идва от Cascading. Какъв приоритет имат стиловете при наслагването им (няколко примера)? Как бихте използвали това?</li><li>Какви CSS frameworks сте ползвали самостоятелно или в проекти? Как бихте ги променили / обогатили?</li><li>Тествали ли сте новия CSS Flexbox или Grid specs?</li><li>Каква е разликата между responsive design и adaptive design на сайт?</li><li>Работили ли сте с retina graphics? Ако да, какви техники използвахте?</li><li>Има ли причина да ползвате translate() вместо абсолютно позициониране и обратно? Защо?</li></ul><h4><a href="#toc">[⬆]</a> <a name="js">JS въпроси:</a></h4><ul><li>Обяснете event delegation.</li><li>Обяснете как работи <code>this</code> в JavaScript.</li><li>Обяснете как работи наследяването на прототипи (prototypal inheritance).</li><li>AMD или CommonJS?</li><li>Обяснете защо този код не работи като IIFE: <code>function foo(){ }();</code>.<ul><li>Какво е нужно да се промени, за да може кодът да работи като IIFE?</li></ul></li><li>Каква е разликата между променлива, която е: <code>null</code>, <code>undefined</code> или недекларирана?<ul><li>Как проверявате всяко от тези състояния на променливите?</li></ul></li><li>Какво е closure? Как и защо се използва?</li><li>Кога се използват анонимните функции?</li><li>Как организирате своя код? (module патърн, класическо наследяване?)</li><li>Каква е разликата между host обекти и native обекти?</li><li>Каква е разликата между <code>function Person(){}</code>, <code>var person = Person()</code> и <code>var person = new Person()</code>?</li><li>Каква е разликата между <code>.call</code> и <code>.apply</code>?</li><li>Обяснете <code>Function.prototype.bind</code>?</li><li>В какви случаи бихте използвали <code>document.write()</code>?</li><li>Каква е разликата между feature detection, feature inference, и използването на user agent (UA) string?</li><li>Обяснете AJAX в детайли.</li><li>Какви са предимствата и недостатъците при употребата на AJAX?</li><li>Обяснете как работи JSONP (и защо не е точно AJAX).</li><li>Използвали ли сте JavaScript темплейти?<ul><li>Ако да, коя библиотека сте използвали?</li></ul></li><li>Обяснете “hoisting”.</li><li>Обяснете “event bubbling”.</li><li>Каква е разликата между “attribute” и “property”?</li><li>Защо extending built-in в JavaScript обектите не е добра идея?</li><li>Каква е разликата между събитията “document load” и “document DOMContentLoaded”?</li><li>Каква е разликата между <code>==</code> и <code>===</code>?</li><li>Обяснете same-origin policy от гледна точка на JavaScript.</li><li>Оправете кода, така че да работи:</li></ul><pre class="language-javascript"><code class="language-javascript"><span class="token function">duplicate</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1,2,3,4,5,1,2,3,4,5]</span></code></pre><ul><li>Защо тернарният оператор се нарича така? Какво означава думата “тернарен”?</li><li>Какво е <code>"use strict";</code>? Какви са предимствата и недостатъците на ползването му в кода?</li><li>Напишете for loop, който стига до 100 и извежда “fizz” за всички числа, които се делят на 3, “buzz” за тези, които се делят 5 и “fizzbuzz” за числата, които се делят и на 3 и на 5.</li><li>Защо по правило е добра идея да се остави global scope на един уебсайт непроменен?</li><li>Защо бихте използвали нещо като <code>load</code> събитието? Това събитие има ли недостатъци? Знаете ли алтернативи и защо бихте ги използвали?</li><li>Обяснете какво е single page app и как може да се оптимизира за търсачките.</li><li>Докъде се простира опитът ви с Promises и / или техните polyfills?</li><li>Какви са предимствата и недостатъците при използване на Promises вместо callbacks?</li><li>Кои са някои предимства / недостатъци на писането на JavaScript код на език, който се компилира до JavaScript?</li><li>Какви инструменти и техники използвате, когато дебъгвате JavaScript код?</li><li>Кои конструкции на езика използвате, за да итерирате атрибути (properties) на обекти и елементи в масиви?</li><li>Обяснете разликата между mutable и immutable обекти.<ul><li>Дайте пример за immutable обект в JavaScript.</li><li>Какви са предимствата и недостатъците на това един обект да бъде immutable?</li><li>Как може да направите обект immutablе във Вашия собствен код?</li></ul></li><li>Обяснете разликата между синхронни и асинхронни функции.</li><li>Какво е event loop?<ul><li>Каква е разликата между call stack и task queue?</li></ul></li><li>Обяснете разликите при използването на <code>foo</code> в примерите: <code>function foo() {}</code>; <code>var foo = function() {}</code></li><li>Какви са разликите при създаавнето на променливи с <code>let</code>, <code>var</code> и <code>const</code>?</li></ul><h4><a href="#toc">[⬆]</a> <a name="jquery">jQuery въпроси:</a></h4><ul><li>Обяснете “chaining”.</li><li>Обяснете “deferreds”.</li><li>Какви специфични за jQuery оптимизации, можете да направите?</li><li>Какво прави <code>.end()</code>?</li><li>Как и защо бихте сложили bound event handler в namespace?</li><li>Назовете 4 различни типа стойности, които можете да подадете на jQuery метод.<ul><li>Selector (string), HTML (string), Callback (function), HTMLElement, object, array, element array, jQuery Object и т. н.</li></ul></li><li>Какво е effects (или fx) queue?</li><li>Каква е разликата между <code>.get()</code>, <code>[]</code>, и <code>.eq()</code>?</li><li>Каква е разликата между <code>.bind()</code>, <code>.live()</code>, и <code>.delegate()</code>?</li><li>Каква е разликата между <code>$</code> и <code>$.fn</code>? Или просто: Какво е <code>$.fn</code>?</li><li>Оптимизирайте този селектор:</li></ul><pre class="language-javascript"><code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".foo div#bar:eq(0)"</span><span class="token punctuation">)</span></code></pre><h4><a href="#toc">[⬆]</a> <a name="testing">Въпроси, свързани с тестване:</a></h4><ul><li>Какви са предимствата и недостатъците в тестването на код?</li><li>Какви инструменти бихте могли да използвате, за да тествате как работи Вашия код?</li><li>Каква е разликата между компонентен тест (unit test) и функционален / интеграционен тест (functional / integration test)?</li><li>Каква е целта на инструментите за анализиране на кода (linting tools)?</li></ul><h4><a href="#toc">[⬆]</a> <a name="performance">Въпроси, свързани с бързодействие:</a></h4><ul><li>Какви инструменти бихте използвали, за да откриете проблем, свързан с бързодействието на кода?</li><li>Дайте примери за начини, по които може да подобрите бързодействието на скролирането в сайт.</li><li>Обяснете разликата между layout, painting и compositing.</li></ul><h4><a href="#toc">[⬆]</a> <a name="network">Мрежови въпроси:</a></h4><ul><li>Защо по традиция е препоръчително да се зареждат ресурсите за даден уебсайт от няколко домейна?</li><li>Опишете по най-добрия възможен начин процесът, който се случва от написването на URL-a на един уебсайт до края на зарежаднето му на екрана.</li><li>Какви са разликите между Long-Polling, Websockets и Server-Sent Events?</li><li>Обяснете следните хедъри на request и response:<ul><li>Разлики между <code>Expires</code>, <code>Date</code>, <code>Age</code> и <code>If-Modified-...</code></li><li>Do Not Track</li><li>Cache-Control</li><li>Transfer-Encoding</li><li>ETag</li><li>X-Frame-Options</li></ul></li><li>Какво представляват HTTP методите? Избройте всички HTTP методи, които познавате, и ги обяснете.</li></ul><h4><a href="#toc">[⬆]</a> <a name="jscode">Въпроси, свързани с програмиране:</a></h4><pre class="language-javascript"><code class="language-javascript"><span class="token function">modulo</span><span class="token punctuation">(</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token comment">// 2</span></code></pre><p><em>Въпрос: Имплементирайте функция за намиране на остатък от деление която отговаря на горното условие (да връща 2 при аргументи 12 и 5)</em></p><pre class="language-javascript"><code class="language-javascript"><span class="token string">"i'm a lasagna hog"</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p><em>Въпрос: Каква стойност ще върне горният израз?</em></p><p><strong>Отговор: “goh angasal a m’i”</strong></p><pre class="language-javascript"><code class="language-javascript"><span class="token punctuation">(</span> window<span class="token punctuation">.</span>foo <span class="token operator">||</span> <span class="token punctuation">(</span> window<span class="token punctuation">.</span>foo <span class="token operator">=</span> <span class="token string">"bar"</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p><em>Въпрос: Каква е стойността на <code>window.foo</code>?</em></p><p><strong>Отговор: “bar”, ако <code>window.foo</code> има стойност <code>false</code>, иначе стойността на <code>window.foo</code>)</strong></p><pre class="language-javascript"><code class="language-javascript"><span class="token keyword">var</span> foo <span class="token operator">=</span> <span class="token string">"Hello"</span><span class="token punctuation">;</span> <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> bar <span class="token operator">=</span> <span class="token string">" World"</span><span class="token punctuation">;</span> <span class="token function">alert</span><span class="token punctuation">(</span>foo <span class="token operator">+</span> bar<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">alert</span><span class="token punctuation">(</span>foo <span class="token operator">+</span> bar<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p><em>Въпрос: Какво ще изкарат двете alert функции от горния код?</em></p><p><strong>Отговор: “Hello World” и ReferenceError: bar is not defined</strong></p><pre class="language-javascript"><code class="language-javascript"><span class="token keyword">var</span> foo <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
foo<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
foo<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p><em>Въпрос: Каква е стойността на <code>foo.length</code>?</em></p><p><strong>Отговор: <code>2</code></strong></p><h4><a href="#toc">[⬆]</a> <a name="fun">Забавни въпроси:</a></h4><ul><li>Кое е най-якото нещо, което сте писали и от което сте най-горд?</li><li>Кое най-много ви допада в инструментите за разработчици, които използвате?</li><li>Разработвате ли някакви проекти като хоби? Какви?</li><li>Какво най-много ви харесва в Internet Explorer?</li><li>Как предпочитате кафето си?</li></ul><h4><a href="#toc">[⬆]</a> <a name="references">Допълнителни ресурси:</a></h4><ul><li><a href="http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before">http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before</a></li><li><a href="http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/">http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/</a></li><li><a href="http://css-tricks.com/interview-questions-css/">http://css-tricks.com/interview-questions-css/</a></li></ul></div><div class="content-edit"><a rel="external noreferrer noopener" target="_blank" href="https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/src/translations/bulgarian.md">Edit this page</a></div></main><footer class="footer"><p class="footer-text">Copyright © 2012 - 2024. Contributors to <a href="https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/main/CONTRIBUTORS.md">Front-end-Developer-Interview-Questions.</a><br>Curious about the project? <a href="/Front-end-Developer-Interview-Questions/about/">Read more about here</a>.</p></footer></div><script>console.log("%cA black belt is a white belt that didn't quit.","color: #fff; font-size: 20px; text-shadow: 1px 1px 1px #000; font-family: serif;");var navToggle=document.getElementById("navigation-toggle"),nav=document.getElementById("navigation");navToggle.addEventListener("click",function(){nav.classList.toggle("open")}),window.addEventListener("resize",function(){document.width>960?nav.classList.remove("active"):(nav.classList.add("no-motion"),setTimeout(function(){nav.classList.remove("no-motion")},250))});</script></body></html> |