Question 1: How to optimize the loading speed of vUE page

Through coding split combined with Vue’s asynchronous component and Webpack’s code splitting function, lazy loading of routing components can be easily realized. The components corresponding to different routes are divided into different code modules, and the corresponding modules can be loaded when the routes are accessed. In other words, the components are introduced in the form of a function

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  routes:[
    {path:'/',redirect:"/home"},
    {path:'/home',component:()=>import('.. /components/Home.vue'),meta:{keepAlive:true,title:'home'}},
    {path:'/list',component:()=>import('.. /components/List.vue'),meta:{title:'list'},},
    {path:'/collect',component:()=>import('.. /components/Collect.vue'),  meta:{title:'add'},}, //detail/1 {bid:1} Path parameters must have but can be random {path:'/detail/:bid',
      component:()=>import('.. /components/Detail.vue'),
      meta:{title:'details'},
      name:"detail"
    },
    {path:'/add',component:()=>import('.. /components/Add.vue')},
    {path:The '*',redirect:'/home'}]})Copy the code

Question 2: How do routing components send parameters

  • The Boolean model
  • Object pattern
  • The function mode

Question 3: How to transmit route parameters

  • Through the params
  • Through the query
  • Through the hash

Problem # 3: Common Flex properties

  • Flex-direction :row/colunm Default is row or column
  • Jsuttify-content: Center vertically centered
  • Align-content :center horizontally centered
  • Flex :1

Problem four: How to optimize the slow page loading?

  • Reducing HTTP requests

For example, when deleting, the page will refresh the data. In this case, do not call the interface directly, but write the delete method again

  • Put the style sheet in the header

Can reduce the page request time, make the content gradually present, improve the user experience, prevent “white screen”

  • Place the script at the bottom

The download and execution of JS blocks the DOM tree construction, or even interrupts it

  • Avoid CSS expressions
  • Some small ICONS are introduced in the form of Sprite images

The Sprite image was introduced by putting all the small images on a large image, so we only need to request it once, and then each time we get the corresponding icon by position

  • To streamline the JavaScript

What are the new features of CSS3

  • Added various CSS selectors
  • Rounded border- RADIUS – Multi-column layout
  • Shadows and reflections
  • Text effects text-shaow
  • Linear gradient
  • Rotated Transtorm priority:! Important > Inline Style >ID selector > Class selector > Tags > Wildcards > Inheritance > Browser default properties

Q6: What are the new features of HTML5?

  • Canvas painting
  • Media playback Videodio and AudioVideo
  • Local storage localStora and seesitionStorage
  • Semantic content label article, footer, header, nav, section
  • Form controls calendar, email, time, url, search
  • New technology webworker, webSocket, Geoloaction

Q7: How to deal with common compatibility problems

  • Browser compatibility problem 1: Labels of different browsers have different external and internal patches by default

Margin: 0; padding:0; }

  • Browser compatibility problem 2: After the block property tag float, there is a horizontal margin case, in IE6 display margin larger than the set

Margin: 0; padding:0; }

  • Browser compatibility problem three: set a small height label (generally less than 10px), in IE6, IE7, roaming height beyond their own Settings

Set overflow:hidden for tags out of height; Or set the line height to be less than the height you set.

  • Browser compatibility problem 4: Inline property tags, display:block after float layout, and horizontal margin situation, IE6 spacing bug

In the display: block; Add display:inline; display:table;

  • Browser compatibility problem 5: Images are spaced by default

Use the float property for the IMG layout

  • The minimum label height min-height is incompatible

If we want to set the minimum height of a label to 200px, we need to set it to: {min-height:200px; height:auto ! important; height:200px; overflow:visible; }

  • Browser compatibility issue 7: Transparency is compatible with CSS Settings

Hack, solve

  • Horizontal centering of elements

FF:margin:0 auto; IE: text-align:center

Vue declares periodic functions

  • BeforeCreated is called after instance initialization and before data Observer and Event/Watcher event configuration.
  • Created is called immediately after the instance is created.
  • BeforeMounted Is called before mounting begins
  • Mounted el is replaced by a newly created vm.$el.
  • BeforeUpdata Called when data is updated and occurs before the virtual DOM is patched.
  • This hook is called after upData’s virtual DOM is re-rendered and patched due to data changes.
  • Called when the active keep-alive component is activated
  • Deactivated When the keep-alive component is disabled.
  • BeforeDestroy Called before instance destruction
  • Called after the deStory instance is destroyed
  • ErrorCaptured is called when an error is caught from a descendant component

The principle of Vue to implement two-way data binding: Object.defineProperty () The setter and getter of each attribute is hijacked through Object.defineProperty. When data changes, messages are published to subscribers and corresponding listener callback vUE data bidirectional binding is triggered. MVVM as a data binding the entrance of the Observer, the compile, watcher, through changing the Observer to monitor their own data, through the compile to parse the compiled template instruction, finally set up by watcher Obsever and compile a bridge of communication, Achieve the effect of view-based data update

Vue-router hook function

  • Global hook beforeEach afterEach
  • Hooks in a single route beforeEnter beforeLeave
  • Component routes beforeRouteEnter and beforeRouteUpdate,beforeRouteLeave

Other questions: 1. What happens when you visit a URL? A: The client obtains the URL – > resolves the DNS – > TCP connection – > sends the HTTP request – > the server processes the request – > Returns the packet – > the browser resolves the rendered page – > TCP disconnects

2. New features of H5? A: 1. Semantic tag 2. New video and audio 3. Web Storage 4. Web Worker 5

Bubble sort

Let ary =,1,5,4,3 [2]; function sort(ary) { for(let i = 0; i< ary.length-1; i++) { for(let j = 0; j < ary.length-i-1; j++) { if (ary[j] > ary[j+1]) { let temp = ary[j]; ary[j] = ary[j+1]; ary[j+1] = temp; } } } } sort(ary) console.log(ary)

Let ary1 = [1,['2','3'],2]; let ary2 = [1,['2','2',3,['3']],4]; let aryOne = [].concat.apply([], ary1).join(',').split(',').map(Number); let set = new Set(aryOne); Console. The log (set) to find the number of letters in the most times var testStr = 'asdasddsfdsfadsfdghdadsdfdgdasd'; var testArray = testStr.split(''); var a = testArray.reduce(function(prev,next){ if(next in prev) { prev[next]++; }else { prev[next] = 1; } return prev },{}) console.log(testArray) console.log(a)Copy the code