Doesn’t the page scroll smoothly?

IOS devices are stuck

Lag in iOS device experience? Finger out of the scroll element, immediately stop scrolling, performance is not smooth, no inertia?

IOS 5.0 and later have two scrolling values: auto and touch. Default is auto. If you want to enable inertial scrolling, set the -webkit-overflow-scrolling attribute to touch

-webkit-overflow-scrolling: touch; /* When the finger is removed from the screen, it keeps scrolling for a while */ -webkit-overflow-scrolling: auto; /* When the finger is removed from the touch screen, scrolling stops immediately */Copy the code

Smooth anchor point positioning roll

The scrollIntoView() method scrolls the element’s parent container, making the element called scrollIntoView() visible to the user.

Target.scrollintoview ({block: 'start', // define vertical behavior: 'smooth', // define animation transition effect inline: 'nearest' // define horizontal});Copy the code

Image display blurry?

Does the drawing show blurry?

Physical pixel

The pixels that the device screen actually has, the basic unit of the screen, are physical. For example, the iPhone 6 screen has 750 pixels in width and 1,334 pixels in height, making all iPhone 6 screens 750 pixels by 1,334 pixels.

Logic pixel

Also called “device-independent pixel”, it can be understood as the pixel points reflected in CSS/JS programs. CSS pixel is a kind of logical pixel.

We usually use 200px by 100px to describe the width and height of a picture. Here px is also a logical pixel.

Device pixel ratio

The Ratio of physical pixels to logical pixels (DPR) of a Device

For example, on Retina, the DPR is no longer 1, like 2 (iPhone 5, 6, 7, 8) or 3 (a series of Pluses like iPhone 6 Plus) or non-integer (some Android phones). If displayed according to DPR=1, the area displayed on the HD screen of the same picture will be a fraction of that on the non-HD screen, which will definitely cause the problem of blurring.

How to solve it?

Take iPhone 6 as an example, the physical pixel is 750 * 1334, and the logical pixel can be obtained through screen.width and screen.height, which is 375 * 667. Therefore, DPR=2 can be directly obtained through window.devicePixelRatio.

Familiar with these basic knowledge, when using Canvas to draw pictures for display on mobile devices, logical pixel (CSS pixel) * DPR can be used to solve the problem of clarity when setting picture size, element displacement and text processing.

ctx.font = `${14 * dpr}px PingFangSC-Regular`; DrawImage (code, 200 * DPR, 200 * DPR, 30 * DPR, 30 * DPR,);Copy the code

Is the picture displayed blurry?

You can use two attributes: srcset and Size to provide additional resource images and hints to help the browser select the right resource.

Srcset defines the set of images that the browser is allowed to select, and the size of each image.

Sizes defines a set of media conditions (such as screen width) and specifies what image size is best when certain media conditions are true.

<img srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy" > <img srcset="elva-fairy-320w.jpg, JPG 1.5x, elva-fairy-480w.jpg 2x" SRC ="elva-fairy-640w.jpg" Alt ="elva dressed as a fairy" >Copy the code

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
Copy the code

In the future, you can also judge the current network environment through navigator. connection and choose to display high definition content or low definition pictures. However, it is still an experimental property with poor compatibility

Dynamic effects affect performance, hardware acceleration up?

Let’s start by looking at the steps a page goes through:

  1. JavaScript: Use JavaScript to make visual changes, make animations or add DOM elements to the page.

  2. Style: Matches each DOM element with a CSS Style based on the CSS selector.

  3. Layout: Calculates the size and position of each DOM element on the screen. Because the layout of elements on a page is relative, a change in the layout of one element triggers a change in the layout of other elements.

  4. Paint: Draws text, colors, images, borders, and shadows. This is all the visual effects of a DOM element. The drawing process is done on multiple layers.

  5. Composite: After drawing on each layer, the browser merges all layers into one layer in a reasonable order and displays it on the screen.

Let’s take a look at the browser rendering process:

How can a RenderObject have a separate RenderLayer? A RenderObject that does not meet the following criteria is shared with its first parent element that owns the RenderLayer:

  • NormalPaintLayer

  • Root element (HTML)

  • Have clear positioning attributes (relative, fixed, sticky, absolute)

  • Opacity < 1

  • I have a CSS fliter

  • The CSS mask property is available

  • Has CSS mix-blending-mode property (not normal)

  • CSS transform property (not None)

  • Backface -visibility property is hidden

  • CSS Reflection property

  • Has CSS column-count property (not auto) or CSS column-width property (not auto)

  • Currently, animations are applied to opacity, Transform, fliter, and backdrop filter

  • OverflowClipPaintLayer

  • The overflow is not visible

  • NoPaintLayer

  • A PaintLayer that does not require paint, such as an empty div with no visual attributes (background, color, shadow, etc.)

“Some special renderlayers are considered CompositingLayers, the compositing layer has a separate GraphicsLayer, and other render layers that are not CompositingLayers share the same parent with their first GraphicsLayer.” So how can the rendering layer be promoted to the compositing layer? First of all, there is a prerequisite that the RenderLayer is promoted to CompositingLayers. The RenderLayer must be NormalPaintLayer. What good is it to promote the RenderLayer to CompositingLayers?

  • Bitmaps of CompositingLayers are processed by the GPU faster than the CPU

  • When repaint is required, only repaint itself is required and no other layers are affected

  • Layout and Paint are not triggered for Transform and opacity effects

Since the use of composition layer to improve page performance is a great help, how to achieve? You can take advantage of the will-change attribute, which provides web developers with a way to inform browsers about changes to the element so that browsers can optimize the element before it actually changes. This optimization prepares some of the more complex calculations ahead of time, making the page more responsive and responsive.

.target {
  will-change: transform;
}
Copy the code

For those browsers that do not currently support will-change, the 3D Transform property is commonly used to enforce promotion to the composition layer:

.target {
  transform: translateZ(0);
}
Copy the code

Or in the future, it is possible to create a canvas object separated from screen rendering through OffscreenCanvas. Currently, the compatibility is not up to the standard that can be used.

Be careful not to create too many render layers. Because each new rendering layer created means new memory allocation and more complex layer management.

If you have placed an element in a new compositing layer, you can use Timeline to verify that doing so has really improved rendering performance. Do not blindly improve the composite layer, be sure to analyze its actual performance.

To summarize

Previously we all liked to use translateZ(0) for so-called hardware acceleration to improve performance, but there is no such thing as a “silver bullet” for performance optimization. Regardless of the specific analysis of the page, any performance optimization is untenable, blindly using some optimization measures, the results may be counterproductive. Therefore, to analyze the actual performance of the page, and constantly improve the test, is the right way to optimize.

For a deeper understanding of how rendering works, go here:

www.chromium.org/developers/…

Developers.google.com/web/fundame…

Bangs how to fit?

body {
  padding:
    env(safe-area-inset-top, 20px)
    env(safe-area-inset-right, 20px)
    env(safe-area-inset-bottom, 20px)
    env(safe-area-inset-left, 20px);
}
Copy the code

Safe-area-inset -* consists of four environment variables that define the top, right, bottom, and left rectangles inside the viewport edge so that content can be safely placed without the risk of being cut off by a non-rectangular display. For a rectangular viewport, such as a regular laptop monitor, the value is zero. For non-rectangular displays (such as round dials, iPhoneX screens), everything is visible within the rectangle formed by the four values set by the user agent.

To tell the browser to use all available space on the screen and use the env() variable accordingly, add a new viewport element value:

<meta name="viewport" content="... viewport-fit=cover">
Copy the code

Rendering effect:

Some apis are more suitable for mobile due to compatibility.

The number.isSafeINTEGER () method is used to determine whether the parameter value passed in is a “safe integer”.

Number. The prototype. ToLocaleString () method returns the Number in the representation of a particular language environment string

For example, dealing with the thousandths:

var number = 3500;

console.log(number.toLocaleString()); // Displays "3,500" if in U.S. English locale 
Copy the code

Direction Specifies the horizontal overflow direction of text or table columns. RTL stands for right to left (similar to Hebrew or Arabic), LTR stands for left to right (similar to Most languages such as English)

Reverse order via style without processing data:

Open your imagination, the following needs scenario, how would you consider to achieve?

Unpack the implementation steps

Use the part of the diagram:

Draw grid lines using CSS Linear-gradient:

How do diagrams represent semantics?

What are the real numbers?

How is the chart implemented?

The bar chart represents the interval

The line chart

And then flip the coordinate system