0. What are your goals for HR in the web front-end interview?
The HR aspect is often the last step to control the quality of talents. Unlike the previous technical aspects, the HR aspect tends to focus on the assessment of employee risks and basic employee quality.
Employment risk assessment, this part is to assess whether the candidate is stable, whether it will bring additional management risks, and whether it can be competent for the job. For example, frequent job-hopping will bring stability risks. HR will consider this carefully. Point, for example, in the interview, the candidate shows the potential of "strengthening". HR will worry that the candidate will have difficulty cooperating with others or disobeying management, which will bring management risks. For example, although the state clearly stipulates that it is in recruitment There must be no discrimination based on gender, age, etc., but an older married woman may have the possibility of giving birth in the near future, and may have long-term maternity leave, and HR will also make an assessment.
Staff quality assessment, this part assesses whether the candidate has the basic qualities of the workplace, whether he has basic communication skills, whether he has team spirit and sense of cooperation, etc. For example, a candidate who is extremely introverted may be communicated to by HR Ability to produce doubts.
Therefore, in communicating with HR, try to maintain a steady, positive and optimistic attitude, and avoid exposing character defects such as rhetoric, negative energy, impetuousness, etc.
1. How to prepare for self-introduction?
In fact, the best way and the most stupid way is to write down the self-introduction. This self-introduction must reflect several essential elements. Simply go through it a few times before the test, and the content of the self-introduction can be expressed smoothly. That's it, don't do the same as memorizing lessons.
It is best to control the time for self-introduction between 1-3 minutes. This time is enough for the examiner to go through your resume. After the examiner finishes reading the resume, it is the best to follow your self-introduction and ask questions. At a comfortable pace, don't come up and start a 10-minute speech. The interviewer will be embarrassed while waiting. Such a long length shows that your self-introduction must be fluent.
2. How to deliberately guide in self-introduction?
If your self-introduction is the same as the current account, without any focus, it is actually difficult for an interviewer to do it, because he can't answer the next...
As long as you give a little guidance, most of the interviewers will pick you up, such as "You mentioned a project in your self-introduction and encountered some difficulties, and then you overcome it, how good is the effect? Wait", if I were an interviewer, I would definitely ask "How did you solve the xx difficulty of your xx project?".
The purpose of the interviewer is to examine the candidate’s ability and evaluate the candidate. Therefore, it is necessary to know what the candidate is good at and whether it matches the position. In most cases, the interviewer is very happy with your intentional or unintentional guidance. In this way, the two-way communication and evaluation will be smooth, rather than deliberately making the candidates difficult.
3. How to focus on matching the technology stack of the current position in the self-introduction?
Your interview resume may contain a variety of technical stacks, but you need to match the technical requirements of your current position during the self-introduction process.
For example, you are currently interviewing for a mobile H5 front-end development position, and you focus on highlighting your experience in the mobile front-end in your self-introduction. At this time, it is very easy to tell yourself how to use Node to support the company's Web projects. Unwise.
4. What are the essential elements for self-introduction?
In the final analysis, self-introduction is a warm-up exercise, so don't take up a lot of space.When you come up, you will spit out yourself from the experience to the study like a running account. It will often be interrupted by impatient interviewers. This also exposed the shortcomings of the candidate's lack of focus and good communication skills.
However, some key information must be reflected. Personally, the following information is necessary:
Personal information: At least show your name, position, and working years, and you must introduce your education background when you graduate. If your former owner is a large factory (such as BAT), it is best to mention that your education is a highlight (985 or post-doctorate or similar to a strong CS school like Beijing University of Posts and Telecommunications) It’s best to mention whether there are other girlfriends, whether you are alone or not, so don’t take up space. This part focuses on "Who are you?".
Technical ability: Briefly introduce your own technology stack. Don't mention the so-called "technology stack" that you have simply used, written a few demos, or read the documentation. Once asked later, it is embarrassing to ask yourself. The focus of this section is "what will you do?".
Skills: Focus on introducing the technology that you are good at, such as performance optimization, high concurrency, system architecture design or communication and coordination skills, etc., do not exaggerate, seek truth from facts, this is the focus of the subsequent investigation. This part focuses on "what are you good at?".
5. What is HTML5 front end?
HTML5 is the latest version of HTML (Hypertext Markup Language). It is a language for constructing and displaying content for the World Wide Web, which is the core technology of the Internet. Specifically, HTML5 contains many new syntactic features. The new elements include
6. What is the difference between HTML5 application cache and browser cache?
The new HTML5 specification allows the browser to pre-fetch some or all of the website assets when connecting to the client, for example, HTML files, images, CSS, JavaScript, etc. In order to obtain such content, the user has not previously needed to access this content. In other words, the application cache can prefetch pages that have not been visited at all, and thus are not available in the regular browser cache. Pre-fetching files can speed up the performance of the site, and users can use the initial broadband to download these content.
7. Understanding and knowledge of Web standards and W3C?
(1) Web standards require that writing tags must be closed, lowercase tags, and not nested randomly, which can increase the search robot's chance of searching web content;
(2) It is recommended to use external link css and js scripts to achieve the separation of structure and behavior, structure and performance, improve the rendering speed of the page, and display the content of the page faster;
(3) The separation of styles and tags, more reasonable semantic tags, so that the content can be accessed by more users, the content can be accessed by a wider range of devices, and there are fewer codes and components, thereby reducing maintenance costs and revisions. more convenient;
(4) There is no need to change the content of the page, you can provide a printed version without copying the content, and improve the ease of use of the website; Following the Web standards established by w3c, it can make it easier for users to read and make web developers more convenient. Good communication.
8. What is the difference between HTML and XHTML?
In order to standardize HTML, W3C formulated the XHTML 1.0 standard in conjunction with XML. This standard does not add any new tags, but only standardizes HTML in accordance with the requirements of XML. 1) The tags in XHTML must be nested correctly, and some tags in HTML can be nested incorrectly with each other. 2) All tags in XHTML must be closed. 3) Specification definition in XHTML: Tag names and attributes are case sensitive, and all XHTML tag names must use lowercase letters. 4) XHTML documents must have root elements. 5) The attribute value of the tag in XHTML should use double quotes ".
9. What is the new HTML5 document type and character set?
HTML5 document type HTML5 uses UTF-8 character set
10. Two ways to deal with compatibility issues?
1) IE6/IE7/IE8 support tags generated by the document method, and use this feature to make these browsers support HTML5 new tags.
2) Use the html5shim framework. In addition, the way of DOCTYPE declaration is an important factor to distinguish HTML and HTML5 marks. In addition, it can be distinguished according to the newly added structure and function elements.
11. Briefly describe what is the API in the latest HTML5 standard?
The API list in the latest HTML5 standard mainly includes Canvas, timed media playback, offline storage database, document editing, drag and drop, cross-document messaging, browser history management, MIME type and protocol handler registration. Among them, Canvas is composed of drawable areas with height and width attributes defined in HTML code. JavaScript code can access this area through a complete set of drawing functions, which is similar to other common 2D APIs, and therefore allows dynamic graphics generation. Some of the intended uses of Canvas include building graphics, animation, games, and image synthesis.
12. CSS, JS code compression, and code CDN hosting, image integration.
(1) CSS, JS code compression:
You can use gulp's gulp-uglify, gulp-minify-css module to complete; you can use webpack's UglifyJsPlugin compression plug-in to complete.
(2)CDN：
The content delivery network (CDN) is a strategically deployed overall system, including four essentials: distributed storage, load balancing, network request redirection, and content management. The main features are: local Cache acceleration, mirroring service, remote acceleration, and bandwidth optimization. The key technologies are: content publishing, content routing, content exchange, and performance management. CDN website acceleration is suitable for websites that focus on consulting. CDN accelerates the domain name, not the website server. CDN and mirror sites do not require visitors to manually select the mirror sites to visit. After CDN is used, the website can use CDN to obtain acceleration effect without any modification. If the webpage you see after going through the CDN is still an old webpage, you can use the URL push service to solve the problem. New webpages and pictures do not need URL push. Dynamic web pages can be used without caching web pages and pictures that require high immediacy. CDN can be managed through git or SVN.
(3) Picture integration
One of the most effective ways to reduce the loading time of a website is to reduce the number of HTTP requests for the website. An effective way to achieve this goal is through CSS Sprites-integrate multiple images into one image, and then use CSS to position it. The disadvantage is poor maintainability. You can use Baidu's fis/webpack to automatically manage sprites.
13.How to use webpack to upload code to the server and transcode test?
(1) Code upload:
You can use sftp-webpack-plugin, but the subfolders will be extracted, which is not elegant. You can use gulp+webpack to achieve.
(2) Transcoding test
webpack uses babel to transcode ES6, and open devtool: "source-map" for browser testing. Use karma or mocha for unit testing.
14. What is the online process of the project?
(1) Process recommendations
- Simulate online development environment
Local reverse proxy online real environment development is sufficient. (apache, nginx, nodejs can be implemented)
- Simulate the online test environment
To simulate the online test environment, in fact, a test machine with real data is needed. It is recommended to set up daily if there is no condition, just use the online data to test it, but the program part is only based on your test environment. daily is the best.
- Linkable test environment
There are two types of test environments that can be adjusted continuously. One is that the development and testing are in a local area network segment, and you can directly bind the hosts. If you are not in a network segment, each person will be assigned a virtual test machine and placed on the company's intranet that everyone can access. The code is directly distributed. That's it.
- Automated online system
Jenkins can be used as an automated online system. If not, you can build a simple online system by yourself. The principle is to extract the latest trunk or master every time you go online, make a tag, mark it with a timestamp, and then distribute it to cdn. There are only 2 functions in the interface, tagging, rolling back to a tag, and deploying.
- Suitable for front-end and back-end development process
The development process is based on the tools, construction, and framework used by the company. The principle is to decentralize and develop independently, without interfering with each other, just have hosts that can be tied to it during continuous adjustment.
(2) Simple and operable process
-
The code is managed by git, new branches are created for new requirements, branch development, and trunk release
-
Go online and follow the simple online system, see the previous section
-
Connect to the publishing system through gulp+webpack, one-click integration, and only care about the original code development locally
-
The local environment is reverse proxy server through webpack
-
Build a local test machine based on linux to automatically complete the build+push function
15. How is engineering managed?
gulp sum webpack
16, git commonly used commands
Workspace: Workspace
Index / Stage: Temporary storage area
Repository: warehouse area (or local warehouse)
Remote: remote warehouse
17. Comparison of webpack and gulp
Gulp is a front-end automated construction tool to standardize the front-end development process, realize front-end and back-end separation, modular development, version control, file merging and compression, mock data and other functions. To put it in perspective, "Gulp is like a product assembly line. The entire product is controlled by the assembly line from scratch. We can manage the product on the assembly line." In addition, Gulp uses tasks to manage the entire development process. Build.
Webpack is currently the most popular front-end resource modular management and packaging tool. It can package many loose modules according to dependencies and rules into front-end resources that meet the deployment of the production environment. It is also possible to separate the modules loaded on demand and load them asynchronously when needed. Through the conversion of loader, any form of resources can be regarded as modules, such as CommonJs module, AMD module, ES6 module, CSS, image, JSON, Coffeescript, LESS, etc.
Gulp and Webpack function realization comparison: compare Gulp and Webpack from eight aspects: basic concepts, starting local server, sass/less precompilation, modular development, file merging and compression, mock data, version control, and component control.
18. What should I do if the webpack package file is too large?
webpack packs all our files into one JS file, so even if you are a small project, the packaged file will be very large. You can start optimization from removing unnecessary plug-ins, extracting third-party libraries, code compression, code segmentation, and setting up caching.
19. I don't want others to steal your pictures, what should I do if I access your server resources?
There are two main anti-leech methods commonly used at present:
(1) Set Referer: suitable for users who do not want to write code, but also for users who like to develop
(2) Signed URL: suitable for users who like to develop
20. How to choose between sprite and base64?
The css sprite is not particularly used for some small icons, and the volume of one is slightly larger, such as larger than 10K (there is no strict definition).
Base64, used for small icons, is small (compared to css sprites), it doesn't matter how much. Font icons are more convenient to use in some icon libraries made by others (there are also a few made by yourself). His icons can only be used in monochrome, and icons can only be used in one color.
21.How does webpack introduce third-party libraries?
Take jQuery as an example:
entry: {
page: ‘path/to/page.js’,
jquery: ‘node_modules/jquery/dist/jquery.min.js’
}
new HtmlWebpackPlugin({
filename: ‘index.html’,
template: ‘index.html’,
inject: true,
chunks: ['jquery','page'] // insert script tags in order
})
22. Can you explain the CSS box model?
The CSS css box model is also known as the box model, which contains elements of content, padding, border, and margin.
23. What is the difference between XHTML and HTML?
XHTML is version 4.0 of html. Among them, the main difference is: XHTML elements must be nested correctly.
XHTML elements must be closed, tag names must be in lowercase letters, and XHTML documents must have root elements.
24. Describe the role and purpose of CSS reset
CSS reset refers to resetting the default style of the browser, because there are many browsers, and each browser has its own default style, which will cause a page to be displayed differently in multiple browsers, so we Some processing needs to be done to make the display consistent under each browser, so CSS reset is required.
25. How do you optimize website files and resources?
Half of the project resources are classified and managed, and js is compressed from the bottom, CSS is compressed at the top, and CDN caching is used.
26. What is the difference between event binding and ordinary events?
The common method of adding events does not support adding multiple events, the bottom event will cover the above, and event binding (addEventListener) method can add multiple events.
27. What are the compatible writing methods under IE and standards?
Differences in scripts, differences in CSS, and differences in obtaining the current position of the mouse, and obtaining the height and width of the window.
28. What does Doctype do? How to distinguish between strict mode and promiscuous mode? What are their meanings?
(1). The declaration is at the top of the document, before the label. Tell the browser's parser what document type specification to use to parse this document.
(2) The typesetting and JS operation mode of strict mode are operated according to the highest standard supported by the browser.
(3) In the promiscuous mode, the page is displayed in a loosely backward compatible manner. Simulate the behavior of older browsers to prevent the site from not working.
(4) The non-existent or incorrect format of DOCTYPE will cause the document to be presented in promiscuous mode.
29. What are the inline elements? What are the block-level elements?
(1) The CSS specification stipulates that each element has a display attribute to determine the type of the element, and each element has a default display value. For example, the default display attribute value of div is "block", which becomes a "block-level" element; span The default display attribute value is "inline", which is an "inline" element.
(2) In-line elements are: ab span img input select strong (emphasized tone) Block-level elements are: div ulol li dl dtdd h1 h2 h3 h4...p
30. What is the difference between link and @import?
(1) Link belongs to XHTML tags, and @import is provided by CSS;
(2) When the page is loaded, the link will be loaded at the same time, and the CSS referenced by @import will wait until the page is loaded before loading;
(3) Import can only be recognized above IE5, and link is an XHTML tag, so there is no compatibility problem;
(4) The weight of the link style style is higher than the weight of @import.
31. What is the kernel of the browser?
The kernel of IE browser Trident, Gecko of Mozilla, Blink of Chrome (a branch of WebKit), Opera kernel was originally Presto, now Blink;
32. What are the new features of HTML5? How to deal with the browser compatibility issues of HTML5 new tags? How to distinguish between HTML and HTML5?
HTML5 is no longer a subset of SGML. It is mainly about the addition of functions such as images, locations, storage, and multitasking.
The video and audio elements of the painting canvas used for media playback are locally stored offline in localStorage for long-term storage of data, and the data is not lost after the browser is closed; the data in sessionStorage is automatically deleted after the browser is closed. Content elements with better semantics, such as article, footer, header, nav, section form controls, calendar, date, time, email, url, search new technologies webworker, websockt, Geolocation
33. How do you understand semantics?
Do the right thing with the right label!
HTML semantics is to structure the content of the page to facilitate the analysis of browsers and search engines; it is also displayed in a document format without the style of CCS, and it is easy to read. Search engine crawlers rely on tags to determine the context and the weight of each keyword, which is conducive to SEO. Make it easier for people who read the source code to divide the website into sections, which is convenient for reading, maintaining and understanding.
34. How many ways are there for offline storage of HTML5?
LocalStorage stores data for a long time, and the data is not lost after the browser is closed; sessionStorage data is automatically deleted after the browser is closed.
35. What are the disadvantages of iframe?
iframe will block the Onload event of the main page;
The iframe and the main page share the connection pool, and the browser has restrictions on the connection of the same domain, so it will affect the parallel loading of the page. These two disadvantages need to be considered before using iframes. If you need to use an iframe, it is best to dynamically add the src attribute value to the iframe through javascript, so that the above two problems can be bypassed.
36. Please describe the difference between cookies, sessionStorage and localStorage?
Cookies are passed back and forth between the browser and the server. SessionStorage and localStorage will not have more storage space than sessionStorage and localStorage; sessionStorage and localStorage have more rich and easy-to-use interfaces; sessionStorage and localStorage have separate storage spaces.
37. What is the difference between null and undefined?
Null is an object that represents "none", when converted to a value, it is 0; undefined is an original value that represents "none", and when converted to a value, it is NaN.
When the declared variable has not been initialized, the default value of the variable is undefined.
Null is used to indicate an object that does not yet exist, and is often used to indicate that a function attempts to return an object that does not exist.
undefined means "missing value", that is, there should be a value here, but it has not been defined yet. Typical usage is as follows.
(1) If the variable is declared but not assigned, it is equal to undefined.
(2) When the function is called, if the parameter that should be provided is not provided, the parameter is equal to undefined.
(3) If the object is not assigned, the value of this property is undefined.
(4) When the function has no return value, it returns undefined by default.
Null means "no object", that is, there should be no value here. Typical usage is as follows.
(1) As a parameter of a function, it means that the parameter of the function is not an object.
(2) As the end of the object prototype chain.
38. List the differences between IE and finefox
The differences are as follows.
（1）IE支持currentStyle；Firefox使用getComputStyle。
（2）IE使用innerText；Firefox使用textContent。
（3）在透明度滤镜方面，IE使用filter:alpha(opacity=num)；Firefox使用-moz-opacity:num。
（4）在事件方面，IE使用attachEvent：Firefox使用addEventListener。
（5）对于鼠标位置：IE使用event.clientX；Firefox使用event.pageX。
（6）IE使用event.srcElement；Firefox使用event.target。
（7）要消除list的原点，IE中仅须使margin:0即可达到最终效果；Firetox中需要设置margin:0、padding:0和list-style:none。
（8）CSS圆角：IE7以下不支持圆角。
39. How to create, add, remove, replace, insert and find nodes in DOM operations?
具体方法如下。
（1）通过以下代码创建新节点。
createDocumentFragment()//创建一个DOM片段
createElement()//创建一个具体的元素
createTextNode()//创建一个文本节点
（2）通过以下代码添加、移除、替换、插入节点。
appendChild()
removeChild()
replaceChild()
insertBefore()//并没有insertAfter()
（3）通过以下代码查找节点。
getElementsByTagName()//通过标签名称查找节点
getElementsByName()//通过元素的name属性的值查找节点(IE容错能力较强，会得到一个数
//组，其中包括id等于name值的节点)
getElementById()//通过元素Id查找节点，具有唯一性
40, performance optimization
In short, Optimize is to make the system run faster and the time required to complete a specific function is shorter without affecting the correctness of the system. So how to improve performance? You can take the following methods:
1. Reduce the number of http requests
80% of the response time is spent downloading web content (images, stylesheets, javascripts, scripts, flash, etc.). Reducing the number of requests is the key to shortening the response time! The number of requests can be reduced by simplifying the page design, but the following techniques can be used for more page content.
2. Reduce the number of DNS queries
DNS queries also consume response time. If the content of our web pages comes from different domains (for example, open advertisements are embedded, external images or scripts are referenced), then it will take a certain amount of time for the client to resolve these domains for the first time. DNS query results are cached in the local system and browser for a period of time, so DNS query generally affects the response speed of the first visit.
3. Cache Ajax
Ajax can help us download web content asynchronously, but even if some web content is asynchronous, the user is still waiting for its return result. For example, the return of ajax is a drop-down list of user contacts. So we still have to pay attention to try to apply the following rules to improve the response speed of ajax.
4. Lazy loading
Lazy loading discussed here requires us to know what is the minimum set of content required for the initial loading of our web page. The rest of the content can be pushed to the lazy-loaded collection.
Javascript is typical for lazy loading of content. A more radical approach is to make sure that the web page can basically work without Javascript when developing web pages, and then delay loading scripts to complete some advanced functions.
41. What is event delegation?
Analysis: Event delegation essentially uses the mechanism of browser event bubbling. Because the event is uploaded to the parent node during the bubbling process, and the parent node can obtain the target node through the event object, the listener function of the child node can be defined on the parent node, and the listener function of the parent node handles multiple child elements uniformly The event, this way is called event proxy.
Using the event proxy, we can avoid the need to bind a listener event to each child element, which reduces the consumption of memory. And using the event proxy, we can also implement dynamic binding of events. For example, if a new child node is added, we don’t need to separately add a listener event to it. The event that occurs will be handed over to the listener function in the parent element. To deal with.