This is a collection of some of the most common interview questions and some of the questions I have encountered during the interview process. Through the collation of the knowledge and the summary of experience, I hope to help more front-end interviewers.

1. What is the structure of a Web front-end project? What are the naming conventions for files?

Project structure specification

Page file: named after the project name, for example, shop

Js file: name it js

CSS file: Name it CSS

Image file: name it “Images”

Data file: name it data

File storage specification: Storage by project module, for example, user information management

Page file storage, shop/the userinfo/userlist. HTML

Js file: js/userinfo/userlist.js

CSS styles: CSS/the userinfo/userlist. CSS

** Note: ** pictures are generally classified according to their functions, such as small ICONS and animated pictures

Animated images: images/ GIF /…

Icon library: Images/Flags /…

Naming conventions for project files

Page/JS/CSS file specification: project name – module name – page name, for example: shop-user-index.html Home page of user module.

Note: js generally contains the common js name commo.js; CSS styles will contain the common CSS, commonly named common.css.

2. Talk about browser compatibility

This question is very abstract, the more abstract the question can show our ability to express, and the interviewer likes to ask you according to your answer, constantly interrupting your thinking, this time do not panic, must believe in yourself. Answer the train of thought

During development, we will specify the lowest version of the browser that the project should be compatible with. My previous project requires compatibility with IE8.0 or above, Chrome 48 or above, and FireFox 44 or above. With these basic requirements in mind, it is important to consider CSS styles and JavaScript compatibility in these browsers

HTML section 1.h5 The new tag is recognized by browsers below IE9

2. The ul label has a default margin in IE6 / IE7, but the UL label has a default margin in IE8 and beyond. Solution: Set the inner and outer margins of the UL to 0

CSS style compatibility

1. CSS hack problem: mainly for different versions of IE, different browsers write different IE conditional comment hack:

Display :block; display:block; display:block; display:block;

Display :block; display:block; display:block;

4.IE6 has a 3px bug between two floats: set the right element to float:left;

5.IE6 has no concept of min-width, its default width is min-width

Margin :0 auto; Text-align :center; text-align:center;

7. Hyperlinks that have been clicked no longer have hover and active properties. “:visited”: the state of a tag that has been visited; “:hover”: hover over a tag; “:active”: a Indicates the status of the label when the mouse is pressed.

8. After absolute or relative positioning is used, the setting of Z-index in IE is invalid. The reason is that the element depends on the z-index of the parent element, but the parent element is 0 by default

9. Internet Explorer 6 cannot set 1px line height due to its default line height: overflow:hidden; Or the line – height: 1 px;

JavaScript compatibility

1. The standard event binding function is addEventListener, but in IE it is attachEvent.

2. Event capture methods are inconsistent, standard browsers are from the outside in, while IE is from the inside out, but the end result is the IE standard as the standard

3. Window. event Is obtained. The method of obtaining the target element is also different. The standard browser is event.target, while IE is event.srcElement

4. The value of the date processing function obtained in the earlier version of IE is not the difference from 1900. However, the value obtained in the earlier version of IE is the same as that obtained in the standard browser and is also the difference from 1900. Var year= new Date().getYear();

5. Ajax is implemented in different ways, which I understand is to obtain XMLHttpRequest is different, IE is activeXObject

Html7. The method of obtaining the parentNode and child node of the DOM node is different. Other browsers: parentNode parentNode. parentElement parentElement.children

3. What are the methods of page optimization

Page optimization methods are very many, it is best to be able to classify these optimization solutions, the best solution can be combined with the actual development of the problem to express.

Optimized scheme

Reduced operation

  • Keep HTTP requests to a minimum
    1. Merge files, such as combining multiple CSS files into one;
    2. CSS Sprites use CSS background related elements for absolute positioning of background images;
  • Do not use zooming images in HTML Zooming does not reduce the size of the image, it just controls its size.
  • Image compression Uses tools to compress images to ensure quality and reduce Image size.
  • Less manipulation of the DOM less manipulation of the DOM, less page redrawing.

Do the load operation in advance

  • Pre-resolution of domain names such as JINGdong
  • Preloaded or delayed loaded components
  • CSS is placed at the top of the code page so that the browser can parse and render the HTML page from top to bottom.
  • The Image is cached using the new Image object

Lift parallel loading

Shards components into multiple domains to improve server responsiveness

JavaScript and CSS optimization

  • When JavaScript and CSS are stripped from a page, it is possible to target them with separate processing strategies, such as compression or caching strategies.
  • Use tools to compress JavaScript and CSS files
  • The script is placed at the bottom of the HTML code page to reduce page blocking.

Asynchronous loading

It is also common to use Ajax for asynchronous loading, such as scrolling through a page to load the content that follows.

4. What is the principle of page rendering?

This is a pure theoretical topic, as long as the browser rendering process is very professional expression, will get the favor of the interviewer, as a front-end staff really need to understand how the browser rendering process is, for the improvement of page performance is helpful.

Their thinking

A rendering engine can display HTML, XML documents, and images. It can also display other types of data with the help of plug-ins (a browser extension), such as PDF format, using a PDF reader plug-in.

Rendering engine

Trident(MSHTML) kernel: IE,MaxThon,TT,The World,360, Sogoubrowser, etc. Gecko kernel: Netscape6 and above version, FF, MozillaSuite/SeaMonkey Presto kernel: Opera7 and above its kernel: Safari, Chrome, etc

Parse the HTML to build the DOM tree -> build the Render tree -> layout the Render tree -> Draw the Render tree

Step 1: The rendering engine starts parsing the HTML and builds DOM nodes based on tags. Step 2: Build a rendering tree based on CSS styles, including the size and color of elements. Hidden elements will not be built into the tree. Step 3: Build a layout tree based on CSS styles, mainly to determine the location of the elements to display. Step 4: Draw the render tree based on the previous information.

5. What is responsive development?

Responsive development is front the content more common development, with the development of mobile Internet, mobile terminal design more and more important, many projects are mobile terminal development first, and then is the PC development, in order to reduce operating costs and development costs, the same web site to be compatible with PC and mobile terminal display be vividly portrayed, Then responsive development has become a necessary skill for front-end developers, so the technology of responsive development must be mastered.

What is reactive

As the name suggests, the same site is compatible with devices of different sizes. Such as PC terminal, mobile terminal (flat, landscape, vertical) display style.

The technology you need to use

1. Media Query

It is used to query whether the device meets certain conditions, such as screen size, touchability, screen accuracy, landscape and portrait, etc.

2. Use EM or REM for size units

For text size responses and elastic layouts.

3. Disable page zooming

<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />
Copy the code

4. Screen size response

A) Fixed layout: the page is centered with white space on both sides. It can adapt to a width greater than a certain value within a certain range, but if it is too wide, there will be a lot of white space. If it is too narrow, there will be a scroll bar, which is very common on PC pages.

B) Flow layout: when the screen size changes within a certain range, the module layout is not changed, but only the module size proportion is changed. More responsive than a fixed layout, with no white space on either side, but can only accommodate a limited range of width variations, otherwise the module will be squeezed (and pulled) out of shape.

C) Custom layout: none of the above layout methods can be changed in large size across domains, so we need to change the position of modules or hide some secondary elements when appropriate.

D) Grid layout: this layout makes it very easy to align modules, and easy to change the position of modules to assist in custom layout.

Responsive design considerations

1. The width is not fixed. You can use percentages

#head{width:100%; }

#content{width:50%; }

2. Image processing

The width and height of the image can be set to equal scale, you can set the width to percentage, height:auto;

You can use background-size to specify the size of the background image.

6. What are the new features and elements removed from HTML5?

Subject involves the range is very large, if you want to be obviously after half a day can not answer, you can first sets out the new features of the H5, don’t answer so specific, such as the interviewer to ask specific questions, so before the interview to the technology here again, at least every technology also want to be a small application experience.

H5 new features

Enhanced graphics rendering, audio and video, data storage, multitasking and other processing capabilities are mainly shown in

Canvas painting;

Similar to the drawing board provided by Windows, you can draw lines, boxes, paths, and graphs…… , InternetExplorer 9, Firefox, Opera, Chrome, and Safari, and their properties and methods.

Elements needed for drawing

A) pens, which can be used to draw lines, circles, rectangles, text, etc

B) color

C) panel

Due to the large number of canvas cases and complicated code, you can check out the relevant tutorial on W3CSchool

  1. Local offline storage localStorage

Data is stored for a long time. Data is not lost after the browser is closed.

Characteristics of 1.

Permanent data storage, no time limit; Size limit 5M(enough); Only strings are stored.

2. Data access mode

localStorage.a = 3; // set a to "3" localStorage["a"] = "SFSF "; // Set a to "SFSF ", overwriting localstorage.setitem ("b"," Isaac "); // Set b to "Isaac" var a1 = localStorage["a"]; Var a2 = localstorage. a; Var b = localstorage.getitem ("b"); Var b2= localstorage.key (0); Localstorage.removeitem ("c"); localstorage.removeItem ("c"); // Clear c localstorage.clear (); // Clear all dataCopy the code

Recommended use:

getItem()

setItem()

removeItem()

3. Event monitoring

if(window.addEventListener){ window.addEventListener("storage",handle_storage,false); }else if(window.attachevent){// Compatible IE window.attachevent ("onstorage",handle_storage); } function handle_storage(e){ }Copy the code

Object E is the localStorage object, which is poorly supported by Chrome and Firefox, but well supported by Internet Explorer.

  1. SessionStorage data is automatically deleted after the browser closes; For details, see localStorage

  2. Video and audio elements for media playback;

  3. More semantic content elements such as article, footer, header, nav, section;

  4. Form controls, Calendar, Date, time, Email, URL, search;

  5. New technology Webworkers (Dedicated Threads)

  6. Websocketsocket communication

  7. Geolocation Geographical location

Removed elements

Pure expressive elements

  • Default font, without setting the font, to render
  • Font tags
  • Horizontal center
  • The underline
  • Large font

  • In the horizontal

  • Text width


    •



A frameset

Click to follow, the first time to learn about Huawei cloud fresh technology ~