36. What optimizations have you made for the Vue project?

1)v-if and v-show Distinguish usage scenarios
2)computed and watch Distinguish usage scenarios
3)Lazy loading(fifth)
4)Browser cache(Question 28 above)

37. What are the ways to optimize the front-end performance of web pages?

1)compress css, js, picture
2)reduce dom Number of elements
3)Lazy loading of pictures
4)reduce http Number of requests, merge css,js ,Merge pictures
5)Skillfully using event delegation(Upper 8)

38. Mobile terminal performance optimization?

1)Try to use css3 Animation, turn on hardware acceleration
2)Appropriate use touch Time substitution click time
3)Avoid using css3 Gradient shadow effect
4)Can use transform: translateZ(0) To turn on hardware acceleration
5)No abuse float. float The amount of calculation is relatively large during rendering, and the use is minimized
6)No abuse web typeface. web The font needs to be downloaded, parsed and redrawn the current page
7)Rational use requestAnimationFrame Animation substitution setTimeout
8)css Properties in( css3 transitions,css3 3D transforms,opacity,webGL,video)Will trigger GUP Rendering, power consumption

39. H5 new features

1. Drag and drop API ondrop

Drag and drop is a common feature, that is, grab objects and drag them to another location. In HTML5, drag and drop is part of the standard, and any element can be dragged and dropped.

2. Custom attribute data ID

3. Better semantic content tags (header, NAV, footer, aside, article, section)

4. Audio, video

What if the browser does not support autoplay? Add autoplay to the properties

5. Canvas

1) The getcontext () method returns an environment for drawing on the canvas

Canvas.getContext(contextID) parameter contextID specifies the type you want to draw on the canvas. Currently, the only legal value is "2d", which specifies two-dimensional drawing and causes this method to return an environment object that exports a two-dimensional drawing API.

2)cxt.stroke() without this step, the line will not be displayed on the canvas

3) What is the difference between canvas and image when dealing with pictures?

image describes pictures in the form of objects. Canvas draws pictures on the canvas through a special API.

6. Geolocation API

7. Local offline storage localStorage long-term storage data no data loss after the browser is closed

8. The data of sessionStorage is automatically deleted after the browser is closed

9. Form controls calendar,date,time,email,url,search,tel,file,number.

10. New technologies: webworker, websocket, geolocation

CSS3 new features

1,colour: newly added RGBA, HSLA pattern
2,Text shadow(text-shadow)
3,frame: fillet(border-radius) Border shadow : box-shadow
4,Box model: box-sizing
5,background:background-size background-origin background-clip
6,Gradual change: linear-gradient, radial-gradient
7,transition: transition Can realize animation
8,Custom animation animate @keyfrom
9,Media query multi column layout @media screen and (width:800px) {...} 10,border-image
11,2D transformation;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)
12,3D transformation
13,Font Icon font-face
14,Elastic layout flex

40. Hidden elements display:none and visibility:hidden

1)
display:none means that it disappears completely and does not occupy a position in the document stream, and the browser will not parse the element; visibility:hidden means that it disappears visually and can be understood as the effect of transparency of 0. If it occupies a position in the document stream, the browser will parse the element;
2)
The performance of using visibility:hidden is better than that of display:none. When display:none switches visibility,
The page generates reflow (when some elements in the page need to change the size, layout, display and hiding, and the page is rebuilt, it is reflow. All pages need to generate reflow when they are loaded for the first time), and the visibility switch will not cause reflow.

What is the difference between the (document).ready() method and window.onload?

(1) The window.onload method is executed after all elements in the web page (including all associated files of elements) are fully loaded into the browser.
(2) The $(document). Ready () method can manipulate the DOM when it is ready to load and call the function that executes the binding.