Some time ago, I concentrated on sorting out interview questions about the front-end. Thanks to the patient and conscientious brothers Kaihao and Wen Dong for their recent guidance and advice. You can pass these questions and you can check your level below.

https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/Translations/Chinese

I also use my spare time (Afternoon and evening when there are no classes scheduled for three days) Try to write down your own answers. My level is limited, so I hope you can understand me.

Only the first half is provided for the time being. Some answers about js and jQuery in the second half are not fully confirmed and will be released later.

What did you learn yesterday/this week?

During this incident, I have been sorting out interview questions about the front-end. The purpose of sorting out these questions is not only to learn how to cope with the upcoming interview, but also to supplement basic knowledge. The progress of daily project development is too fast, and many attributes or methods are forgotten after use. This will cause another hidden danger. Because the basic knowledge is not solid enough and the commonly used methods are not used proficiently enough, it will be difficult to develop projects efficiently.

With solid basic knowledge, you can expect to go further.

1) Knowing the W3C standards, when writing HTML, you will avoid the hidden dangers of "unclosed tags, random nesting, and mixed case" that may cause inconsistent display in different browsers.

2) Understand the "cascading" rules of CSS, organize and compare the methods of clear floating and centering, and also discover some uncommon attributes. Therefore, it is helpful to write style sheets efficiently in the future.

　Wait, wait

What aspects of writing code excite or interest you?

What excites me most about writing code is the process of learning new technologies and trying new visual effects.

For example, on the topview recruitment website, considering the rich interactions and functions on the future pages, the script files will be larger. Although general browsers have asynchronous loading functions for files, these files refer to image and video style sheets, etc., and do not contain scripts. This means that when the script is loaded, it will cause blockage, and the loading of the script will block the loading of images on the page. This means that because the script file is too large, users may need to wait for a longer event. When the basic elements such as scripts inside the page have not been loaded, and the styles and structures have been loaded, the css3 animation appears, and the four small balls rotate and scroll smoothly until the script is completely loaded.

The front-end itself is a beautiful and interesting field. For many websites or systems, the functions provided by the backend are the core modules, but it depends on whether the website or system can continue to attract users' attention, whether it can stand out among the same type of products, and whether the front-end interaction is humane and Whether the performance is stable and efficient accounts for the vast majority of factors. A good user experience, giving them a positive and efficient user experience, and even changing the public's lifestyle is exactly my original intention of learning programming.

(The interviewer may ask: How did you achieve this effect or what other efforts have you made regarding user experience? It doesn’t matter. I prepared carefully. I even need to compare the difference between CSS3 transition and animation. , in view of the limited space, the specific use of css3 will not be listed here. The answers to user experience will be answered below)

/*@keyframes 規(guī)則用于創(chuàng)建動(dòng)畫。在 @keyframes 中規(guī)定某項(xiàng) CSS 樣式，就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動(dòng)畫效果。*/@-webkit-keyframes spin {　　0% {　　　　-webkit-transform:rotate(0deg);　　}　　50% {　　　　-webkit-transform:rotate(-180deg);　　}　　100% {　　　　-webkit-transform:rotate(-360deg);　　}}/*使用 @keyframes 中創(chuàng)建動(dòng)畫，需要把它捆綁到某個(gè)選擇器，否則不會(huì)產(chǎn)生動(dòng)畫效果。通過(guò)規(guī)定至少以下兩項(xiàng) CSS3 動(dòng)畫屬性，即可將動(dòng)畫綁定到選擇器：　　　　規(guī)定動(dòng)畫的名稱　　　　規(guī)定動(dòng)畫的時(shí)長(zhǎng)*/-webkit-animation:spin 1.5s linear infinite;-moz-animation:spin 1.5s linear infinite;

For details, please refer to: http://www.w3school.com.cn/css3/css3_animation.asp

Brother Wen Dong recommends: http://www.tuicool.com/articles/NBbQjy3

In the process of making a web application or website, how do you consider its UI, security, performance, SEO, maintainability and technical factors?

(If you ask me this question, I will be very excited, because you can talk for half an hour.)

　

Talk about what you like development environment. (Such as operating system, editor, browser, tools, etc.)

　(There are two sets of development environments, one is used for the development of daily team projects, my jdk, tomcat, photoshop etc. are all deployed and installed on the wins system; the other set is used to "pretend". Well, for a patient with difficulty in choosing like me, I struggled for a while and finally decided to talk about the "pretend" development environment)

The operating system is linux ubuntu. It is very convenient for me to access common linux commands, download and install, transfer, add and delete files (will the interviewer ask what commands?)

The editor is brackets, which is a free, open source and cross-platform HTML/CSS/JavaScript front-end WEB integrated development environment that is simple, elegant and fast!

The browser is Chrome, which provides a wealth of development tools, such as single-step debugging, simulating different pixel devices, and the ability to display more CSS3 attributes.

　

*你最熟悉哪一套版本控制系統(tǒng)？

（這個(gè)問(wèn)題，用過(guò)git，用過(guò)myeclipse里的svn，用過(guò)tortoiseSVN將代碼上傳到sinaapp服務(wù)器，但是都不是很熟悉，只好翻了一下《Pro.Git-zh_CN》）

　　在Git 中的絕大多數(shù)操作都只需要訪問(wèn)本地文件和資源，不用連網(wǎng)。對(duì)于任何一個(gè)文件，在Git 內(nèi)都只有三種狀態(tài)：已提交（committed），已修改（modified）和已暫存（staged）。已提交表示該文件已經(jīng)被安全地保存在本地?cái)?shù)據(jù)庫(kù)中了；已修改表示修改了某個(gè)文件，但還沒(méi)有提交保存；已暫存表示把已修改的文件放在下次提交時(shí)要保存的清單中?！?/p>

基本的Git 工作流程如下所示：
　　1. 在工作目錄中修改某些文件。
　　2. 對(duì)這些修改了的文件作快照，并保存到暫存區(qū)域。
　　3. 提交更新，將保存在暫存區(qū)域的文件快照轉(zhuǎn)儲(chǔ)到git 目錄中。

常用命令：

//用git 把Git 項(xiàng)目倉(cāng)庫(kù)克隆到本地，以便日后隨時(shí)更新：$ git clone git://git.kernel.org/pub/scm/git/git.git//git add 命令告訴Git 開始對(duì)這些文件進(jìn)行跟蹤，然后提交：$ git add filenme.html//每次準(zhǔn)備提交前，先用git status 看下，是不是都已暫存起來(lái)了，然后再運(yùn)行提交命令$ git commit -m 'initial project version'// 把本地倉(cāng)庫(kù)提交到遠(yuǎn)程倉(cāng)庫(kù)的master分支中$ git push origin master 

你能描述一下當(dāng)你制作一個(gè)網(wǎng)頁(yè)的工作流程嗎？

　　1）根據(jù)需求，確定主題。透徹深入所做網(wǎng)站的核心功能和關(guān)鍵。

　　2）收集資料。從對(duì)比相同類型的網(wǎng)站（慣用而熟悉的樣式，用戶更樂(lè)意接受），參照別人可行的實(shí)現(xiàn)方法。　　3）規(guī)劃網(wǎng)站。抽離出類似的模塊和可重用的部件。如果是響應(yīng)式網(wǎng)站就需要設(shè)定斷點(diǎn)，根據(jù)不同寬度屏幕設(shè)定樣式?！　?）設(shè)計(jì)數(shù)據(jù)庫(kù)?！　?）搭建基本的框架。引入重置樣式表reset.css和字體樣式表font.css，風(fēng)格統(tǒng)一的圖標(biāo)還有后臺(tái)需要用到的包?！　?）編碼和調(diào)試。注意統(tǒng)一命名和編碼規(guī)范。當(dāng)多人開發(fā)時(shí)，還需要制定規(guī)范文檔。　　7）上傳測(cè)試。利用FTP工具，把網(wǎng)站發(fā)布到自己申請(qǐng)的主頁(yè)存放服務(wù)器上。網(wǎng)站上傳以后，你要在瀏覽器中打開自己的網(wǎng)站，逐頁(yè)逐個(gè)鏈接的進(jìn)行測(cè)試，發(fā)現(xiàn)問(wèn)題，及時(shí)修改，然后再上傳測(cè)試。 　　8）推廣宣傳 。不斷宣傳，提高網(wǎng)站的訪問(wèn)率和知名度。推廣的方法有很多，例如到搜索引擎上注冊(cè)、與別的網(wǎng)站交換鏈接、加入廣告鏈等。 

　　9）維護(hù)更新 。網(wǎng)站要注意經(jīng)常維護(hù)更新內(nèi)容，保持內(nèi)容的新鮮，不要一做好就放在那兒不變了，只有不斷地給它補(bǔ)充新的內(nèi)容，才能夠吸引住瀏覽者 

　?。ň唧w還需要集合我的實(shí)際經(jīng)驗(yàn)：http://www.cnblogs.com/0603ljx/p/4284521.html）　　

你能描述一下漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)之間的不同嗎?

　　　　它們是看待同種事物的兩種觀點(diǎn)，它們關(guān)注在同一個(gè)網(wǎng)站同一功能在不同設(shè)備不同瀏覽器下的表現(xiàn)：

　　　　漸進(jìn)增強(qiáng)，一開始值構(gòu)建站點(diǎn)的最小特性，然后不斷針對(duì)個(gè)瀏覽器追加功能，性能越好的設(shè)備能夠顯示更加出眾的效果。

　　　　優(yōu)雅降級(jí)，一開始就構(gòu)造站點(diǎn)的完整功能，然后針對(duì)瀏覽器測(cè)試和修復(fù)。

　　　　web標(biāo)準(zhǔn)對(duì)可訪問(wèn)性做了如下定義：web內(nèi)容對(duì)于殘障用戶或者普通的可閱讀和可理解性。無(wú)論用戶是否殘障，都得通過(guò)用戶代理（User Agent）來(lái)訪問(wèn)Web內(nèi)容。因此要提高可訪問(wèn)性，首先得考慮各種用戶代理 ：桌面瀏覽器、語(yǔ)音瀏覽器、移動(dòng)電話、車載個(gè)人電腦等等。還得考慮用戶訪問(wèn)Web內(nèi)容時(shí)的環(huán)境限制 。比如：我們真的要考慮瀏覽器禁用JavaScript/CSS的情形嗎？我的理解是，要考慮的其實(shí)不是禁用了JavaScript/CSS的瀏覽器，而是那些對(duì)JavaScript/CSS不支持或支持不好的用戶代理。比如語(yǔ)音閱讀器，手機(jī)瀏覽器等，JavaScript提供的是一層可訪問(wèn)性，不能代替內(nèi)容本身。

　　　　當(dāng)然，從漸進(jìn)增強(qiáng)的角度講，鼓勵(lì)使用高級(jí)特性，只是同時(shí)要做到優(yōu)雅降級(jí)，讓低端用戶代理上，也能保留低保真的體驗(yàn)。（除了用戶代理，還有什么方法檢測(cè)客戶端設(shè)備？特性檢測(cè)，css3媒體查詢）

　　(講講我在平時(shí)項(xiàng)目中，在“漸進(jìn)增強(qiáng)”和“優(yōu)雅降級(jí)”的努力)

如果提到了特性檢測(cè)，可以加分。

　　　　　　

假若你有5個(gè)不同的 CSS 文件, 加載進(jìn)頁(yè)面的最好方式是?
文件拼合，減少http請(qǐng)求。

　　用一個(gè)大的CSS文件替代多個(gè)小體積的CSS文件這是一個(gè)很好的實(shí)踐，可以獲得更好的可維護(hù)性，但是在網(wǎng)站性能方面會(huì)產(chǎn)生一定的影響（這里指的是隨著文件體積的增大，隨之消耗服務(wù)器的內(nèi)存也會(huì)增加）。盡管你應(yīng)該把CSS文件拆分成小塊，但是當(dāng)瀏覽器請(qǐng)求這些文件時(shí)，會(huì)產(chǎn)生同等數(shù)量的http請(qǐng)求。每個(gè)http請(qǐng)求都會(huì)產(chǎn)生一次從你的瀏覽器到服務(wù)器端網(wǎng)絡(luò)往返過(guò)程，并且導(dǎo)致推遲到達(dá)服務(wù)器端和返回瀏覽器端的時(shí)間，我們稱之為延遲。因此，如果你有4個(gè)Javascript和3個(gè)css文件在頁(yè)面中被加載，你浪費(fèi)掉了7次因網(wǎng)絡(luò)往返過(guò)程產(chǎn)生的時(shí)間。在美國(guó)，延遲平均是70毫秒，這樣你就浪費(fèi)了7*70 = 490毫秒，大致延遲了半秒的時(shí)間。在美國(guó)之外的國(guó)家訪問(wèn)你的頁(yè)面，平均延遲大約是200毫秒，這意味著你的頁(yè)面有1400毫秒的時(shí)間是在等待中度過(guò)。瀏覽器在你的CSS完全加載完成之前是不能很好的渲染你的頁(yè)面的。因此越多的延遲讓你的頁(yè)面載入越慢。

Please explain what "semantic HTML" is

　Another important way to separate structure and presentation is to use semantic markup to structure documents content. The existence of an XHTML element means that the marked content has corresponding structural meaning. For example,

is used to mark paragraphs

to mark titles

• tag lists. Do not overuse

  Semantic tags are often related to the default style. For example, the Hx series indicates the title, which will be given the default block-level bold and centered style; , are used to distinguish It plays the role of emphasis on other words. Used to tell you exactly what they are used for.

  Semantic tags allow everyone to more intuitively understand the uses of tags and attributes. Semantic web pages are friendly to search engines and are easier to be crawled by search engines, which is conducive to promotion.

• *How do you optimize your website’s files and resources?
• The expected solutions include:
• File merging (same as the above question "If you have 5 different CSS files, what is the best way to load them into the page?" )

Reduce the number of calls to other pages and files. Generally, in order to make the page lively, we will use a lot of background to load background images, and each background image will generate an HTTP request. To improve this situation, you can use a useful background-position attribute of CSS to load the background image. , we combine multiple images that need to be loaded frequently into a single image . When loading is required, you can use: background:url(....) no-repeat x-offset y-offset; Form loading can reduce the HTTP request for loading this part of the image to 1.

• File minimization/file compression

　That is, compress the content that needs to be transmitted and then transfer it to the client and then decompress , so the amount of data transmitted on the network will be greatly increased decrease. Usually, Apache and Nginx on the server can directly enable this setting. You can also directly set the transmission file header from the code perspective, add gzip settings, or directly set it from the load balancing device. However, it should be noted that this setting will slightly increase the load on the server. It is recommended that websites whose server performance is not very good should be carefully considered.

• Use CDN hosting

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 wealthgenegene in content delivery network, is a content distribution network. The basic idea is to avoid bottlenecks and links on the Internet that may affect data transmission speed and stability as much as possible, so that content transmission can be faster and more stable. Its purpose is to enable users to obtain the required content nearby, solve the congestion situation of the Internet network, and improve the response speed of users' access to the website.

• Use of cache

Ajax calls all use the cache call method, which is generally implemented using the additional feature parameter method. Pay attention to the


Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Show More

Hot Article
Guide: Stellar Blade Save File Location/Save File Lost/Not Saving
4 weeks ago By DDD
Oguri Cap Build Guide | A Pretty Derby Musume
2 weeks ago By Jack chen
Agnes Tachyon Build Guide | A Pretty Derby Musume
2 weeks ago By Jack chen
Dune: Awakening - Advanced Planetologist Quest Walkthrough
4 weeks ago By Jack chen
Date Everything: Dirk And Harper Relationship Guide
4 weeks ago By Jack chen
Show More

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)
Show More

Hot Topics
Where is the login entrance for gmail email?
8638
17
Java Tutorial
1783
16
CakePHP Tutorial
1728
56
Laravel Tutorial
1579
28
PHP Tutorial
1444
31
Show More