Nine, several methods of element hiding
（1)opacity: 0 ;
By changing the transparency of the element, the element is visually hidden, but the element itself still occupies its own position and affects the layout of the web page, and can also correspond to the user's interaction;
（2）visibility: hidden ;
Like opacity, the element itself still occupies its own position and affects the layout of the page, except that it does not affect interaction.
（3）display: none ;
The hidden element does not occupy any space. Once display is set to none, any interaction with the element will have no effect, and the screen reader software cannot read the content of the element. The effect of this method is as if the element is completely invisible. If it exists, any state value toggle of it always takes effect immediately.
The element can still be accessed through the DOM, and it can be manipulated directly through the DOM.
（4）position
remove the element from the visible area,
position:absolute; left:-9999px; top:-9999px;
(5) clip-path: hide elements by clipping
.hide {
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}
Ten, the method of array deduplication
The first method: use indexOf in es5 for deduplication
function arr1(){
var n=[];
for(var i=0;i<arr.length;i++){
if(n.indexOf(arr[i])==-1){
n.push(arr[i]);
}
}
return n;
}//First define an empty array, then traverse the array, use indexOf to check if there are duplicate elements, and if not, insert it into n. Use of such methods should take into account ES5 compatibility issues
The second method: Sort first and then compare adjacent ones to remove duplicates. This method is more efficient than the first method.
function arr3(){
arr.sort();
var re=[arr[0]];
for(var i=1;i<arr.length;i++){
if(arr[i]!==re[re.length-1]){
re.push(arr[i]);
}
}
return re;
}
The third method: use map to deduplicate
function arr4(arr){
var map = {;
if(arr&&Array.isArray(arr)){
for(var i=arr.length;i>=0;--i){
if(arr[i] in map){
arr.splice(arr[i],1);
}else{
map[arr[i]] = true;
}
}
}
return arr;
}
11. Methods of judging whether an object exists
The first method: the JavaScript language is to parse and then run, complete the variable promotion during the parsing process, and then make a judgment (in addition to whether the object exists, it is recommended to use this method when judging whether the object is a null value):
if (!myObj) {
var myObj = {};
}
The second method: window is the top-level object of JavaScript, and all global variables are its properties;
if (!window.myObj) {
var myObj = {};
}
The third method: In some environments (such as V8, Rhino), window may not be the top-level object, and can be written as follows:
if (!this.myObj) {
this.myObj = { };
}
The this keyword always points to the top-level variable, so it can be independent of different runtime environments.
The fourth method: the pointer of this is variable, and can be changed to:
var global = this;
if (!global.myObj) {
global.myObj = { };
}
The fifth method: Use the typeof operator to judge whether myObject is meaningful (only judge whether the object exists, it is recommended to use):
if (typeof myObj == "undefined") {
var myObj = {};
}
The sixth method: use the operator in to determine whether myObject is a property of the top-level object:
if (!('myObj' in window)) {
window.myObj = { };
}
The seventh method: use hasOwnProperty to determine whether myObject is a top-level object:
if (!this.hasOwnProperty('myObj')) {
this.myObj = { };
}
12. After the hyperlink style is clicked, the style does not work, how to solve it?
Define the order of css: link-visited-hover-active
Thirteen, front-end should optimize the website from which aspects
(1) Reduce external http requests
(2) Compress css, js and html
(3) Use cdn and cache to improve speed
(4) Compressed file
(5) Use css Sprites
(6) Use a lightweight framework
(7) Use lazy loading or preloading
(8) Reduce DOM manipulation
14. How to achieve SEO optimization on the front end
(1) Use meta to define keywords, website descriptions, etc.;
(2) Add the alt attribute to the foreground image <img>
(3) The size of the foreground image should be defined, otherwise the page will be re-rendered and the loading speed will be affected
(4) Appropriately add the rel = "noflow" attribute to the a tag
(5) Use absolute paths inline to reduce server response time
(6) The level of the navigation bar should not be too much
(7) Use Svg, because the source file of svg is a text file, which is conducive to access
(8) Write HTML code semantically, in line with W3C standards