hxy1210面试

1、代码优化？

精简代码是指清除或者简化页面中的代码，从而达到降低页面体积、提高页面的用户体验及搜索引擎优化性的目的。
　　
精简代码又分五个小步骤：
1.清理垃圾代码;
2.html标签转换;
3.css优化;
4js优化以及表格优化。

1.1垃圾代码是指那些在删除的情况下也不会影响页面正常显示的非必要代码。不要小看这些代码，他占据了很大的空间，不仅影响性能还影响搜索引擎的计算时间，所以代码最好是手写，如果用frontpage，word，dreamweaver，等工具写的话，产生的垃圾代码会非常多，所以手动清理掉。 　　
1.2 html标签转换，主要是指使用短标签替换在网页中实现同样效果的长标签。例如与，两周都是对字体加粗，但是比多出五个字符，如果页面很多的话，就会产生很多冗余代码。 　　
1.3 css优化。css优化主要是改变css的调用方式，以及避免使用css为重要内容定义样式。 　　使用div+css方式制作页面，一方面防止垃圾代码，另一方面可以减少重复代码。这种方式对搜索引擎非常友好。 　　
1.4 js优化。js对搜素引擎极不友好。目前搜索引擎不能解析javascript生成的页面或者内容。所以重要的内容不能用js脚本生成; 　　
1.5表格优化，传统的页面基本都是用table。但是这种方式对搜索引擎非常不友好，所以不建议用table

2、vue代码混淆？

打包后的代码段：app.js
找到文件夹 build/webpack.pro.conf.js
在UglifyJsPlugin 插件中39行加入两行代码
drop_console: true,
pure_funcs: [‘console.log’]

3、js.1.0版本，用户显示2.0怎么处理？

4、客户端？

5、build怎么配置？

build.xml配置参数
构建文件默认叫build.xml，其有很多配置参数。

project：
每个构建文件都有一个project标签，有以下属性：

• default：表示默认的运行目标，这个属性是必须的。
• basedir：表示项目的基准目录。
• name：表示项目名。
• description：表示项目的描述。
  property：
  类似于常量，可以供给build.xml中的其他标签使用。有两个特点：
• 大小写敏感
• 不可改变，谁先设定，之后的都不能改变。
  target：
  任务，一个project标签下有一个或多个target标签，代表任务，任务间可以存在依赖关系。有如下属性：
• name：用于标识，这个是必须的
• depends：用来指定所依赖的任务。
  等等·。。

6、webpack插件有哪些？

1. extract-text-webpack-plugin
   webpack默认会将css当做一个模块打包到一个chunk中，extract-text-webpack-plugin的作用就是将css提取成独立的css文件
   首先安装和引入：
   const ExtractTextPlugin = require(‘extract-text-webpack-plugin’);
   注册：

new ExtractTextPlugin({
    filename: 'css/[name].css',
})

注册之后，还要在css的loader中使用：

{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
        use: ['css-loader','postcss-loader','less-loader'],
        fallback: 'vue-style-loader',  #使用vue时要用这个配置
    })
},

ExtractTextPlugin.extract参数解释：

use：指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
fallback：编译后用什么loader来提取css文件
publicfile：用来覆盖项目路径,生成该css文件的文件路径
该插件的最新版最高支持webpack3，如果需要支持webpack4，这样安装。
yarn add extract-text-webpack-plugin@next

2. html-webpack-plugin
   这个插件很重要，作用一是创建HTML页面文件到你的输出目录，作用二是将webpack打包后的chunk自动引入到这个HTML中

首先安装和引入：

const HtmlPlugin = require('html-webpack-plugin')

如果是单页面应用，用法很简单了：

new HtmlPlugin({
    filename: 'index.html',
    template: 'pages/index.html'
}

template 是模板文件的地址，filename 是根据模板文件生成的html的文件名

如果是多个html页面的话，就需要多次实例化HtmlPlugin。比如现在有index.html和login.html两个页面：

{
    entry: {
        index: './src/index.js',
        login: './src/login.js'
    },
    plugins: [
        new HtmlPlugin({
            filename: 'index.html',
            template: 'pages/index.html',
            excludeChunks: ['login'],
            chunksSortMode: 'dependency'
        },
        new HtmlPlugin({
            filename: 'login.html',
            template: 'pages/login.html',
            excludeChunks: ['index'],
            chunksSortMode: 'dependency'
        }
    ]
}

需要着重关注两个参数：excludeChunks和chunksSortMode

前面说了，该插件的作用二是将webpack打包后的chunk自动引入到生成的html中。上面的配置有两个入口文件，所以打包后会有index和login两个chunk，而在生成的两个html页面中都会引入这两个chunk。事实上一个html文件中只需要引入相应的chunk就够了，比如index.html只需要引入index的chunk。

excludeChunks就是解决上面问题的。其作用是指定生成的页面中不引入某个chunk，当然了还有一个chunks参数表示指定引入某个chunk。## 标题

多页面中一般会提取公共部分的chunk，这个时候一个html页面会引入多个chunk，而这些chunk之间是有依赖关系的。即必须按照顺序用script标签引入。chunksSortMode是用来指定这种顺序的排序规则。dependency是指按照依赖关系排序。

7、支付第三方平台遇到的问题？

8、父子传参？

9、手机不同版本怎么判断？

10、css预加载？

11、vue怎么套用原生？

12、v-show和v-if？

13、http缓存和cookie是一个东西么？

http缓存：服务端缓存。当服务器接收到请求时，发你请求的内容没有变化，就直接把上次请求时缓存的数据回发给请求者。
cookie：客户端缓存。是将一些数据保存在客户端，作为缓存。