<> front end — Every day 5 Pavement test questions ( twelve )

Progress every day 1% Not much Just 1%

<> one ,CSS3 What are the 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 Set the size of the background picture background-origin
Sets the origin of the background picture background-clip Set the clipping area of the background picture , with ”,” Multiple backgrounds can be set for separation , For adaptive layout
6. Gradual change :linear-gradient,radial-gradient 7. transition :transition, Can realize animation 8. Custom animation animate
@keyfrom 9. stay CSS3 The only pseudo element introduced in is ::selection. 10. Media query , Multi column layout @media screen and (
width:800px){ … } 11. border-image 12.2D transformation :transform:translate(x,y) rotate(x,y)
skew(x,y) scale(x,y) 13. 3D transformation 14 Font Icon font-face 15 Elastic layout flex
<> two ,CSS3 What are the new pseudo classes ?

:first-child selector Matches the first child element in the parent element

:last-child selector Matches the last selector in the parent element

:nth-child(number|odd|even| multiple ) Which element odd Represents an odd number ,even Represents an even number ,2n:2 Multiple of , 4n:4 Multiple of

:checked The radio box or check box is selected


stay Web In the form , Some form elements ( Such as input box , Password box , Check boxes, etc ) yes “ available ” and “ Not available ” this 2 Kind of state . By default , These form elements are available . stay CSS3 in , We can use :enabled Selector and :disabled The status of the form elements can be set separately from the unavailable status of the form elements CSS style .

<> three ,CSS3 Animation and JS What are the main differences in animation ?

<> Functional coverage ,JS than CSS3 large

① Defines the of the animation process @keyframes Recursive definitions are not supported , If there are many similar animation processes , If multiple parameters need to be adjusted to generate , There will be a lot of redundancy ( such as jQuery
Mobile Animation scheme for ), and JS Naturally, multiple different animation processes can be realized with a set of functions

② On time scale ,@keyframes Coarse animation granularity , and JS The animation granularity control can be very fine

③ CSS3 Very few time functions are supported in animation , Not flexible enough

④ With existing interfaces ,CSS3 Animation cannot support more than two state transitions

<> realization / Reconstruction is difficult ,CSS3 than JS Simpler , Fixed performance tuning direction

<> For low version browsers with poor frame rate ,CSS3 Natural degradation can be achieved , and JS You need to write additional code

<>CSS Animation has natural event support (TransitionEnd,AnimationEnd, But they all need to be prefixed for the browser ),JS You need to write your own events

<>CSS3 Compatibility issues , and JS Most of the time, there is no compatibility problem

<> four , use css Draw a triangle , circular , ellipse ?

css Draw a circle

css Draw a triangle

css Draw an ellipse

<> five , What is? Web Worker? Why do we need it

View the following code ( The simulation executes heavy code millions of times ):
function test(){ for(i=0;i< 10000000000 ; i ++){ x = x + i; } }
* If the above code is in
HTML Click the button to execute , This execution is synchronous , Namely , The browser must wait until this is done before it can do anything else . Because this operation takes a long time , Then this operation will cause the browser to freeze and not respond , In addition, abnormal information will appear on the screen .
* If you can move this heavy code to Javascript In the file , It runs asynchronously , Can solve this problem . This is it. web worker Role of .Web
Worker For asynchronous execution JavaScript file , Improve browser agility .