preface

2020 is an extraordinary year, because the spread of the epidemic has disrupted my overall plan. But in the work, I have completed the target project, conquered the technical difficulties and learned new technology. Thanks to the gold mining platform!

First up is to share a mind map:

Mind mapping

Wechat Web developer toolSmall program development environment, related toolsApplet componentSmall programs/gamesThe development of the interfaceThe development of the interfaceAbility to openApplets media native capabilitySmall program native capabilityApplets device native capabilityApplets device native capabilityApplets interface/graphics native capabilityApplets interface/graphics native capabilityApplets interface/graphics native capability

Why did I learn cloud development as a front-end development engineer?

Because cloud development (Tencent CloudBase, TCB) is a cloud-integrated back-end cloud service and adopts serverless architecture, which eliminates cumbersome server construction and operation and maintenance in mobile application construction. At the same time, cloud development provides static hosting, command line tool (CLI), Flutter SDK and other capabilities to greatly reduce the threshold of application development. Using cloud development, you can quickly build complete mini programs/games, H5, Web, mobile apps, etc.

For small program development, everyone on its life cycle functions are mostly small white, so I talk about: small program registration is completed, load the page, trigger onLoad method. When the page loads, the onShow method is triggered to display the page. The page is displayed first, which triggers the onReady method to render the page elements and styles, and is called only once per page. The onHide method is triggered when the applet runs in the background or hops to another page. The onShow method is triggered when the applet has a background entry into the foreground to run or re-enter the page. When using the redirection method wX.redirectto (OBJECT) or closing the current page to return to the previous page wX.navigateBack (), onUnload is triggered.

Before starting small program development, you need to register small program account, public cloud account, purchase cloud server, domain name, apply for SSL certificate, also need to configure related, SSH connection server, install NodeJS, install Nginx, install MySQL, install MySQL, import SSL certificate, test Nginx, register domain name. Before you can develop.

The following knowledge points for front-end engineers are introduced:

  1. Be sure to master HTML (tags, attributes, semantics), etc.

  2. Be sure to master CSS (document flow, box model, float, location, inheritance, browser compatibility), etc.

  3. Be sure to master HTML5 (the new tag attributes, as well as the core JavaScript API).

  4. Be sure to master CSS3 (new properties, media query, layout, animation), etc.

  5. Be sure to master Bootstrap, etc.

  6. It is important to master JavaScript (core technology of ECMAScript, DOM-related technology, common algorithms of front end), etc.

  7. Be sure to master jQuery and other related technologies.

  8. Be aware of mobile issues.

  9. Be sure to master the issues of developing browser-compatible code.

  10. Be sure to master object-oriented issues such as classes in object-oriented programming, inheritance, etc.

  11. Be sure to master Ajax, JSON, etc.

  12. Be sure to master HTTP and HTTPS.

  13. Be sure to master Node.js (development server development), etc.

  14. Be sure to master EMAScript5 and EMAScript6, Design patterns (at work), etc.

  15. Be sure to master vue.js (frameworks, plug-ins), Angular (frameworks, plug-ins), React (frameworks, plug-ins), etc.

  16. Be sure to master game development issues, network security issues, performance optimization issues, modular development issues, CSS precompilation issues, mixed development issues, front-end engineering issues (front-end engineering tools WebPack, gulp), etc.

  17. Be sure to master version management tools (Git, SVN) and test for problems.

For the company interviewer, to ask the candidate a question in response to a specific question (or to answer technical points if the resume does not provide a detailed description of the project)

The following technical summary HTML:

  1. Tags should be closed, lowercase, not nested, semantic tags should be used to improve search probability, and CSS and JS should be used with external links. (Separation of structure, style, behavior, content accessible to more devices, code simplicity, development components, code easy to maintain, reusable, etc.)

2.HTML is a design language based on Web pages; XHTML is an XML-based, syntactically strict, standard design language. (Differences: XHTML elements must be properly nested, elements must be closed, tags must be lowercase, and there must be a root element; HTML has no restrictions)

3. Strict mode is a method for browsers to parse pages according to Web standards; Promiscuous mode is a backward compatible parsing method.

(Trigger strict schema or standard schema, which declares the correct DTD in front of HTML tags; To trigger promiscuous schema, you can either start an HTML document without declaring a DTD, or add an XML declaration before a DOCTYPE)

4. Static web pages are web pages without data interaction (no database participation, no server data loading). Such as static web pages only (HTML+CSS+JavaScript); Dynamic web pages are web pages with background data participation. (It’s a misconception that animated web pages are dynamic.)

5. The DOCTYPE declaration is at the front of the document, before the HTML tag, and tells the browser’s parser what document type specification to parse the document with. A nonexistent or incorrectly formatted DOCTYPE can cause the document to be rendered in promiscuous mode.

In strict mode, it runs to the highest standards supported by the browser, and in promiscuous mode, it is displayed in a backward compatible manner.

6. Semantic HTML makes the content of the page become structured, which is easy to parse by browsers and search engines, and improves the maintainability and reusability of the code.

7. Use of anchor points:

id="" name="" 
<a href="#dadaqianduan">dadaqianduan</a>
Copy the code

8. Structure label:

<header> is used to define the header of the document. <nav> is used to define the navigation links section of the page. <section> is used to define a section in a document, representing a specific part of the document. <article> is used to define content that is independent of the rest of the document. <footer> is used to define the footnote information for an area. <aside> is used to define additional parts of the page. <a href="mailo:[email protected]> <a href="javascript:void(0);" > Hyperlinks Used to create normal hyperlinks, download links, email links, contact us links, empty links, anchor jumps, specific code functions.Copy the code

9. Internet Explorer kernel Trident; Firefox kernel (Gecko,Chrome,Safari(Webkit)…

10. Div is a box tag for the site layout. Using a table layout makes the site load slowly and the layout hierarchy is unclear.

11. The title on the img tag is the information to be displayed when the cursor hovered over the tag, while the Alt is the replacement copy for the image if it does not display properly.

12. The following empty elements are:

<br> <hr> <img> <input> <link> <meta>
Copy the code

SRC indicates the source address (imported), href indicates the hypertext reference.

14. How to open links in a new window:

target=_blank
Copy the code

15.HTML is the carrier of web content; CSS is a representation of web content; JavaScript is used to implement effects and interactions on web pages.

16. Use iframe to solve slow loading of third-party content, to achieve security sandbox, and to load scripts in parallel. Using an iframe, however, blocks the Onload event on the home page. Even if the contents of an iframe are empty, it takes time to load. Iframe elements have no semantics.

17. The interview will test your understanding of semantics.

First of all, when the style is lost, it can also make the page present a clear structure. Help SEO to crawl more effective messages, semantic more readable.

The following techniques summarize CSS:

1. CSS basic selectors are: class selector, property selector, ID selector. CSS selector weights are divided into 4 levels, among which! The important keyword has the highest priority.

You can use 0.0.0.0 to represent four levels:

The priority for inline styles is 1.0.0.0

The priority of the ID selector is 0.1.0.0

Class property selector, property selector, pseudo-class has a priority of 0.0.1.0

Element selector, pseudo-element selector has a priority of 0.0.0.1

When wildcard characters are combined, the corresponding hierarchy weight increases

2. Here’s how CSS is introduced: Inline styles are written within the style attribute of an element; Inline writes the style inside the style element; External linking will introduce styles within the CSS file through the Link tag.

Link is an XHTML tag that can be used to load RSS, as well as CSS files. @import can only load CSS files.

Use link references to CSS, which are loaded at the same time as the page loads.

Using @import to reference CSS requires you to wait until the page is fully loaded before loading the CSS file, asynchronously.

Link is an XHTML tag, no compatibility issues; @import was introduced in CSS2.1 and does not support earlier versions of browsers.

Link’s tag is a DOM element, which supports using JavaScript to control the DOM and change styles. @important is one method, but it does not support DOM control and change styles.

3. Each time you write a floating element, the height of the parent element cannot be stretched, affecting the elements at the same level as the parent element. Non-floating elements of the same class as the element will follow, similar to masking. Note that if an element floats, the elements before it also need to float, otherwise the structure of the page will be affected.

When the interviewer asks how to solve this, the first one is that you can set a fixed height for the parent element; Second, you can set overflow:hidden for the parent element to clear the float, so that the height of the parent element is pushed open; Third, you can use the Clear :both style attribute to clear element floats.

Clear :both clear:both clear:both clear:both clear:both clear:both clear:both clear:both

Then add an After pseudo-element to the parent element and set the property content:””; display:block; clear:both;

Using clearfix:

.clearfix:after{
 content: "";
 display: block;
 clear: both;
}
Copy the code

4. Position positioning: Relative positioning, relative to one’s own position in the normal flow of documents; Absolute indicates absolute positioning, relative to the nearest level of positioning, relative to the parent of static; Fixed is used to generate absolute positioning relative to a browser window or frame; Static defaults to no positioning; Sticky is used to generate an element that is stickily positioned; the location of the container can be calculated from the normal document flow.

5. If float and Absolute are set for inline elements, the element is removed from the document flow and can be set to its width and height. Instead of overlaying another BFC area, the floating box can move left or right until its outer edge touches the border of the containing box or another floating box. Absolute overrides other elements in the document stream, a phenomenon known as masking.

6. Know what CSS selectors are: ID selectors, class selectors, label selectors, neighboring selectors, child selectors, descendant selectors, wildcard selectors, attribute selectors, pseudo-class selectors, pseudo-element selectors.

#id,.id, div, h1+p, ul>li, Li a, #, button[disabled="true"], a:hover, Li :feforeCopy the code

7. Some inheritable styles: font-size,font-family color, etc., some non-inheritable styles:

border,padding,margin,width,height
Copy the code

8. Talk about CSS priorities:! Word-wrap: break-word! Important; word-wrap: break-word! Important; word-wrap: break-word! Important;

9. Why do people always write:

*{padding:0; margin:0; }Copy the code

Because of browser compatibility issues, different browsers have different default values for some tags. If the CSS is not initialized, the page will often be different from browser to browser. Note here that initialization styles can sometimes have an impact on SEO.

10. Center, and center a float element.

div {
 float: left;
 width: 400px;
 height: 200px;
 margin: -100px 0 0 -200px;
 position: relative;
 left: 50%
 top: 50%;
 background-color: pink;
}
Copy the code
  1. Display values: block, none, inline, inline-block, list-item, table, inherit

Block is a block type. The default width is the width of the parent element. The width and height can be set. None indicates that the element will not be displayed and is out of the document flow; Inline indicates the inline element type. The default width is the content width. The width and height cannot be set. Inline-block indicates that the default width is the content width. You can set the width and height to be displayed in the same line. List-item displays like a block-type element and adds a style list tag; Table indicates that this element will be displayed as a block-level table; Inherit means inheriting the value of the display attribute from the parent element.

12. Display: None is a hidden element that is never allocated space in the document layout. Visibility :hidden to leave the original space in the document layout.

What is FOUC? How to avoid FOUC? FOUC is unstyled content flash, is under IE through @import CSS file caused by:

<style type="text/css" media="all">@importurl('demo.css'); </style>Copy the code

IE will first load the DOM of the entire HTML document and then import the external CSS file. Between the DOM loading of the page and the CSS import, there is a period of time when the content on the page is unstyled. This time is related to Internet speed and computer speed.

To solve FOUC, add a link or script tag between the head tags.

14. Talk about REM and EM: REM represents the font size relative to the root element; Em represents the font size relative to the parent element.

15. In CSS, the adaptive unit percentage %, relative to the width of the viewport unit VW, relative to the height of the viewport unit Vh, relative to the width or height of the viewport unit VM.

Em relative to the font size of the parent element and REM relative to the font size of the root element.

16. Use RGBA to set opacity to the background of an element instead of opacity setting opacity on opacity, solving the problem that child elements inherit the opacity of their parent elements.

17. The browser standard mode and quirks mode difference between the box model rendering model is different, you can use window.top.document.com patMode determine why the current model for which model. The result is BackCompat for weird mode; The result is CSS1Compat for standard mode.

18.FFC indicates the adaptive formatting context, where elements with display values of Flex or inline-flex will generate adaptive containers. Each child element in a flex container is a flex unit. There can be any number of scale units. All elements inside the flex unit and outside the flex container are unaffected.

19.GFC, Grid layout formatting context, IFC, inline formatting context, BFC, block-level formatting context.

20. Div + CSS has the advantage over table layout in that it is easier to change only the CSS file. Fast page loading, clear structure, simple page, performance and structure separation, search engine optimization friendly.

21. The content property encountered in CSS applies specifically to before/ After pseudo-elements to insert the generated content. A common application is to use pseudo-classes to clear floats.

22. What image formats are used for web page production: the mainstream ones are JPG, PNG, GIF, etc.

23. Elegant degradation starts with building full functionality and then compatibility with older browsers; Progressive enhancement refers to the process of building pages for older browsers, ensuring the most basic functionality, and then making effective, interactive, and other changes to more advanced browsers.

24.px and em are units of length. The difference is that px is a fixed unit of length. Em is not fixed, it is relative to the font size of the container.

25. Horizontal and vertical center:

#box {
 width: 200px;
 height: 200px;
 background: red;
 position: absolute;
 left: 50%;
 top: 50%;
 margin: -100px 0 0 -100px;
}
Copy the code

26. CSS Sprite is an image file that combines background images from a web page. Using the combination of background-image,background-repeat and background-position of CSS for background positioning background-position can be used to accurately locate the position of the background image.

27. Page refactoring, write CSS to make the page structure more reasonable, improve user experience, achieve good page effect and improve performance.

conclusion

That’s all for today, this is just a brief introduction to “My Interview with Tech” for 2020, thanks for reading, and if you found it helpful, feel free to share it with more people. Thanks for sharing, liking and bookmarking!

Denver annual essay | 2020 technical way with me The campaign is under way…