How to convert the size on the design draft

Rem unit

When using REM to set font sizes for elements, only the HTML root element is relative

Here’s an example:

If the design is 1080px, 7.5*144 = 1080

7.5 is custom, make sure 7.5144=1080(design size) fits the screen, if the screen changes to 360,7.5 stays the same, 144px will change to 48px (487.5=1080)

You can also set 7.5 to 10.8 and 144 to 100 to achieve the same effect


// Responsive REM adaptation ------- applies to design draft 1080px
$rem: 1rem / 144;

@function rem($px) {@return $px * $rem;
}
Copy the code
function detectOrient () {
  var width = document.documentElement.clientWidth || window.innerWidth
  var height = document.documentElement.clientHeight || window.innerHeight
/ / vertical screen
  if (width <= height) { 
    if (width >= 1200) {
      width = 1200
    }
    if (width <= 320) {
      width = 320
    }

    // Set the font size for the HTML root element
    document.documentElement.style.fontSize = (width / 7.5) + 'px'
    return false
  } else { 
 / / landscape
    if (height >= 1200) {
      height = 1200
    }
    if (height <= 320) {
      height = 320
    }
    document.getElementsByTagName('html') [0].style.fontSize = height / 7.5 + 'px'
    return false
  }
}

detectOrient()
window.onresize = function () {
  detectOrient()
}
Copy the code

How is dark mode implemented

The phone system has a dark mode that requires the H5 to change when switching.

Several options:

  1. Use cookie, set cookie dark=1 to.oneplus.com, get the cookie worth knowing the mode at this time

  2. Make two pages, one black and one white, and let them switch urls themselves (what genius came up with that?)

  3. What happened this time? If you can’t get the cookie and Android doesn’t want to change it, there’s nothing you can do about it. For example, in this demand, the method is that the previous page has obtained the cookie, and then the next page URL is added with the query parameter dark=1. Then what we actually need to do is the page with dark=1, and we can judge after obtaining it.

For the next page, the method provided by Android — loading animation is selected, and cookies are obtained to set the basis for judging the dark mode for the next page

Existing problems

Each time you switch mode, you will exit the current page and need to re-enter, so that when you re-enter, you will switch to black and white mode

When you enter the list page for the first time, you need to call off loading because the previous page was set

Anti-shake & throttling

Originally thought not to listen to the input query, then after some strange hands, let me think that there are so many toxic people, committed to bring down your system, drive at full speed crazy point enter, will give you play bad, so I think about it, and made a limit.

Stabilization:

The function is executed n seconds after the event is triggered. If the event is triggered within n seconds, the function execution time is recalculated

Throttling:

Events are fired continuously but the function is executed only once in n seconds

Browser rendering mechanism

What happened?

When switching to dark mode, there will be a white background flicker, mainly due to the timing of CSS introduction

Webview opens the H5 loading process

Initialize Webview -> request page -> download data -> parse HTML -> request JS/CSS resources ->DOM render -> parse JS execution -> JS request data -> parse render -> download render picture -> complete page display

Before DOM rendering, the time is mainly in two parts: initialization of Webview and data request. Generally, the initial initialization of Webview is on the order of 400ms, and the second loading can be one order of magnitude less.

Data requests depend on the network. Network requests generally go through DNS queries, TCP connections, HTTP requests and responses. The data includes HTML, JS, and CSS resources, all of which are done after the WebView is loadRequest. At this stage, all the user sees is a blank screen

H5 page rendering

  1. Process HTML tags and build DOM trees

  2. Handles CSS tags and builds CSSOM(CSS Object Model) trees

  3. Merge DOM and CSSOM into a render tree

  4. Layout according to render tree to calculate geometric information for each node

  5. Draw the individual nodes to the screen

These five steps are not necessarily done in one go. If the DOM or CSSOM is modified, this process needs to be repeated in order to figure out which pixels need to be re-rendered on the screen. In real pages, CSS and JavaScript often modify the DOM and CSSOM multiple times

H5 page load metrics

  1. First paint time: Enter the URL in the address bar and press Enter to display the first element (network, server performance, front-end page structure design) in the browser.

  2. Dom Interactive: The user can click and enter the URL in the address bar. By default, the domReady time can be counted because the event operation is usually bound at this time

  3. First screen time: Enter the URL in the address bar and press Enter – the first screen rendering of the browser is completed (white screen time, resource download execution time, etc.)

  4. Total download time: the time it takes for all page resources to be loaded and rendered, i.e. the time of page onload;

  5. Loading time: all elements of the page are loaded.

  6. When opening the H5 page in App, the initialization time of WebView needs to be counted

Load and DOMContentLoaded

  1. The Load event is triggered to indicate that the DOM, CSS, JS and images in the page have all been loaded

  2. The DOMContentLoaded event is triggered to represent that the original HTML is fully loaded and parsed, without waiting for CSS, JS, and images to load

The resources

(Other articles closed too fast to find, to be added later)

The front end is fun.