The problem the forerunner

  • What is the difference between the SRC attribute and the href attribute of an HTML tag? [HTML]

  • What are the CSS selectors? How to determine the priority of these selectors? “CSS”

  • What are the basic data types of JS? What’s the difference? [js]

  • Merge two ordered arrays

    Given two ordered integer arrays nums1 and nums2, merge nums2 into nums1 to make nums1 an ordered array.

Knowledge comb

HTML tagssrcProperties andhrefAttribute difference?

The SRC attribute is an abbreviation for source, meaning source. It is usually used as the URL of the media resource mapped to HTMLDediaElement. Such as image, script resource path:

<img src="images/like.gif">
<iframe src="inner.html">
<script src="index.min.js"></script>
Copy the code

SRC loads media resources blocking, meaning that the rest of the page suspends processing, which is one reason why script tags are loaded at the end of the document.

Href is the abbreviation of Hypetext Reference, meaning hypertext Reference. Because of non-media resources, external references, that is, resources that do not need to be displayed on the page, the load of this resource is non-blocking. Such as link and a tags:

<link rel="stylesheet" src="style/main.css">
<a href="./home/login">login</a>
Copy the code

In summary, the SRC attribute is a path map of the media resource and is loaded blocking, while href is hyperlinked and non-blocking.

We can think of the media resource as the actual data that needs to be displayed on the page, the actual data in the DOM structure, and therefore blocks the load, whereas the hyperlink is an attribute, a reference, and there is no need to render the actual resource on the page, so there is no need to block the page load.

It is worth noting that js scripts are not media resources, and they are not data required by the DOM. Why should JS scripts use SRC when CSS can use href? In fact, this is the beginning of design decision, designers think js script execution may change the page, is also changing the DOM, of course need to be loaded with the page, and CSS is the style of the page only, will not change the DOM, also belong to the hyperlinked, from this layer of meaning to understand, to know whether blocking page has nothing to do with the resources of the reference size, It’s about whether you actually changed the page DOM.

Tags: HTML, resource loading

What are the CSS selectors? How to determine priorities?

Four classes of selectors

CSS selectors fall into four broad categories:

  1. Basic selector
  2. Packet selector
  3. Combinatorial selector
  4. Pseudo selector

The most common is the basic selector. Generally speaking, there are five basic selectors:

  • Universal selector:*Matches all elements
  • Element selectors: Use element names to match elements, such asp,a
  • Class selector: Matches elements by class name, for example.class
  • Attribute selector: Matches elements by their attributes, such asa[href]
  • idSelector: Matches elements by element ID, such as#app. It is worth noting that the ID selector does not match one element but multiple elements (of course we don’t want pages to have elements with the same ID).

These five basic selectors are the basis for several other selectors.

To extend the range of selectors, for example, if I want to select both p elements and elements of class red, I need to combine the basic selectors. We use the group selector to separate the selectors and get a combination of selectors. This is the group selector:

p..red {
    color: red;
}
Copy the code

At the same time, sometimes in order to be more accurate, that is, to abbreviate the scope of the selector, we need to use the combination selector, there are four main types of combination selector (two offspring and two brothers) :

  • Descendant selectors: combine with Spaces, for example#app div
  • Direct child combinator: Use>To combine, for examplediv > p
  • Brother selector: use~To combine, for examplep ~ pTo match thepThe sibling element after the element. (Note that only subsequent siblings can be matched.)
  • Adjacent sibling selectors: Sometimes to select adjacent sibling elements, we use+To combine, for examplep + a

Special in addition, some elements, such as being visited a label, suspension state div and so on, these are some scenarios of special status, in order to capture these labels with special status, we need to use pseudo class selectors, the pseudo class describes the different states, such as: mouse hover said suspended state, A: Visited refers to the tag of A that has been visited. Div :first-child refers to the first child element of div.

In addition to the class, there is an element called pseudo elements, pseudo element is real elements, but it can’t be HTML, such as p element, first, the elements are not elements, because only part of the elements, but it is real, so called pseudo elements, the current HTML provides five kinds of pseudo element selector:

  • ::brefore: The content before the element is inserted
  • ::after: After the element is inserted
  • ::first-letter: The first letter of the element
  • ::first-line: The first line of the element
  • ::selection: The selected part of the element

Pseudo-classes are elements that record special states. There are dozens of them, and I won’t list them here.

Selector priority

Since we can write CSS with multiple selectors matching the same element but with different styles, we need to determine which selector has a higher priority and choose the style specified by the selector.

We know CSS is called cascading style sheets, which means that styles are overwritten, and if two selectors have the same weight, the later selector overwrites the previous one. In addition, inherited styles are equivalent to style initialization and have the lowest priority.

The weight reference values of the selector are as follows. The higher the weight, the higher the priority:

  • Element selector: Element selector, pseudo-element selector, weight 1
  • Class selectors: Class selectors, pseudo-class selectors, attribute selectors, weight 10
  • Id selector: weight 100
  • Inline style: Weight is 1000
  • ! importantThe tag weight value is the highest

To sum up:! Important > Inline Style > ID selector > Class/property selector > Element selector. Wildcard selectors are unweighted.

Tags: CSS Basics

What are the js data types? What’s the difference?

The latest ECMAScript standard defines nine data types.

There are seven basic data types:

  • Undefined: undefined
  • Null: an empty object
  • Boolean: the Boolean
  • Number: digital
  • String: string
  • Bigint: indicates a large integer. The new type in ES6 is used to describe greater than2^53 - 1Integer, which is originally available in JavascriptNumberBut if not usedBigInt()Function or integer literalsnTo encapsulate the number, the return type will still benumber
  • -Leonard: We have a symbol. Symbol is also a new base type added to ES6 bySymbol()Returns aOnly the value of theSo the symbol type is never repeated.

Two reference types:

  • Object: indicates an Object.
  • -Leonard: Function.

We can simply think of Object as an instance and Function as an uninstantiated constructor, which is what other languages call a class.

Why are data types divided into basic and reference data types? That’s because they’re not stored the same way in memory,

  • Basic data types are stored directly in the stack because they do not take up much space and have a relatively fixed space size
  • Therefore, entity data is stored in the ** heap data structure, and only the heap address of the data is recorded in the stack. When used, the heap address is searched in the heap memory.

Extensions: compare stacks and heaps in terms of data structures and memory,

The concepts of heap and stack exist in data structures and operating system memory:

  • The data access mode in stack structure is first in last out.
  • The heap is a priority queue and is sorted by priority, which can be specified by size. A complete binary tree is an implementation of a heap.

In the operating system, memory is divided into stack and heap areas:

  • The stack area memory is automatically allocated and released by the compiler to store function parameter values, local variable values and so on. It operates like a stack in a data structure.
  • Heap memory is usually allocated and freed by the programmer. If the programmer does not free heap memory, it may be reclaimed by the garbage collection mechanism at the end of the program.

Label: JS data type

Merges two ordered arrays

Given two ordered integer arrays nums1 and nums2, merge nums2 into nums1 to make nums1 an ordered array.

Note: the number of elements initialized for nums1 and nums2 is m and N respectively. You can assume that nums1 has a space size equal to m + n so that it has enough space to hold elements from Nums2.

Note that the two arrays are already ordered, so we can use a two-pointer method to find the maximum value of the two arrays, one pointer to the nums1 end and the other pointer to the MUMs2 end. Compare the maximum value of the two arrays and place it at the end of the array until nums2 ends.

function merge(nums1, m, muns2, n) {
    let k = m + n - 1
    let p1 = m -1, p2 = n - 1
    while(p2 >= 0) {
        if(p1 < 0){
           nums1[k--] = nums2[p2--]
        } else{ nums[k--] = nums1[p1] > nums2[p2] ? nums1[p1--] : nums2[p2--]; }}}Copy the code

Tags: Algorithm, LeetCode