Write for the front-end newcomer: front-end development will be knowledge points
Which browser tests are commonly used? What are the kernels
Browser:
IE
.
Chrome
.
FireFox
.
Safari
.
Opera
.
The kernel:
Trident
.
Gecko
.
Presto
.
Webkit
.
What’s the difference between an inline element and a block-level element? Compatibility use of inline block elements? (
IE8
The following)
Inline elements: will be arranged horizontally and cannot contain block-level elements, set
width
Null and void,
height
invalid
(
You can set the
line-height)
.
margin
Up and down invalid,
padding
Up and down invalid.
Block-level elements: Each occupies a row, arranged vertically. Start the new line and end it and then break it.
Compatibility:
display:inline-block; *display:inline; *zoom:1;
What are the ways to clear floats? Which is the better way?
(
) the parent
div
define
height
.
(
) Empty the end
div
The label
clear:both
.
(
) the parent
div
Defining pseudo class
:after
and
zoom
.
(
) the parent
div
define
overflow:hidden
.
(
) the parent
div
define
overflow:auto
.
(
) the parent
div
Also float, need to define the width.
(
) the parent
div
define
display:table
.
(
) at the end
br
The label
clear:both
.
The better one is number one
3
A lot of websites use it this way.
What are the common attributes? What are the roles of the two?
The width and height are applied to the element’s content box, respectively. Draws the inside margins and borders of elements outside the width and height
(
Element Default
)
.
Any inner margins and borders specified by the element will be drawn within the specified width and height. The width and height of the content are obtained by subtracting the border and inner margin from the specified width and height, respectively.
Role? What is the difference between standard mode and compatible mode
?
Tell the browser’s parser what document to use to parse the document.
DOCTYPE
Nonexistent or incorrectly formatted documents will be rendered in compatibility mode.
Standard mode of typesetting and
JS
The mode of operation is run to the highest standards supported by the browser. In compatibility mode, pages are displayed in a loosely backward compatible manner
.
Emulate the behavior of older browsers in case the site doesn’t work.
Why only write
?
Is not based on
SGML
, so there is no need for
DTD
Make a reference, but need to
doctype
To regulate browser behavior (to make browsers behave the way they should).
while
Based on the
SGML,
So you need to have
DTD
To tell the browser what type of document the document is using.
When the page imports the style, use
link
and
@import
What’s the difference?
(
)
link
Belong to
XHTML
Tag, in addition to loading
CSS
Can also be used to define
RSS,
define
rel
Connection properties and other functions; while
@import
is
CSS
Provided for loading only
CSS;
(
) when the page is loaded,
link
Will be loaded at the same time, and
@import
Refer to the
CSS
It waits until the page is loaded
;
(
)
import
is
This writing
Put forward, only in
IE5
To be recognized, and
link
is
XHTML
Label, no compatibility problem.
What is your understanding of the browser kernel?
There are two main parts: rendering engine
or
Rendering Engine)
and
JS
The engine.
Rendering engine: responsible for retrieving the content of a web page (
,
XML
, images, etc.), we formed a big bull skirt front is
4
July 1, organize information (e.g. join
CSS
Etc.), with zero in the middle
2
Seven, as well as the calculation of the display of the web page, behind is a wu four, is learning to add, not learning do not disturb. It then outputs to a monitor or printer. The syntax of the web page will be interpreted differently depending on the browser kernel, so the rendering effect will be different. All Web browsers, E-mail clients, and other applications that need to edit and display web content require a kernel.
Engines: parse and execute
javascript
To achieve the dynamic effect of the web page.
Initially the render engine and
The engine did not differentiate very clearly afterwards
JS
As engines became more independent, the kernel tended to refer only to the rendering engine.
What are the new features? How to deal with
HTML5
Browser compatibility issues with the new TAB? How to distinguish between
HTML
and
HTML5
?
Not anymore
SGML
Subset, mainly about the image, location, storage, multi-tasking and other functions.
painting
canvas;
Used for media playback
video
and
audio
The element
;
Local Offline storage
localStorage
Data is stored for a long time. Data is not lost after the browser is closed
;
Data is automatically deleted after the browser is closed
;
More semantic content elements, such as
article
,
footer
,
header
,
nav
,
section;
Form control,
calendar
,
date
,
time
,
email
,
url
,
search;
The new technology
webworker, websocket, Geolocation;
Supported by
document.createElement
The tag generated by the method,
You can take advantage of this feature to make these browsers support it
The new label,
Once the browser supports the new tag, it also needs to add the default style for the tag.
You can also use a mature framework, such as
.
Give me a brief description of you
HTML
Semantic understanding?
Do the right thing with the right label.
Semantization makes the content of a page structured and clearer, facilitating parsing by browsers and search engines
;
Even in the absence of styles
The case is also presented in a document format and is easy to read
;
Search engine crawlers also rely on
Tag to determine the context and weight of each keyword in favor of
SEO;
Make it easier for people reading source code to divide the site into blocks, easy to read maintenance understanding.
introduce
js
The basic data type of
,
Null
,
Boolean
,
Number
,
String
What are the built-in objects?
Data encapsulation class object:
,
Array
,
Boolean
,
Number
and
String
Other objects:
,
Arguments
,
Math
,
Date
,
RegExp
,
Error
Object understanding
Always point to the direct (not indirect) caller of a function;
If you have
Key words,
this
Point to the
new
The object that came out;
In the event,
Point to the object that triggered the event, and in particular,
IE
In the
attachEvent
In the
this
Always point to a global object
Window
.
What do you do?
Its function is to parse the corresponding string into
Code and run;
Should be avoided
, unsafe, very performance consuming (
2
A
js
Statement, one execution).
by
String conversion to
JSON
Object
eval
.
var obj =eval(‘(‘+ str +’)’)
.
How do I add, remove, move, copy, create, and find nodes
Creating a New node
To create a
DOM
fragment
Create a concrete element
Create a text node
Add, remove, replace, insert
Inserts a new child node in front of the existing child node
To find the
By label name
By element
Name
The value of the attribute
(IE
More fault tolerant, will get an array, including
id
Is equal to the
name
The value of the
)
Through the element
Id
Uniqueness,
and
undefined
The difference between?
Is a representation
”
There is no
”
When converted to a value, is
0
;
undefined
Is a representation
”
There is no
”
Is the original value of, when converted to value
NaN
.
:
(
When a variable is declared, but not assigned, equals
undefined
.
(
When the function was called, the argument that should have been provided was not provided
undefined
.
(
The) object has no assigned attribute whose value is
undefined
.
(
The function returns no value by default
undefined
.
:
(
) as arguments to a function, indicating that the function’s arguments are not objects.
(
) as the end of the object prototype chain.
What exactly does the operator do
?
(
) creates an empty object and
this
The variable refers to the object and also inherits the function’s prototype.
(
Attributes and methods are added to
this
Object referenced.
(
The newly created object is created by
this
Referenced, and finally returned implicitly
this
.
Understand?
Is a lightweight data interchange format. It is based on
JavaScript
A subset of. Simple data format
.
Easy to read and write
.
The bandwidth usage is small.
Format: key-value pairs, for example:
and
apply()
The difference and function of?
The function takes two arguments: the first argument is the context, and the second argument is the array of arguments. If the context is
null
, global objects are used instead.
Such as:
The first argument is the context, followed by the sequence of arguments passed in by the instance.
Such as:
How to get
UA
?
other
What do status codes know?
Go ahead, generally sending
post
It was sent when requested
http header
The server will then return this message, indicating confirmation, and send specific parameter information
Normal return message
The request succeeds and the server creates a new resource
The server has accepted the request but has not yet processed it
The requested page has been permanently moved to the new location.
Temporary redirection.
Temporary redirection, always used
GET
Request a new
URI
.
The requested page has not been modified since the last request.
The server does not understand the format of the request, and the client should not attempt to initiate the request again with the same content.
Request is not authorized.
Access is prohibited.
Can’t find how to
URI
Matched resources.
The most common server-side errors.
The server side is temporarily unable to process the request (possibly due to overload or maintenance).
What performance optimization methods do you have?
(
To reduce the
http
Number of requests:
CSS Sprites, JS
,
CSS
Source code compression, picture size control appropriate; Web page
Gzip
.
CDN
Hosting,
data
Cache, image server.
(
) Front-end template
JS+
Data, reduced due to
HTML
The front-end saves the bandwidth waste caused by the label with variables
AJAX
Request results, each operation of local variables, no request, reduce the number of requests
(
) with
innerHTML
Instead of
DOM
Operation, reduce
DOM
Number of operations, optimization
javascript
Performance.
(
) when there are many styles to set
className
Not directly
style
.
(
Use less global variables and caching
DOM
The result of the node lookup. To reduce
IO
Read operation.
(
) Avoid using
CSS Expression
(
css
expression
)
Also known as
Dynamic properties(
Dynamic properties
)
.
(
Image preloading, style sheet at top, script at bottom
Add a time stamp.
What is graceful degradation and progressive enhancement?
Graceful downgrade:
The site works in all modern browsers, and if the user is using an older browser, the code checks to make sure they work. Due to the
IE
Unique box model layout issues for different versions
IE
the
hack
Practiced elegance downgrades
.
Add candidates for browsers that can’t support functionality that degrades the experience in some way on older browsers but doesn’t break completely.
Incremental enhancements: Start with basic features supported by all browsers and gradually add features that are supported only by newer browsers
Add additional styling and functionality to a page that is not harmful to the base browser. They are automatically rendered and functional when supported by the browser.
What common operations cause memory leaks?
A memory leak is any object that persists after you no longer own or need it.
The garbage collector periodically scans objects and counts the number of other objects that refer to each object. If the number of references to an object is
(no other object has referenced the object before), or the only reference to the object is circular, the object’s memory is reclaimed.
Using a string instead of a function as the first argument to the.
Closures, console logs, loops (a loop is created when two objects refer to and retain each other).
The difference between thread and process
A program has at least one process
A process has at least one thread.
The scale of thread partition is smaller than that of process, which makes the concurrency of multithreaded program high.
In addition, the process has an independent memory unit during execution, while multiple threads share the memory, thus greatly improving the efficiency of the program.
Threads are different from processes in their execution. Each independent thread has an entry point for program execution, a sequential execution sequence, and an exit point for the program. However, threads cannot execute independently and must depend on the application, which provides multiple thread execution control.
From a logical point of view, the meaning of multithreading is that multiple parts of an application can be executed simultaneously. However, the operating system does not treat multiple threads as multiple independent applications to achieve process scheduling and management and resource allocation. This is an important difference between a process and a thread
.
If you want to learn front-end development, you can add groups:
To learn!