Web front-end knowledge comb (2) Basic Web synthesis problems

Past wonderful

Web front-end knowledge comb (1) Basic Web synthesis problems

Web front-end knowledge comb (3) CSS

Web Front-end Knowledge Comb (4) CSS (2)

The book continues with the article, the second part of the comprehensive problems of the gossip Web.

Basic chapter HTML, HTTP, Web Integration Problems (2)

1. Meta ViewPort related

<! --H5 standard declaration, using HTML5 docType, case insensitive -->
<! DOCTYPEhtml>

<! -- standard way to write lang attributes -->
<head lang="en">


<! Declare the character encoding used in the document -->
<meta charset="utf-8">  


<! Set the bai browser to preferentially use which mode to render the page.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>  


<! -- Page description -->
<meta name="description" content="No more than 150 characters"/>


<! -- Page keywords -->
<meta name="keywords" content=""/>


<! -- Page writer -->
<meta name="author" content="name, [email protected]"/>


<! -- Search engine crawl -->
<meta name="robots" content="index,follow"/>


<! -- width=device-width: indicates the screen width of the device initial-scale=1.0: indicates the initial scaling scale minimum-scale=0.5: indicates the minimum scaling scale maximum-scale=2.0: User-scalable =yes: Indicates whether users can adjust scaling -->
<meta name="viewport" content="Width =device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">


<! - the iOS devices begin -- >
<meta name="apple-mobile-web-app-title" content="Title">


<! -- Whether to enable WebApp full-screen mode after adding it to the home screen, delete apple's default toolbar and menu bar -->
<meta name="apple-mobile-web-app-capable" content="yes"/> 


<! -- Enable webKit in 360 browser -->
<meta name="renderer" content="webkit"> 


<! -- Avoid using compatibility mode in IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">  


<! -- don't let Baidu transcode -->
<meta http-equiv="Cache-Control" content="no-siteapp" />


<! -- Microsoft's old browser -->
<meta name="MobileOptimized" content="320">  


<! -- UC forced portrait -->
<meta name="screen-orientation" content="portrait">  


<! --QQ forced portrait screen -->
<meta name="x5-orientation" content="portrait">  


<! --UC mandatory full screen -->
<meta name="full-screen" content="yes">


<! --QQ mandatory full screen -->
<meta name="x5-fullscreen" content="true">  


<! UC Application Mode -->
<meta name="browsermode" content="application">  


<! -- QQ application mode -->
<meta name="x5-page-mode" content="app">  


<! -- Windows Phone Settings page does not cache -->
<meta name="msapplication-tap-highlight" content="no">  

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">
Copy the code

2. On which browsers have your pages been tested? What are the kernels of these browsers?

IE: Trident internal core

Firefox: Gecko internal core

Safari: WebKit inner core

Opera: Formerly presto, Opera has switched to Google Chrome’s Blink kernel

Chrome: Blink (based on WebKit, developed by Google and Opera Software)

3. What are the advantages of div+ CSS over table?

It’s much easier to change, just change the CSS file

Page loading speed, clear structure, simple page display

Expression is separated from structure

Easy to optimize (SEO) search engines are friendlier and easier to rank high

4.

A: What’s the difference between Alt and title for IMG?

B: What are the differences between strong and EM?

Alt (Alt text) : The Alt attribute is used to specify alternative text for user agents (uAs) that cannot display images, forms, or applets.

The language of the replacement text is specified by the lang attribute. (Alt is displayed as tool tip when there is no title in IE)

Title (tool tip) : This property provides advisory information for the element on which the property is set

Strong: bold emphasizes the importance of the content

Em: italic emphasizes the label, and more strongly emphasizes the content

Can you describe the difference between progressive enhancement and graceful degradation

Progressive enhancement:

Build the page for the lower version browser to ensure the most basic functions, and then for the advanced browser effect, interaction and other improvements and additional functions to achieve a better user experience.

Graceful downgrade:

Build full functionality from the start and then make it compatible with older browsers.

The difference between:

Graceful downgrading starts with a complex status quo and tries to reduce the supply of user experience,

Progressive enhancement, on the other hand, starts with a very basic, working version and expands to meet the needs of future environments.

Downgrading (functional decay) means looking backwards; Incremental enhancement means looking forward while keeping its roots in a safe zone

Why is it more efficient to use multiple domain names to store website resources?

CDN cache is more convenient

Break the browser concurrency limit

Save Cookie bandwidth

Save the connection number of the main domain name and optimize the page response speed

Prevent unnecessary security problems

7. Outline the difference between SRC and href

SRC is used to replace the current element, and href is used to establish a link between the current document and the referenced resource.

SRC, short for source, refers to the location of an external resource, which will be embedded in the document at the current tag location. SRC resources are downloaded and applied to documents when requested, such as JAVASCRIPT scripts, IMG images, and frame elements.

The same goes for elements such as images and frames, similar to embedding the pointed resource within the current tag.

This is why js scripts are placed at the bottom and not at the top.

Href is short for Hypertext Reference, refers to the location of a web resource, establishes a link between the current element (anchor) or document (link), If we add <link href=”common.css” rel=”stylesheet”/> then the browser recognizes the document as a CSS file, downloads the resources in parallel and does not stop processing the current document. Is this why it is recommended to load CSS using link rather than @import

8. What are the image formats used in web page production?

I knew you’d say that, PnG-8, PnG-24, JPEG, GIF, SVG

But none of the above is the final answer the interviewer is looking for.

Interviewers want to hear: Webp, Apng. (Do you pay attention to new technologies and new things?)

Webp:

WebP, an image format developed by Google to speed up image loading.

Chip compression volume is only about 2/3 of JPEG, and can save a lot of server bandwidth resources and data space.

Well-known sites like Facebook and Ebay are already testing and using the WebP format.

WebP images are 40% smaller than JPEG images at the same quality.

Apng:

Animated Graphics is a PNG bitmap animation extension that enables Animated images in the PNG format. It was born in 2004, but has not been supported by major browser manufacturers, until now it is supported by iOS Safari 8, which is expected to replace GIF as the next generation of dynamic graphics standard.

9. After the CSS/JS code goes live, developers often optimize the performance. From the moment the user refreshes the web page, where will there be caching for a JS request?

DNS cache,

CDN cache,

Browser cache,

Server cache

10. There are a lot of pictures on a page (large e-commerce website), but the loading is very slow. What methods do you have to optimize the loading of these pictures to give users a better experience?

A – Lazy loading of pictures. A scrolling event can be added to the invisible area of the page to judge the distance between the position of the picture and the top of the browser and the distance between the page. If the former is less than the latter, the loading is preferred.

B – If it is a slide show, album, etc., you can use the image preloading technology to download the previous and the next images of the current display first.

C – If the image is CSS image, you can use CSSsprite, SVGsprite, Iconfont, Base64 and other technologies.

D – If the image is too large, you can use a specially encoded image, which will load first with a particularly compressed thumbnail to improve the user experience.

E – If the image display area is smaller than the actual size of the image, the image is compressed on the server based on service requirements and the size of the compressed image is the same as that of the displayed image.

11. Time complexity and space complexity of common sorting algorithms

What are the methods of session tracing in Web development

session

Url to write

Hidden hidden input

The IP address

13. What is the HTTP request packet structure?

The first Line of the request-line contains: Request method, Request URI, protocol version, CRLF
The first line is followed by several lines of request headers, including general-header, request-header, or entity-header, each ending with CRLF
There is a CRLF separation between the request header and the message entity
It may contain a message entity depending on the actual request requirements

An example of a request message is as follows:

GET/separate Protocols/rfc2616 rfc2616 - sec5. HTTP / 1.1 HTML Host: www.w3.org Connection: keep alive - cache-control: max-age=0 Accept: text/html,application/xhtml+xml,application/xml; Q =0.9,image/webp,*/ user-agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit / 537.36 (KHTML, Referer: https://www.google.com.hk/ Accept - Encoding: gzip,deflate,sdch Accept-Language: zh-CN,zh; Q = 0.8, en. Q =0.6 Cookie: authorstyle=yes if-none-match: "2CC8-3e3073913b100" if-modified-since: authorstyle=yes if-none-match: "2CC8-3e3073913b100" if-modified-since: Wed, 01 Sep 2004 13:24:52 GMT name=qiu&age=25Copy the code

14. What is the structure of the HTTP Response packet?

The first line is the status line containing: HTTP version, status code, status description, followed by a CRLF

The first line is followed by several lines of response headers, including: general header, response header, and entity header. The response header and the response entity are separated by a CRLF blank line

Finally, there is a possible message entity

The following is an example of response packets:

HTTP/1.1 200 OK
Date: Tue, 08 Jul 2014 05:28:43 GMT
Server: Apache/2
Last-Modified: Wed, 01 Sep 2004 13:24:52 GMT 
ETag: "40d7-3e3073913b100"
Accept-Ranges: bytes Content-Length: 16599
Cache-Control: max-age=21600
Expires: Tue, 08 Jul 2014 11:28:43 GMT
P3P: policyref="http://www.w3.org/2001/05/P3P/p3p.xml" 
Content-Type: text/html; charset=iso-8859-1
 
{"name": "qiu", "age": 25}
Copy the code

———— please call me the dividing line ———-

So many web synthesis problems,

Next time, we will start to check out the common CSS questions.

Web front-end knowledge comb (2) Basic Web synthesis problems

Past wonderful

Basic chapter HTML, HTTP, Web Integration Problems (2)

1. Meta ViewPort related

2. On which browsers have your pages been tested? What are the kernels of these browsers?

3. What are the advantages of div+ CSS over table?

4.

A: What’s the difference between Alt and title for IMG?

B: What are the differences between strong and EM?

Can you describe the difference between progressive enhancement and graceful degradation

Progressive enhancement:

Graceful downgrade:

The difference between:

Why is it more efficient to use multiple domain names to store website resources?

7. Outline the difference between SRC and href

8. What are the image formats used in web page production?

Webp:

Apng:

9. After the CSS/JS code goes live, developers often optimize the performance. From the moment the user refreshes the web page, where will there be caching for a JS request?

10. There are a lot of pictures on a page (large e-commerce website), but the loading is very slow. What methods do you have to optimize the loading of these pictures to give users a better experience?

11. Time complexity and space complexity of common sorting algorithms

What are the methods of session tracing in Web development

13. What is the HTTP request packet structure?

14. What is the structure of the HTTP Response packet?

Related Posts

Write a simple, elegant, extensible JS data validation library Struct

Late 2020 summary | Denver annual essay

Parcel and React development environment