每日3+3前端面试题（2020.12.18）

最新推荐文章于 2023-09-07 20:56:33 发布

澜漾

最新推荐文章于 2023-09-07 20:56:33 发布

阅读量597

点赞数

分类专栏：每天一组面试题

本文链接：https://blog.csdn.net/weixin_44601948/article/details/111356144

版权

每天一组同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

面试题

6 篇文章 0 订阅

订阅专栏

每日3+3

HTML
- 1.请实现一个网站加载进度条
- 2.怎样禁用页面中的右键、打印、另存为、复制等功能
CSS
- 使用css画一个饼图的效果
JS
- 1.ajax请求地址只支持http/https吗？能做到让它支持rtmp://等其它自定义协议吗？
- 2.写一个方法实现promise失败后自动重试
Vue
- 用vue后怎么针对搜索引擎做SEO优化
网络
- 常见的HTTP状态码
NodeJs
- 你了解Consul吗？说说它的运用场景有哪些

HTML

1.请实现一个网站加载进度条

使用W3C提供的DOMContentLoaded事件监听

window.addEventListener('load',function(){
    console.log(2)
})
window.addEventListener('DOMContentLoaded',function(){
    console.log(1)
})

兼容IE

function IEContentLoaded(fn){
    var done=false,document=window.document;
    //只执行一次用户的回调函数init
    var init=function(){
        if(!done){
            done=true;
            fn();
        }
    }
    (function(){
        try{
            //DOM Tree 未创建完之前调用doScroll会抛出错误
            //doScroll是一个伟大的hack
            document.documentElement.doScroll('left');
        }catch(err){
            //延时再执行
            setTimeout(argument.callee, 1);
            return;
        }
        //没有错误表示DOM树创建完毕，执行用户回调
        init();
    })();
    //监听document的加载状态
    document.onreadystatechange=function(){
        //如果用户是在DOMReady之后调用的函数立即执行用户回调
        if(document.readyState==='complete'){
            document.onreadystatechange=null;
            init();
        }
    }
}

关键是设置一个数组, 当domReady这个时刻没有到时,先将回调放到数组里; 然后是各种检测domReady的方法(如DOMContentLoaded, onreadystatechange, doScroll hack, document.readyState轮询 ), 一旦到了,就执行这个数组所有回调, 并且以后用户再进入这个方法, 就不放数组,直接执行

2.怎样禁用页面中的右键、打印、另存为、复制等功能

<body oncontextmenu=self.event.returnValue=false onselectstart="return false">
    45
</body>

CSS

使用css画一个饼图的效果

.colorWheel {
    position: relative;
    width: 12rem;
    height: 12rem;
    margin-left: 50px;
    background: linear-gradient(60deg, #93f 63.4%, transparent 63.4%),
     linear-gradient(-60deg, #3f9 63.4%, transparent 63.4%) 100% 0, linear-gradient(-60deg, transparent 36.6%, #f63 36.6%) 0 100%, 
     linear-gradient(60deg, transparent 36.6%, #69c 36.6%, #69c) 100% 100%, #ff9 linear-gradient(#39f, #39f) 50% 0;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    border-radius: 50%;
}

.piece {
    position: absolute;
    left: 8%;
    top: -2.6%;
    width: 100%;
    height: 100%;
    background: linear-gradient(-60deg, #3f9 63.4%, transparent 63.4%) 100% 0;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    border-radius: 50%;
}

<div class="colorWheel">
     <div class="piece"></div>
 </div>

JS

1.ajax请求地址只支持http/https吗？能做到让它支持rtmp://等其它自定义协议吗？

ajax只支持http/https
可以通过自定义http头来间接支持自定义协议

2.写一个方法实现promise失败后自动重试

let retry = (fnc, limit = 10) => {
    /*
     @ fn : 要执行的函数
     @limitt :	失败重试的次数
    */
    return new Promise((reslove, reject) => {
        let __num = 0
        let __fn = () => {
            fnc().then(res => {
                reslove(res)
            }).catch(e => {
                __num < limit ? __fn() : reject(e)
                __num++
            })
        }
        __fn()
    })
}


var Count = 0
let getUser = () => {
    return new Promise((res, rej) => {
        if (Count >= 20) {
            res({
                msg: "成功~"
            })
        } else {
            rej(false)
        }
        Count++
    })
}

retry(getUser).then(res => {
    console.log(res)
}).catch(e => {
    console.log(e)
})

Vue

用vue后怎么针对搜索引擎做SEO优化

方案1：
先安装 prerender-spa-plugin 包
针对每个页面对他们的meta-info分别设置：安装 vue-meta-info 包

vue.config.js

const PrerenderSPAPlugin = require("prerender-spa-plugin");
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const webpack = require("webpack");
const path = require("path");

module.exports = {
  publicPath: "./",
  productionSourceMap: false,
  chainWebpack(config) {
    config.optimization.minimize(true);
    config.externals({
      vue: "Vue",
      "vue-router": "VueRouter",
      axios: "axios",
      "element-ui": "ELEMENT",
      swiper: "swiper"
    });
  },
  configureWebpack: config => {
    if (process.env.NODE_ENV !== "production") return;
    return {
      plugins: [
        new webpack.optimize.MinChunkSizePlugin({
          minChunkSize: 10000 // 通过合并小于 minChunkSize 大小的 chunk，将 chunk 体积保持在指定大小限制以上
        }),
        new PrerenderSPAPlugin({
          // 生成文件的路径，也可以与webpakc打包的一致。
          // 下面这句话非常重要！！！
          // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
          staticDir: path.join(__dirname, "dist"),
          // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
          routes: [
            "/",
            "/product",
            "/serve",
            "/about",
            "/news"
          ],
          // 这个很重要，如果没有配置这段，也不会进行预编译
          renderer: new Renderer({
            inject: {
              foo: "bar"
            },
            headless: false,
            // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
            renderAfterDocumentEvent: "render-event"
          })
        })
      ]
    };
  }
};

mian.js

import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
new Vue({
  router,
  store,
  render: h => h(App),
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

在需要的页面使用

export default {
  metaInfo:{
    title: 'message',
    meta: [
      {
        name: 'description',
        content: '这是Message页面',
      },
      {
        name: 'keywords',
        content: 'message'
      }
    ]
  },
  data(){
    return {
    }
  },
}

路由需要是history模式才有效，注意使用history模式需要后端配合进行配置，否则跳转页面之后刷新，界面会报404

const router = new VueRouter({
  mode:'history',
  routes
});

方案2 ：
在页面进入的时候把meta值写入到Dom中

网络

常见的HTTP状态码

2xx (成功)表示成功处理了请求的状态代码
200 (成功) 服务器已成功处理了请求。通常。

3xx (重定向) 表示要完成请求，需要进一步操作。通常，这些状态代码用来重定向。
304 (未修改) 自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。

4xx(请求错误) 这些状态代码表示请求可能出错，妨碍了服务器的处理
1:400 (错误请求) 服务器不理解请求的语法。
2:403 (禁止) 服务器拒绝请求。
3:404 (未找到) 服务器找不到请求的网页。

5xx(服务器错误)这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错
500 (服务器内部错误) 服务器遇到错误，无法完成请求。
501 (尚未实施) 服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回此代码。
502 (错误网关) 服务器作为网关或代理，从上游服务器收到无效响应。
503 (服务不可用) 服务器目前无法使用(由于超载或停机维护)。通常，这只是暂时状态。
504 (网关超时) 服务器作为网关或代理，但是没有及时从上游服务器收到请求。
505 (HTTP 版本不受支持) 服务器不支持请求中所用的 HTTP 协议版本。
重点：200,304,403，404,500

NodeJs

你了解Consul吗？说说它的运用场景有哪些

Consul 是一种服务网格的解决方案，
Consul 其实就是一个分布式的服务管理平台，Consul 本身不具备网关的能力，所以，在一般的业务系统中，如果要应用 Consul ，通常的做法是在 Consul 的 server 节点上安装一个 nginx，在 Consul 的服务注册完成后，生成 nginx 的配置文件并重新加载它；此时，Consul 看上去好像是通过 nginx 具有了网关的能力，实际上，他们直接毫无关系；Consul 生成的 nginx 配置文件和我们手写的 nginx 配置文件没有太多的不同，都是一样的，其实就是把手写 nginx 这种体力活给自动化了。

了解更多