web前端總結面試問題（理論）

一個頁面從輸入url到頁面顯示加載完成，這個過程發生了什麼？

1.瀏覽器根據請求的URL交給DNS域名解析，找到真實的IP，向服務器發起請求。

2.服務器交給後臺處理完成後返回數據，瀏覽器接收文件（html，css，js圖像等）、

3.瀏覽器對加載到的資源進行語法解析，創建對應的內部數據結構（如html，的dom）

4.載入解析到的資源文件，渲染頁面完成。

 

虛擬dom與實體dom的區別：

1虛擬DOM不會進行排版與重繪操做

2虛擬DOM進行頻繁修改，而後一次性比較並修改真實DOM中須要改的部分（注意！），最後並在真實DOM中進行排版與重繪，減小過多DOM節點排版與重繪損耗

3真實DOM頻繁排版與重繪的效率是至關低的

4虛擬DOM有效下降大面積（真實DOM節點）的重繪與排版，由於最終與真實DOM比較差別，能夠只渲染局部（同2）

一切爲了減弱頻繁的大面積重繪引起的性能問題，不一樣框架不必定須要虛擬DOM，關鍵看框架是否頻繁會引起大面積的DOM操做

 

DMO加載過程：

網頁文檔加載都是按順序執行的。通常瀏覽器渲染操做順序大體是一下幾個步驟：

1.解析HTML結構

2.加載外部腳本和樣式表文件

3.解析並執行腳本代碼

4.構造HTML DOM模型

5.加載圖片等外部文件

6.頁面加載完畢

 

ajax和jsonp跨域原理

1.建立XmlHttpRequest對象，也就是建立一個異步調用對象。

2.建立一個新的HTTP請求，並指定該http請求的方法，url及認證信息。

3.設置響應http請求狀態變化的函數。

4.發送http請求。

5.獲取異步調用返回的數據。

6.使用javascript和dom實現局部刷新。

 

jsonp跨域原理

動態建立了一個全局方法，並動態生成script標籤請求數據，在請求回來的數據中執行請求是動態生成的js方法，傳遞參數是請求的數據，生成了假象的ajax。

 

gulp使用

var gulp = require('gulp');
var rimraf = require('gulp-rimraf');
var del = require('del');

// 清除開發時構建目錄
gulp.task('clean', function () {
  return del(['build']);
});

// 清理髮布時構建目錄
gulp.task('clean-dist', function () {
  return del(['dist']);
});


// 清理髮布時構建目錄(帶有aot預編譯)
gulp.task('clean-aot', function () {
  return del(['dist', 'compiled']);
});
// 編譯sass(release)
gulp.task('sass-dist', function () {
  return gulp.src('src/themes/default/scss/default.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(cleanCss())
    .pipe(md5(20))
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(gulp.dest(config.build.themes + '/css'))
})
gulp.task('watch-sass', function () {
  var watcher = gulp.watch('./src/themes/**/*.scss', ['sass-build']);

  watcher.on('change', function (event) {
    gutil.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
  })
});

　　webpack代碼

entry 入口
output 輸入路徑
loads 加載器
plugs 插件
又問 用過什麼！看你水平了。 固然是說你用的，下面是代碼，回憶一下！

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.common');
var helpers = require('../helpers.js');

const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
const HOST = process.env.HOST || 'localhost';
const PORT = process.env.PORT || 3000;
const PUBLIC = process.env.PUBLIC || undefined;
const HMR = helpers.hasProcessFlag('hot');
const METADATA = webpackMerge(commonConfig({
  env: ENV
}).metadata, {
  host: HOST,
  port: PORT,
  public: PUBLIC,
  ENV: ENV,
  HMR: HMR
});

module.exports = function (env) {
  return webpackMerge(commonConfig({
    env: ENV
  }), {
    devtool: 'cheap-module-eval-source-map',

    output: {
      path: helpers.root('build'),
      filename: 'scripts/[name].bundle.js',
      chunkFilename: 'scripts/[id].chunk.js'
    },

    devServer: {
      historyApiFallback: true,
      stats: 'minimal'
    },

    node: {
      global: true,
      crypto: 'empty',
      process: true,
      module: false,
      clearImmediate: false,
      setImmediate: false
    }
  })
};



var helpers = require('../helpers');
var webpack = require('webpack');
var path = require('path');

module.exports = {
    devtool: 'inline-source-map',

    resolve: {
        extensions: ['.ts', '.js', '.json']
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: 'tslint-loader',
                exclude: [helpers.root('node_modules')]
            },
            {
                test: /\.ts$/,
                loaders: [
                    'ts-loader',
                    'angular2-router-loader',
                    'angular2-template-loader'
                ],
            },
            {
                test: /\.html$/,
                loader: 'raw-loader'
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.ts/,
                include: [helpers.root('src')],
                loader: 'sourcemap-istanbul-instrumenter-loader?force-sourcemap=true',
                exclude: [/\.spec\.ts/, /\.e2e\.ts/, /node_modules/],
                enforce: 'post'
            }
        ]
    },

    stats: {
        colors: true,
        reasons: true
    },
    watch: true,
    plugins: [
        new webpack.LoaderOptionsPlugin({
            debug: true
        }),
        new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.join(__dirname))
    ]
};

　　vue路由跳轉方式？

①直接修改地址欄中的路由地址

②經過router-link實現跳轉

<router-link to="/myRegister">註冊</router-link>

③經過js的編程的方式

jumpToLogin: function () {
this.$router.push('/myLogin');
}

什麼是閉包

 

function wrapper(){
var a = 1
function inner(){
a+=1
}
return inner
}
這就是閉包

瞭解數據解構嗎？

隊列(先進先出，請參考電影票是否是先買票的先走) 映射到數組就是 push() shift()
棧：後進先出，漢諾塔上面的盤子移走才能移動下面的盤子。映射到數組就是 push() pop()
樹(二叉樹/滿二叉樹/徹底二叉樹)

堆(最大堆/最小堆)

 

性能優化手段？

• 後臺設置gzip壓縮
• 後臺設置cache-control 頭指定過時時間(更詳盡能夠看)
• 圖片壓縮合並(精靈圖這是好久之前的了)
• js壓縮打包，css壓縮打包，html壓縮打包(webpack解決了這個問題)
• dns預解析，減小同一域名解析時間
• 圖片懶加載，根據滾動距離高度來判斷是否進行加載圖片
• 指定img的寬高，避免網速波動形成頁面重排(騰地)
• 異步加載組件vue

作一個css動畫 從0到200px 速度線性

div{width:100px;animation:move 5s linear;
}
@keyframes move{
0%{width:100px;}
50%{width:150px;}
100%{width:200px;}
}

倒計時60秒

vue路由守衛

路由守衛爲：

全局守衛：beforeEach

後置守衛：afterEach

全局解析守衛：beforeResolve

路由獨享守衛：beforeEnter

組內路由守衛：beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave

 

vue路由原理

更新視圖但不從新請求頁面，是前端路由原理的核心之一，目前在瀏覽器環境中這一功能的實現主要有2種方式：

• 利用URL中的hash("#");
• 利用History interface在HTML5中新增的方法;

vue-router是Vue.js框架的路由插件，它是經過mode這一參數控制路由的實現模式的：

const router=new VueRouter({ mode:'history', routes:[...] })

1. 在初始化對應的history以前，會對mode作一些校驗：若瀏覽器不支持HTML5History方式(經過supportsPushState變量判斷)，則mode設爲hash;若不是在瀏覽器環境下運行，則mode設爲abstract;
2. VueRouter類中的onReady(),push()等方法只是一個代理，實際是調用的具體history對象的對應方法，在init()方法中初始化時，也是根據history對象具體的類別執行不一樣操做

 

HashHistory.push()

 

 pushState 和 replaceState ，經過這兩個 API 能夠改變 url 地址且不會發送請求。

 

前端路由是直接找到與地址匹配的一個組件或對象並將其渲染出來。改變瀏覽器地址而不向服務器發出請求有兩種方式: 

1. 在地址中加入#以欺騙瀏覽器，地址的改變是因爲正在進行頁內導航 

2. 使用H5的window.history功能，使用URL的Hash來模擬一個完整的URL。

 

未完待續>>>>>

溫故而知新~