This is the 8th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

1. 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. When the browser parses the element, it suspends the downloading and processing of other resources until the resource is loaded, compiled, and executed, as well as elements such as images and frames, similar to embedding the resource in 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 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

2, know the web page production will use the picture format?

  • 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. (Do you pay attention to new technologies and new things?)

Webp is an image format developed by Google (GOOG) to make images load faster.

Image 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 larger than JPEG images at the same quality

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

Image lazy loading, you can add a scroll bar event in the invisible area of the page to judge the distance between the image position and the top of the browser and the distance between the page, if the former is less than the latter, the first loading. If it is a slide, album, etc., you can use the image preloading technology to download the first and last images of the current display. If the image is CSS image, you can use CSSsprite, SVGsprite, Iconfont, Base64 and other technologies. If the image is too large, you can use a specially encoded image that will load with a particularly compressed thumbnail to improve the user experience. If the image display area is smaller than the actual size of the image, compress the image on the server based on service requirements. The compressed image size is the same as that on the display.

4. How do you understand the semantics of HTML structures?

Remove or lose styles to give a clear structure to the page:

HTML itself is not represented, we see for example

is bold, font size 2em, bold; is bold, don’t think of it as HTML, these are HTML default CSS styles that work, so it’s not an advantage of semantic HTML structure to remove or lose styles, but browsers have default styles, The default style is also intended to better express the semantics of HTML. It can be said that the default style of the browser and the semantic STRUCTURE of HTML are inseparable. Using semantic markup ensures that these devices render web pages in a meaningful way. Ideally, the task of viewing the device is to render the web page according to the device’s own conditions. Semantic markup provides the device with the relevant information it needs, saving you the trouble of thinking about all possible display scenarios (existing or future devices). For example, a phone could choose to have a paragraph of text marked with a title displayed in bold. A PDA might display it in a larger font. Either way, once you tag text as a title, you can be sure that the reader will display the page appropriately on its own terms. Search engine crawlers also rely on tags to determine context and the weight of individual keywords. Facilitate team development and maintenance W3C set a very good standard for us, in the team we all follow this standard, can reduce a lot of differentiation things, convenient development and maintenance, improve development efficiency, and even achieve modular development

5, talk about what needs to be considered before the end of SEO

To understand how search engines crawl and index web pages you need to know the basics of how search engines work, the differences between search engines, how SE Robots (or Web crawlers) work, and how search engines rank search results. Meta tags include Title, Description, and Keywords. There are other hidden words such as Author, Category, Language, etc. How to select keywords and place them in a web page

Search with keywords. Keyword analysis and selection is one of the most important tasks in SEO. First determine your main keywords (usually around 5) and optimize them accordingly, including Density, Relavancy, prominence, and so on. While there are many search engines, there are only a few that determine traffic to your site. For example, There are Google, Yahoo, Bing and so on in English. Chinese have Baidu, Sogou, Youdao and so on. Different search engines have different rules for crawling, indexing and sorting pages. Also understand the relationship between search portals and search engines, such as AOL web search using Google’s search technology, MSN using Bing’s technology.

The main Internet Directory Open Directory itself is not a search engine, but a large Directory of websites, the main difference between it and search engines is the collection of website content is different. The directory is manually edited, mainly includes the website home page; Search engines are collected automatically, grabbing a large number of content pages in addition to the main page.

Pay-per-click search engines search engines also need to survive, as Internet commerce becomes more and more mature, paid search engines are also becoming popular. Examples include Overture and Baidu, as well as Google’s advertising program, Google Adwords. More and more people are targeting commercial sites with click-through ads on search engines. There’s a lot of optimization and ranking involved. You need to learn how to get the most clicks for the least amount of advertising.