1. Framework and components
Design and implementation of UI frameworks such as bootstrap
Scalable layout: grid grid layout
Basic UI styles: element reset, buttons, images, menus, forms
Component UI styles: Button Groups, Font Icons, Dropdown Menus, Input Box Groups, Navigation Groups, Breadcrumbs, Pagination, Labels, Carousels, Popovers, Lists, Multimedia, Alerts
Responsive layout: layout, structure, styling, media, javascript responsive
Third-party plugins: plugin management
jQuery, zepto usage principle and plug-in development
Modular encapsulation that supports amd, cmd, and global variables
$.fn.method = function(){}
Mvc/mvvm framework principle design, vue/angular/avalon, etc.
Directive design: html, text, class, html, attr, repeat, ref, extensible
Filter design: bool, upperCase, lowerCase, scalable
Expression design: if-else and other implementations
Viewmodel structure design: such as data, element, method mounting and scope
Data change detection: function triggering, dirty data detection, object hijacking
polymer/angular2 ideas and design ideas
import technology
Template and script introduction method
css style namespace isolation
Simple reuse of third-party libraries
The principle and use of reactjs
virtual dom one-way data binding
js execution syntax
UI is controlled by state
commonJS/AMD/CMD
module import
module definition
Module ID
UMD solves the problem of compatibility of different specifications, such as webpack packaging
Module lazy execution (CMD) and pre-execution (AMD)
LoadJs modular loading principle and implementation
Create a script tag, you need to map the id to the resource url
onload load module queue judgment
Triggered after all loading is complete
Load failure problem optimization
requirejs、modjs、seajs
The principle and implementation of polyfill and shim
Polyfills provide features that developers want natively supported by browsers
shim introduces new APIs into the old environment and implements them only by means of the existing ones in the old environment
virtual Dom、Incremental DOM
1. Use the js object tree to represent the dom tree structure, and build the dom tree according to the object tree
2. When the state changes, rebuild the object, compare it with the old object, and record the difference between the two object trees
3. Apply the object tree diff to the dom
Summary: js object simulation dom (elem.js), virtual dom diff algorithm (diff.js), differential rendering dom (patch.js)
incremental dom scans the old object tree as state changes apply the differences directly to the dom
shadow dom
Isolate the external environment for encapsulating components: structure, style, behavior
Implementation form: new label, class class attribute + build compilation
webwork与service Worker
webwork and main thread mechanism, on/post
serviceworker can act as a browser request proxy
Application scenarios
ES6 to ES5, Babel and ES6 development specification system
ES6 encoding specification full
ES6 compatibility under babel
ES6 compatibility and performance under node
ES6 New Features: Look at Coding Specifications
aurelia ES6 front-end framework
Isomorphic JavaScript
isomorphism principle
Isomorphic scheme Rendr
nodejs: server
hapi: application service
backbone.js: background mvc
requirejs: module loading
jquery: dom processing
Reactjs isomorphism: React + Flux + Koa
two-way data binding
Function trigger: vuejs
Dirty data detection: angular
object hijacking:avalon
How browserify works
1. Start analyzing the require function call from the entry module
2. Generate AST based on dependencies
3. Find the module name of each module according to the AST
4. Get the dependencies of each module and generate a dependency dictionary
5. Wrap each module (pass in the dependency dictionary and export and require functions) to generate the executed js
performance timing
performance timing api
performance timing process
performance timing
performanceTrace library
Component UI and js component normalization
Component Coding Specifications
Component Directory Specification: Component Directory and Common Directory
Component Build Specification: Build Environment Support
Component modular management: spm, bowserify
Component Reusability Management
Third-party component access cost
immutable JavaScript
Principle and use of generator and promise
2. Building an Ecosystem
grunt/gulp development environment task writing
File processing plugins: html, scss, js, image, font, others
Optimized plugins: Sprite, image compression, iconfont construction
Publish replacement plugin
Packaging and zipping plug-ins: automatic analysis of components
Whitelist configuration
Writing custom plugins
npm, jspm, bower package management tools
r.js, browserify, webpack, webpack 2, Rollup packaging tools use
Principle: Dependency packaging of files according to dependency configuration files
webpack supports more canonical packaging, AMD, Commonjs
webpack+babel/reactjs+reflux
fis3 build and plug-in development, build environment, fis3 build offline package
web Component：rosetta-org、x-view、Q、riot、nova
brunch build tool
3. Development skills and debugging
Fiddler plus willow basic combination debugging
Common Configuration and Analysis
Combined with browser debugging
werien, vorlonjs remote debugging, chrome inspect
mockjs, FMS (Front Mock Server) simulation debugging using and cgi automatic debugging
macha/phantomjs/casperjs/karma test automation tasks use
Automated UI Testing, Dolphin
node-supervior、node-inspector、karma
Development and release system process
Sublime Efficient Plugin
emmet tool usage, sublimelinter, babel snippets, sublimeLint, SassBeautify, emmet quick edit, jsxlint, SideBarEnhancements, SnippetsMaker, SublimeCodeIntel, css snippets, ColorPicker, html/css/js Pretty, SpinnetMacker, DocBlockr, MultiEditUtils, javascript & node spinnet, JavaScript & NodeJS Snippets, jsLint, cssLint
code automation inspection fecs
Fourth, html, css and refactoring
jpeg, webp, apng, bpg images
Coding principle
Features and advantages and disadvantages
Applicable scene
The principle of iconfont usage and implementation
Automatic packaging build method
iconfont compatibility writing
fonthello, fontawesome, icomoon.io, iconfont.cn online tools
page responsive design
layout layout responsive
html structure responsive
css style responsive
imageMediaResponsive
javascript responsive
media query and platform judgment
css reset
reset
nomalize
neat
Common syntax and usage of sass/compass/less/postcss
Common grammar functions
Componentized UI design management
Build tool implementation
Sprite image automatic synthesis
iconfont automatic access, etc.
Understanding media query and common page sizes
Media Type Import and Media Feature Import
device-width adaptation
retina screen adaptation
em,rem principle and implementation
rem calculation: width*retina/10, which is equivalent to a screen width of 10rem
Fonts still use px in rem case
code4ui, code4app, first page, maka, etc.
Front-end dom operation even if the front-end page is refreshed
Generate component config configuration according to dom operation and save it to db
Use r.js or webpack to pack according to the config configuration
Publish the output file after packaging
css3 animation
transform
animation
transiction
3D acceleration and animation acceleration
Animation library
Easing function quick reference table: http://www.xuanfengge.com/easeing/easeing/
Ceaser： http://xuanfengge.com/easeing/ceaser/
cubic-bezier：http://cubic-bezier.com/
css grid layout
susy
Responsive Grid System
Fluid 960 Grid(adaptjs)
Simple Grid
Search Engines and Front-End SEO
tdk optimization
page content optimization
Unique H1 heading
img set alt attribute
nofollow
url optimization
unified link
301 jump
canonical
robot optimization
robots.txt
meta robots
sitemap
SEO tools
Various webmaster tools, etc.
Browser cache type, resources, webSQL, indexDB, localstorage, cookies, app cache, cache storage
store.js, cookie.js
UI framework
bootstrap、jqwidgets、semantic ui、amaze ui
WeChat Q ui: frozenui, weui, blend ui
extjs, echart chart ui
Five, native/hybrid/desktop development
ionic mobile development solution
run architecture
hybrid development
cordova interaction
Offline package update
performance bottleneck
nativescript mobile development solution
React Native mobile development solution
Running architecture: js engine
Performance bugs and memory leaks
update mechanism
scenes to be used
android/ios native development and framework
java
oc、swift
Web interacts with native
screen rotation
shake
Video, take photo, select local image
call, text
battery power
Geographical location
date selection
Enable hardware acceleration
Desktop application development
nodewebkit
atom-shell (later renamed electron)
NetEase Hex
pomelo (game server framework)
react desktop
appjs:appjs.com
6. Front-end/H5 optimization
yslow、pagespeed
Mobile web performance optimization
The principle of "saving traffic" in mobile browsers
Incremental update principle and precautions
locally stored apps
Load optimization
Image optimization
Single page and routing implementation
Case Study of Famous Sites in the Industry
7. Full stack/full-end development
Express/node club + mongodb, thinkjs and other frameworks
node.js straight out
Live web development, meteor/express.io
MEAN(mongodb/express/angular/nodejs)
http and http2 protocol, bigpipe, pipeline
Offline cache, cookies, localstorage, indexdb
cdn and dns
Dynamic Domain Name Acceleration
CDN principle and CDN combo
8. Research experiments
WebAssembly、webTRC、typescript
Front-end framework for material design specification
Interactive animation library
AMP-HTML specification
Using restricted HTML and caching techniques to improve the performance of static content on the mobile web
Add custom elements in place of disabled elements: amp-audio, amp-img, amp-video, etc.
9. Data Analysis and Monitoring
badjs data reporting
There are two ways to catch errors: onerror and try-catch. Sampling report, first onerror to count syntax errors, if it is script error, then use tryjs.
Background statistical methods, different business access systems, sampling statistics
onerror: can capture syntax errors and runtime errors; can get error information, stack, error file, line number, column number; js script errors executed on the current page will be captured; cross-domain resources require special header support.
try-catch: cannot catch syntax errors, only runtime errors; you can get error information, stack, error file, line number, column number; you need to use tools to add function blocks and file blocks to try, catch, which can be found in This stage enters more static information.
Click the heat map clickHeat, heatMap
js loading failure optimization scheme
Failure retransmission mechanism
Load the source nameserver file
https anti-hijacking
Baidu alog data reporting
10. Other soft skills
axure prototype design
xmind brain map management
Efficiency management
can i use、github
Knowledge management/summary sharing
Product Thinking and Skills
11. Front-end technology website
technical community
w3c tech、w3c plus、w3 help
div.io 、 nodeParty
Rare earth nuggets, front-end early reading classes
alloyteam, html5 base
W3 help
Industry Conference
segmentfault meeting
Deep js, Hang js
GMIC (Global Mobile Internet Conference)
D2、webrebuild
infoQ content, Qcon, velocity