The CSS.

1. What is BFC?

BFC stands for Block Formatting Context. Is a concept about CSS rendering positioning.

Block Formatting Contexts (BFC), Inline Formatting Contexts (IFC), GrideLayout Formatting Contexts (GFC) : Grid Formatting Context, FFC (Flex Formatting Context)

Let’s start with the visual formatting model: The mechanism used to process documents and display them in visual media is also a concept in CSS. The visual formatting model defines the generation of boxes, including block boxes, inline boxes, anonymous boxes and some experimental boxes. The type of box is determined by the display property.

Block boxes (display:block) : Block-level boxes participate in fast formatting context, visually appear to be fast, in a single line, each block-level element generates at least one block-level box.

Inline boxes (display:inline,inline-block,inline-table) : Inline elements generate inline boxes.

Anonymous boxes: Anonymous block boxes and anonymous inline boxes, which cannot be selected using a selector because they have no name.

Three positioning schemes: During positioning, the browser locates elements according to their box type and context. Boxes are the basic unit of positioning. Three positioning schemes: conventional flow, floating, absolute positioning

Conventional flow

  1. In a normal flow, boxes are arranged one after another;
  2. In the context of block-level formatting, they are arranged vertically; Format the context in the line, they are arranged horizontally;
  3. When position is static or relative and float is None, the normal flow is triggered.
  4. Static positioning, box position is the position of the conventional circulation bureau; Relative positioning, the box offset position is defined by these attributes top, bottom, left and right. Even with an offset, the original position remains, and other regular streams cannot occupy the position.

floating

  1. The box is called the floating box;
  2. It is at the beginning or end of the current line;
  3. This causes the normal flow to surround it unless the Clear property is set.

Absolute positioning

  1. Absolute positioning scheme, the box is removed from the conventional flow, does not affect the layout of the conventional flow;
  2. It is positioned relative to its containing block, associated with CSS properties: top, bottom, left, and right;
  3. If the element’s attribute position is absolute or fixed, it is an absolute positioning element.
  4. For position: absolute, the element is positioned relative to the nearest relative, fixed, or absolute’s parent, or to the body if not.

Block formatting context

The block formatting context is part of the CSS visual rendering of a page and is used to determine the layout of the block box and the area of interaction between floats. How to create a BFC (trigger condition) :

  1. The root element or any other element containing it;
  2. Float (element float is not None);
  3. Absolute positioning elements (the element’s position is absolute or fixed);
  4. Inline block inlines-block (display: inlines-block of elements);
  5. Table cells (display: table-cell element, default HTML table cell attribute);
  6. Overflow is not a visible element;
  7. Flex boxes (display: flex or inline-flex);

BFC rendering rules:

  1. BFC vertical margin overlap.
  2. The region of the BFC does not overlap with the box of floating elements.
  3. The BFC is a separate container, and the elements outside do not affect the elements inside.
  4. Floating elements are also involved in calculating the height of the BFC.

The most common ones are overflow: hidden, float: lef/right, and position: Absolute. That is, each time you see these attributes, it means that the element has created a BFC.

The scope of the BFC contains all the children of the context element that was created, but not the inner elements of the child of the new BFC. From another perspective, an element cannot exist in both BFC’s.

The most important effect of the BFC is to isolate the elements inside the BFC from the elements outside, so that the positioning of the elements inside and outside does not affect each other. This takes advantage of the BFC clearing float feature.

The most significant effect of BFC is to create an isolated space to isolate the interaction between elements inside and outside the space.

In practice, the BFC allows you to close the float and prevent it from overlapping with the float element. Meanwhile, due to the isolation function of BFC, BFC can be used to contain an element to prevent margin collapse between this element and elements outside BFC.

BFC application scenarios

  1. Prevents floating from causing the parent element to collapse in height.

After float: left, the parent element will collapse. Find the parent element and add overflow: hidden. This is also a way to clear float.

  1. Avoid margin folding.

Two blocks with the same BFC will cause the outer margin to collapse, but if the BFC is set separately for the two blocks, the margin overlap problem does not exist.

2. An element is implemented in a horizontal/vertical center

Horizontal center

For inline elements: text-align: center;

For block-level elements of fixed width:

  1. Margin: 0 auto; Width and margin implementations.
  2. Margin-left: -width/2, default is the parent element position: relative.

For block-level elements of unknown width

  1. Use the table label (or simply display the block-level element setting variable: TABLE) by adding the left and right margins to the label as Auto.
  2. Display: inline-block and text-align: center achieve horizontal center.
  3. Absolute position + Transform, translateX can move 50% of its element;
  4. Flex layout uses context-content: center.

Vertical center

  1. Centering with line-hight is suitable for plain text classes.
  2. By setting the relative positioning of the parent container and the absolute positioning of the child, and by shifting transform.
  3. Flexible layout Flex: parent set display: flex, child set margin to auto realize adaptive center.
  4. Flex scheme: align-items: Center.

3. Pros and cons of a floating layout? What are the ways to clear floats?

Advantages: The initial advantage is the ability to surround the image with text when blending images. When an element is floated, it has some of the properties of a block-level element, such as the ability to set the width.

Disadvantages: Floating elements, once out of the document flow, cannot support the high collapse of the parent element.

How to clear the float:

  1. Add extra tags, and add the clear attribute;
  2. Parent add overflow: Hidden property, or set height;
  3. Create a pseudo-class selector to clear the float:

2. Js

1. Tell me what you know about closures

A function defined inside a function that holds references to variables or arguments inside the function. Internal functions depend on external functions, and external function parameters and variables are not collected by the garbage collection mechanism. These variables are always in memory.

Its advantage is that it can read the variables inside the function, which can avoid the pollution of global variables. The disadvantage is that it will increase the amount of memory and easily lead to memory leaks. The solution is to delete all the local variables that are not applicable before exiting the function. In JS, functions are closures and only functions have scope.

Closure features, functions nested functions, inside the function can reference external parameters and variables, parameters and variables are not garbage collection mechanism.

Because in js, belong to the scope of the variable function scope, after the function, the scope will be clear, the memory will be recycled, but because of the closure is based on a function within the function, because the child function can access the superior scope of reason, even if the superior function performed, scope will not be destroyed.

In essence, a closure is a bridge between the inside and outside of a function

In what scenarios are closure functions used

  1. Settimeout: The first function passed by a native settimeout cannot take an argument.
  2. Callback: Function called when the event is triggered.
  3. Function stabilization: Execute the callback n seconds after the event is triggered, and reset the timer if it is triggered again within n seconds. The key to the implementation is the setTimeout function. Since you still need a variable to hold timing, consider maintaining global purity, which can be achieved with closures.
  4. Encapsulate private variables.

What other operations can cause memory leaks

  1. Memory leaks caused by closures
  2. Memory leaks caused by unexpected global variables
  3. Memory leaks caused by uncleaned DOM elements (forgotten timers or callback functions)
  4. Memory leaks caused by references to child elements

2. Talk about anti-shake and throttling

Stabilization: Execute the callback n seconds after the event is triggered. If it is triggered again n seconds later, the timer is reset. (Trigger repeatedly, only recognize the last time, from the last trigger start time.)

Throttling: specifies that only one function can be triggered in a unit of time. If multiple functions are triggered in a unit of time, only one function can be triggered.

Namely: function anti – shake and throttling are to prevent a certain time frequently triggered, but the principle is different. Anti – shake is performed only once in a certain time, throttling is performed at intervals.

Combined with Application Scenarios

  1. Anti – shake: (1) search lenovo, users in the continuous input value, with anti – shake to save the request resources. The window resize event is triggered only once by reresizing the browser window.
  2. Throttling: (1) constantly click the mouse trigger, control unit time trigger only once. ② Listen for rolling events, such as whether to slide to the bottom and load more.

3. What are the variable types of JS? What’s the difference between a type and a type?

Basic types: Number, Boolean, String, Null, underpay, Symbol (ES6 newly added), BigInt (ES2020)

Reference types: Object, Object subtypes (Array, Function)

Methods to determine the type:

  1. Use typeOF to identify four types, namely number, String, Boolean, object, and the rest are detected as object.
  2. Using instanceof, according to the definition of Instanceof: determine whether the object referred to by the prototype property of the reference object is on the prototype chain of the object being tested. Such variable judgment can detect 9 kinds, and NULL and underpay are detected as object, because THERE is no such global type in JS. Disadvantages: The number, string, and Boolean types can only be detected by the constructor (new) definition, not by the normal definition.
  3. To counter the drawbacks of instanof, use the constructor test, where the properties of the prototype object point to the constructor. Aside from the NULL and underpay, nine types of cars can be detected. The drawback, however, is that the constructor pointed to by constructor can be modified.
  4. Use Object. The prototype. ToString. Call Object. The prototype. The toString Object can be obtained by the internal properties of (class), and according to the internal property returns, such as the Object Number 】 the string, Then you can get the internal attribute [class] via call.
  5. Using JQuery., type, type, type, the type is based on the ES5 object. The prototype. The tostring. Call further encapsulation, can detect all the variable type.

4. How to determine the array type

Array.isArray

5. Array deduplication

  1. Array. The from (new set (,1,2,3,4 [1]))
  2. Fiflter method
  3. Two for loops
  4. indexOf

6. Differences between arrow functions and ordinary functions

  1. Arrow functions are anonymous and cannot be used as constructors. You cannot use new;
  2. Arrow functions do not bind arguments, instead use the reset argument… To solve
  3. The arrow function does not bind this and captures the this value of its context as its own.
  4. When the arrow function calls a function through call () or apply (), it takes only one argument and does not affect this;
  5. Arrow functions have no stereotype attributes.

7. Differences between ES5 and ES6

Three. Front-end performance

1.. How to realize lazy loading of pictures

Scheme 1: clientHeight, scrollTop and offsetTop give the image a placeholder resource first:

Then, monitor the scroll event to determine whether the picture reaches the viewport:

Throttle the Scroll event to avoid repeated triggering:

The DOM element’s getBoundingClientRect API changes the lazyLoad function to the following:

Scheme 3: IntersectionObserver This is an API built into the browser, which can monitor the Scroll event of the window, judge whether it is in the viewport, and perform throttling.

2. What happens when a page is loaded and displayed from the input URL?

  1. The browser will start a thread to process the request, and analyze the URL to determine if it is HTTP and process it in web fashion.
  2. Call the corresponding method in the browser kernel, such as the loadURL method in webView;
  3. Obtain the IP address through DNS resolution, set the UA and other information to send the second GET request.
  4. HTTP protocol session, the client header (request header);
  5. Access the Web server on the Web server, such as Apache, Tomcat, and Node. js, and find the corresponding request processing.
  6. Enter the deployed back-end application, such as PHP, Java, JavaScript, Python, etc., to find the corresponding request processing;
  7. At the end of processing, the feedback header, if the browser access through, the cache has the corresponding resources, will be compared with the server last modification time, always return 304;
  8. The browser starts downloading the HTML document (response header, status code 200), using the cache;
  9. Document tree establishment, according to the mark request required to specify the MIME type of the file (such as CSS, JS), and set the cookie;
  10. The page starts rendering DOM, JS manipulates DOM according to DOM API, performs event binding, etc., and the page display is complete.

3. Learn more about the browser caching mechanism

Network protocol

1. This section describes the HTTPS handshake process

  1. The client uses the HTTPS URL to access the Web server, requiring an SSL connection with the server.
  2. After receiving the request from the client, the Web server sends a copy of the certificate (including the public key) to the client.
  3. After receiving the website certificate, the client will check the certificate issuing authority and expiration time. If there is no problem, a random key will be generated.
  4. The client encrypts the session key with the public key and transmits it to the server. The server decrypts the session key with its private key.
  5. Then the server and client use the key to encrypt the transmission.

V. Browser

1. Redraw and refluxing

2. Web localStorage (localStorage, sessionStorage)

Note: 1. For browsers, using web storage to store key values compared to store cookies is more intuitive, and larger capacity, it contains two: localStorage and sessionStorage. 2. SessionStorage: Maintains a storage area for each data source for the duration of the browser opening, including page reloading. 3. LocalStorage (long-term storage) : Same as sessionStorage, but data still exists after the browser is closed.

API: The usage of sessionStorage and localStorage is basically the same, the value of the reference type is converted to JSON.

6. Vue related

1. What is the principle of vUE bidirectional binding?

Two-way data binding is implemented by redefining the GET and set methods based on Object.defineProperty (). Modify trigger set method assignment, get trigger GET method value, and publish information through data hijacking.

2. Transfer values between VUE components

1. Transfer values between parent components and child components

Parent component to child component: the child component receives data through the props method;

Child component to parent: the $emit method passes arguments

2. Data transfer between non-parent and child components, and value transfer between sibling components

EventBus is the creation of an event hub, a sort of hub, that you can use to deliver and receive events.

vuex

From son to father, from father to son

3. Vue components communicate in several ways

  1. Pros and EMIT (common) : Parent component passes data to child component via prop, child component passes data to parent component via $EMIT trigger event.
  2. There is a problem with the first method of handling data transfers between parent and child components: If parent component A has child component B and component B has child component C, then if component A wants to pass data to component C, in the first way, component A must pass information to component B through prop and component B through prop to component C. If there are more components between components A and C, this approach becomes complicated. Attrs and Attrs and attrs and Listeners can send messages between component A and component C.
  3. Central event Bus: Both methods transfer data between parent and child components. If they are not parent and child components, the central event bus can be used. Emit emit event, bus.emit emit event, bus.emit emit event, bus.on listen for the emitted event. (Can be used for parent-child, sibling, cross-level component communication)
  4. Provide and inject: come in pairs and are used by parent components to pass data down. Variables are provided by providers in the parent component and injected by inject in the child component. As long as inject is invoked, data in the provider can be injected, no matter how deep the child component is. Rather than being limited to fetching data only from the prop property of the current parent component, child components can be called as long as the parent component lives. (It mainly solves the communication problem between cross-level components, and the usage scenario is mainly for sub-components to obtain the state of superior components)
  5. Vuex handles data interaction between components.
  6. SessionSrorage is a traditional method of storing data locally and retrieving it for use.

4. Vue request interceptor and response interceptor

Request interceptor: the function is to carry out some operations before the request is sent, such as adding token in each request and doing unified processing.

As for interception, the front-end request is ultimately dependent on Ajax. Vue-resource and Axios in VUE are all just unified ajax encapsulation, which exposes the interceptor to write a method, write Ajax in the method. Request interceptor, is in the execution of this method, the first request to add to the request header of those data (token, back-end to add password, etc.) first executed, all assigned to a variable, and then unified ajax, ajax is executed, this is the so-called request interception. You’re essentially executing the data to be added and then ajax, and if you pull out the data addition process, it’s called a request interceptor.

Response interceptor: It is used to perform some operations after receiving the response, such as switching to the login page when the server returns that the login status is invalid and needs to log in again, or refreshing the token after the token expires.

The same is true for response interceptor. After the request result is returned, it is not directly exported, but first processes the response code and then exports it to the page. If the processing process of the response code is extracted, it becomes the so-called response interceptor.

5. Vue custom instruction and use

1. What is a directive

Vue provides some more convenient output for pages and data. These operations are called instructions and are represented by V-xxx, such as the attribute V-if in HTML pages. Some DOM behaviors are encapsulated in the instructions, combined with attributes as a cipher. The cipher has corresponding values. According to different values, relevant DOM operations will be bound, that is, some template operations can be carried out.

2. Built-in commands used in VUE

V-text: the innerText attribute of an element. The innerText attribute is used only with a double tag. The innerText attribute is the same as {{}}.

The v-HTML is the innerHTML of an element.

③ V-show: show and hide elements, switch based on CSS style. If you do want to hide, add display: None to the element’s Style.

④ V-IF: The operation of inserting and removing elements is equivalent to the creation and destruction of elements. If the expression is false, it leaves a <! —-> as a tag, if v-if is true in the future, insert the element here (do not leave a separate crater if if has else).

⑤ V-else -if: The previous adjacent element must have v-if or V-else -if.

⑥ V-else: The previous adjacent element must have v-if or V-else -if.

⑦ V-for: Used to loop over a set of data (arrays or objects). Special syntax must be used: V-for =”item in list”. Note: When v-for and V-IF are on the same node, v-for has a higher priority than V-IF. That is, v-if will run in each V-for loop.

⑧ V-ON: used to monitor DOM events and perform operations. Short for [@].

⑨ V-model: used to create bidirectional data binding on expressive controls such as input/textarea.

⑩ V-bind: dynamically binds one or more attributes, such as class, style, and href.

⑪ V-once: Components and elements are rendered only once and are not re-rendered when data changes.

Compare v-if with V-show (what is the difference between V-if and V-show, which CSS attribute is added to V-show?)

  • V-if is true conditional rendering because it ensures that event listeners and subcomponents within the conditional block are properly destroyed and rebuilt during the switch.
  • V-if is also lazy and does nothing if the condition is false at initial rendering until the condition is true for the first time and the conditional block is rendered.
  • V-show is much simpler in comparison, regardless of the initial conditions, elements are always rendered and simply switched based on CSS.

In general, V-if has a higher switching overhead, while V-show has a higher initial rendering overhead. Therefore, v-show is good if very frequent switching is required, and V-if is good if the conditions change very little at run time.

The hook function of a custom directive.

During actual development, these built-in instructions may not be all you need, or you may want to add special functionality to the element. This is where vue’s custom instructions are needed. Custom instructions perform low-level operations on ordinary DOM elements.

Vue provides five hook functions for custom directives

  • Bind: the directive is called the first time it is bound to an element and is executed only once. This is where you can perform one-time initialization Settings. (Triggered when an instruction is bound to an HTML element)
  • Inserted: A bound element, called when inserted into the DOM of the parent node (the parent node is guaranteed to exist only). (Triggered when the element bound by the directive is inserted into the parent node)
  • Update: Called when a component is updated. (Triggered when the element state/style, content (in this case, vUE data of the element binding) of the directive binding changes)
  • ComponentUpdated: Called when components and subcomponents are updated. (Triggered when update() is completed)
  • Unbind: called when a directive is unbound from an element, executed only once. (Triggered when the element bound by the directive is removed from the DOM)

Note:

    1. In addition to update and componentUpdated hook functions, each updated hook function contains el, binding, and vNode parameters.
    1. In each function, the first argument is always el, which represents the DOM element to which it is bound. The EL argument is a native JS object, so vue custom instructions can be used to interact directly with the DOM.
    1. Binding is an object that contains the following attributes: Name, Value, oldValue, expression, ARG, modiFIERS
    1. OldVnode only works with update and componentUpdated hooks.
    1. Except for el, binding and vNode attributes are read.

The way of instruction registration is divided into two kinds: global registration and local registration, just like the way of filter, interfuse and component registration.

6. Talk about route navigational guards (hook functions)

Vue route navigation guard, that is, we often say that the life cycle of hooks, hooks means, at a certain point of vue will automatically trigger this method, we can through these hooks, implement some functions, for example, some pages need to login to access certain pages requires the user to achieve what level can access, Or change some information after jumping to the page and so on, we can intercept through the route navigation guard and do the corresponding processing.

Methods of embedding the routing navigation process: global, proprietary to a single route, or component-level.

There are six hook functions for routing:

Global routing hook functions: beforeEach, afterEach

Single routing hook function: beforeEnter

BeforeRouter, beforeRouterLeave, beforeRouterUpdate

Module 1: Global navigation hook functions

  1. Vue.router. BeforeEach (global front-guard) : is a global before hook function that must be executed every time a route changes. Three parameters:to(Router router object) The destination to be entered;from: Current route Indicates the route to navigate.nextBe sure to call this method to resolve the hook. Next (parameter/empty). The next hook into the pipe. (next(‘/’) or next({path:’/’}) : jumps to a different address. Current navigation interrupted, then new navigation)Application scenario: Perform some pre-login processing, for example, intercept the required page and jump to the login page(Route interception)

2. Vue.router. AfterEach (global post guard), after the page loads

Module 2: A single route hook can directly define the BeForenter guard on the route configuration, consistent with the global front-guard method parameter.

Module 3: Group price inside guard (component inside hook)

The leave guard is usually used to prevent users from leaving suddenly without saving changes. This navigation can be cancelled by next(false).

Vue-router interception causes an infinite loop

7. Implementation principle of keep-alive

Keep is an abstract component: it does not render a DOM element on its own and does not appear in the parent component chain; When a dynamic component is wrapped with keep-alive, inactive component examples are cached rather than destroyed.

A scenario: a user selects a filter condition to filter out a list of data on a list page, leads to the data details page from the list page, and then returns to the list page. We hope that the list page can retain the state of filtering (or being selected) of the user.

Keep-alive is used to solve this scenario. Of course, keep-Alive does more than just save page/component states. It also improves system performance by avoiding repeated component creation and rendering. In general, Kee-alive is used to hold the render state of the component.

Keep -alive

  • Application in dynamic components

<keep-alive :include="whiteList" :exclude="blackList" :max="amount"> <component :is="currentComponent"></component> </keep-alive>

  • Application in VUe-Router

<keep-alive :include="whiteList" :exclude="blackList" :max="amount"> <router-view></router-view> </keep-alive>

Include defines a cache whitelist. Keep-alive caches hit components. Exclude Specifies the blacklist. Matching components will not be cached. Max defines the upper limit of the cache component, beyond which the cache data is replaced with LRU’s policy.

Exclude has a higher priority than include. In other words, if include and exclude exist at the same time, exclude takes effect, but include does not. If a component is excluded, the component is not cached and activated and deactivated are not invoked.

A page replacement algorithm for memory management. For blocks of data that are in memory but not in use (memory blocks), called LRU, the operating system moves them out of memory based on which data belongs to the LRU to make room for loading additional data

Keep-alive lifecycle hooks:

The component/route contained by keep-alive has two more life-cycle hooks: activated and deactivated.

Activated is called the first time the component is rendered and then every time the cache component is activated. Activated Call timing:

Deactivated: called when the component is disabled (deactivated from the route)

Keep-alive does not call beforeDestroy and destroy because the component is not destroyed and is cached.

8. Vue lifecycle hooks

Each Vue instance goes through a series of initialization steps. From setting up the data at creation time to compiling the template, loading the instance into the DOM, and finally updating the DOM during data changes. This process is called the lifecycle of vUE instances, and by default, as they go through the process of creating and updating the DOM, they run functions that create and declare VUE components within those functions, called lifecycle hooks.

Most of the life cycle is not used, but it is important to note:

  • Ajax requests are best placed in Created because this is already accessible, and requests to data can be placed directly in Data. (Question: Which lifecycle should ajax requests be placed in?)
  • The operations on the DOM will be placed inside the MOUNTED, and accessing the DOM before the Mounted will be underpay.
  • Do something every time you enter/leave a component, with what hook:

Create and Mounted hooks are used for entering, beforeDestroy and destroyed hooks are used for leaving, beforeDestroy accesses this, destroyed does not access this.

Cached components: After a component is cached, re-entering a component does not trigger beforeCreate, Created, beforeMount, or Mounted. If you want to do something every time you enter a component, place activated in the cached component hook.

BeforeDestroy and destroyed are not triggered when leaving the cache component. Use the deactivated hook to remove the cache component instead.

The full sequence of triggering hooks combines routing navigation, keep-alive, and component lifecycle hooks to trigger the sequence. Suppose leaving component A and entering component B for the first time:

  1. BeforeRouterLeave: Hook of a routing component before it leaves the route.
  2. BeforeEach: global front-guard of routes, used for login authentication and global route loading.
  3. BeforeEnter: Exclusive route guard.
  4. BeforeRouterEnter: The pre-route hook of a routing component.
  5. BeforeResolve: global route resolution guard.
  6. AfterEach: Routes a global post-hook.
  7. BeforeCreate: Component life cycle, cannot access this.
  8. Created: Component lifecycle, access to this, not dom.
  9. BeforeMount: Component life cycle.
  10. Deactivated: Deactivates the cache component A or triggers a’s beforeDestroy and Destroyed component destruction hooks.
  11. Mounted: Accesses and manipulates the DOM.
  12. Activated: Goes into the cache component, into a’s nested child component (if any).
  13. Execute the beforeRouterEnter callback function next.

9. Why is data of a component in vue a function?

The component is instantiated each time it is used, and the data function is called to return an object as the data source for the component. This ensures that data between multiple components is not affected by each other.

If data is an object, the object is a reference type that affects all instances. So to ensure that data does not conflict between different instances of the component, data must be a function.

10. Talk about webpack understanding

  1. Entry: Entry, the first step in the build that WebPack performs will start with Entry, which can be abstracted into input.
  2. Module: Module, in Webpack everything module, each module corresponds to a file. Webpack recursively finds all dependent modules starting from the configured Entry.
  3. Chunk: a chunk is a code block. A chunk is composed of multiple modules for code merging and splitting.
  4. Loader: code converter used to convert the original content of a module into new content as required.
  5. Plugin: The extension plug-in broadcasts corresponding events at specific times in the WebPack construction process. The plug-in can listen for these events and do corresponding things at specific times.
  6. Output: indicates the Output position of the packaged file.