Shulou(Shulou.com)06/02 Report--

This article mainly explains "what optimization skills must be known at the front end of Web". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "Web front-end must know what are the optimization skills" it!

1. Remove moving Ghost Shadow Click effect

There are no native apps, but mobile browsers do. When you click any button or any clickable object (such as an icon), users using Safari or Chrome browsers will see a shadow click effect.

, or other clicked elements will have a short base shadow effect. The effect should be to give feedback to the user and let the user know what has been clicked and what should happen. This makes sense for many interactions on the site.

But what if your site is actually responsive enough and contains the effect of loading data? Or do you use Angular,React or Vue, and many UX interactions are instantaneous? The shadow click effect may affect your user experience.

You can use the following code in the stylesheet to get rid of this shadow click effect. Don't worry, even if you need to add it as a global style, it won't break anything else.

* {

-webkit-tap-highlight-color: rgba (0,0,0,0)

-moz-tap-highlight-color: rgba (0,0,0,0)

} 2. Use a user agent to detect whether a user accesses from a mobile device

I'm not talking about abandoning stylesheet-specific @ media code for devices with a width less than 600px. On the contrary. You should always use stylesheets to make your site mobile-friendly.

But what if you want to display other effects based on whether the user is on the mobile device? You want to include it in the JavaScript function-- and you don't want to change it when users change the direction of their smartphone (increasing the width to more than 600px).

In this case, my recommendation is to use a globally accessible Helper function, which determines whether the user device is a mobile device based on the browser's user agent.

$_ HelperFunctions_deviceIsMobile: function () {

If (/ Mobi/i.test (navigator.userAgent)) {

Return true

} else

{return false

}

} 3. Load a larger image of the mobile version

If you use large images and want to make sure that the load time on your mobile device is still suitable for your mobile users, always load different versions of the image.

In your CSS file, define mobile-only and nomobile.

. mobile-only {display: none;}

@ media (max-width: 599px) {

...

.nomobile {display: none;}

. mobile-only {display: initial;}

} 4. Try infinite scrolling and delayed loading of data

If you have a large list, consider delaying loading more data as the user scrolls down, rather than displaying the load more or Show more button. Native applications typically include such delayed loading unlimited scrolling capabilities.

It is not difficult to use the Javascript framework to achieve this in mobile web. You can add a reference ($ref) to the element in the template or rely only on the absolute scrolling position of the window.

The following code shows how to achieve this effect in a Vue application. You can add similar code to other frameworks, such as Angular or React.

Mounted () {

This.$nextTick (function () {

Window.addEventListener ('scroll', this.onScroll)

This.onScroll (); / / page needs to be loaded initially

});

}

BeforeDestroy () {

Window.removeEventListener ('scroll', this.onScroll)

}

If the user scrolls to the bottom of an element or page, the onScroll function loads the data:

OnScroll () {

Var users = this.$refs ["users"]

If (users) {

Var marginTopUsers = usersHeading.getBoundingClientRect () .top

Var innerHeight = window.innerHeight

If ((marginTopUsers-innerHeight) < 0) {

This.loadMoreUsersFromAPI ()

}

}

} 5. Make modes and pop-ups full-screen or full-screen

The space on the mobile phone screen is limited. Sometimes developers forget this and use the same interface type as the desktop version. In particular, the modal window, if not implemented correctly, is a barrier for mobile users.

A modal window is a window that you superimpose on the rest of the page. For desktop users, they can work well.

Because of the limited screen space, mobile web applications of large companies (such as Youtube or Instagram) that are well designed will use the mode as full width or full screen, with an "X" at the top of the mode to close.

This is especially true of the registration feature, which is a normal mode window in the desktop version and full-screen mode in the mobile version.

At this point, I believe that everyone on the "Web front-end must know what are the optimization skills" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.