An introduction to some details that can be optimized in HTML5

This article brings you some details that can be optimized in HTML5. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Introducing some recently organized optimization details. I won’t talk about image compression, this is what optimization must do. Today I will talk about the details of optimization that everyone can cultivate when writing code.

• Do not abuse float. Don't abuse web fonts.

Float requires a large amount of calculation during rendering, and will be off-standard and collapsed. We can use flex layout instead. The introduction of web fonts requires a lot of effort, so it is best to mention it to the designer and not too much.

• Avoid redundant style settings in css.

color, font, line-height, etc. can all be inherited, so if their child elements have the same attributes, they must be written repeatedly, especially font-family.

• A complex method that can cache the return value of a function.

function cached (fn) {
    var cache = Object.create(null);
    return (function cachedFn (str) {
        var hit = cache[str];
        return hit || (cache[str] = fn(str))
    })
};
var fk = function (str) {
  return str.charAt(0).toUpperCase() + str.slice(1)
}
var cacheFk = cached(fk)
// 1 step
cacheFk('ui') 
//2 step
cacheFk('ui')

This is a piece of code I found when I was looking at the vue source code. Its function is to cache the value of a complex function and avoid repeated calculations if the parameters are the same. But the thing to note here is that this caching function is done through closures, so there are some trade-offs.

• Reduce layout as much as possible.

// 触发两次 layout
var newWidth = p.offsetWidth + 50;
p.style.width = newWidth + 'px';
var newHeight = p.offsetHeight + 50;
p.style.height = newHeight + 'px';

// 只触发一次 layout
var newWidth = p.offsetWidth + 50;
var newHeight = p.offsetHeight + 50;
p.style.width = newWidth + 'px';
p.style.height = newHeight + 'px';

All operations that can trigger layout will be temporarily put into the layout-queue. When it must be updated, the results of all operations in the entire queue will be calculated, so that only Perform a layout to improve performance.

Animation elements are best off-label and do not affect other modules. This is also done so as not to affect other elements.

• transform instead of position.

To do some CSS displacement effects, it is best to use transform instead of positioning. When I first started, I used position to make animation cards~~~

• Select the dom element and use the id, but do not define the id for setting the css.

If you use the id selector, do not add other class constraints. Defining too many IDs will reduce reusability and make maintenance more difficult, so it is not recommended to use multiple IDs in CSS.

• When using length multiple times, use a variable to save it.

var len = dom.length;
for(var i = 0;i < len;i++){}；

The advantage of this is that you don’t have to calculate the length of the dom every time you loop.

• requestAnimationFrame replaces setTimeout

var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');
element.style.position = 'absolute';

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.left = Math.min(progress / 10, 200) + 'px';
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);
//window.requestAnimationFrame(callback);
返回值是一个 long 整数，请求 ID ，是回调列表中唯一的标识。是个非零值，没别的意义。你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。

requestAnimationFrame is a timer that does not need to set the time. It runs every 1/60s. This is based on the browser refresh. Depends on the number of frames. But compatibility is a problem. If you use it, you need to write it well.

• If possible, try to avoid global searches.

//dom = document.querySelector("#id");
function test() {
    dom = document.querySelector("#id");
}

For example, if you only use dom in the test, do not define it globally, because it will be searched in the internal scope of the test function during execution, which will be faster.

• Do not use for in unless you don’t know the length of the traversal or the traversal object

    function t1(){        //20ms
        var i = 0;
       for(item in anObj) {
           i++
       }
       if( i === 100000){
           console.log('for in ok')
       }
    }
    function t2(){     //4ms
        var len = anObj.length;
        var i = 0;
        for(var i = 0 ;i < len;i++){
            i++
        }
        if( i === 100000){
            console.log(&#39;for ok&#39;)
        }
    }

This is my own test loop of an array of 100,000 elements. The resulting execution time (see code). So it's best not to use it, generally traversing objects will not be used in practice. If there are special circumstances when traversing objects, you should also pay attention! ! ! The things traversed are not themselves. I thought that for in would traverse its prototype chain.

• Skeleton screen

This is to enhance the user experience, similar to the enhanced version of loading. There are automated generation solutions. You can take a look if you are interested.

• ios prohibits the page from identifying mobile phone numbers. Android prohibits recognition of email addresses.

<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />

• Head css bottom js.

As everyone knows, js will block the parsing of dom and increase the white screen time. So be sure to pay attention.

In fact, there are many details in optimization, so you must cultivate your coding habits, accumulate a little, and slowly accumulate, the quality of the code will definitely be different.

The above is the detailed content of An introduction to some details that can be optimized in HTML5. For more information, please follow other related articles on the PHP Chinese website!