初级前端面试总结

最新推荐文章于 2024-10-03 19:04:11 发布
原创 最新推荐文章于 2024-10-03 19:04:11 发布 · 1.3k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#面试

本文全面解析前端面试核心知识点，涵盖cookie、sessionStorage、localStorage的区别，HTTP状态码详解，请求方式对比，get与post区别，跨域问题及解决方案，keep-alive应用场景，vuex中store与$store区别，组件间数据传递技巧，JS中==与===的对比，以及ES6模板字符串用法，是前端开发者面试前必备复习资料。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

初级前端面试总结

文章目录

一、cookie、sessionStorage和localStorage的区别

答：区别

1、存储大小

  • cookie只能存储 4K的数据，每个域名一般存储量不超过20个。
  • localstorage和sessionstorage，存储大小为 5mb

2、有效期

  • cookie有效期可以自己自定义，未设置有效期是浏览器关闭后则被删除，设置有效期后则将数据存储到 硬盘中。默认不会存储到硬盘。（同一个浏览器，同一个标签页/不同的标签页 均可共享）
  • localstorage一直存储在客户端，除非用户自行删除或者清除缓存，否则一直存在。（同一个浏览器，同一个标签页/不同的标签页 均可共享）
  • sessionstorage：存储在客户端，默认关闭浏览器则自行删除。（不同浏览器，同一个标签页 均可以共享）

3、运用场景

  • cookie一般用于存储不敏感信息且使用较广（安全性较低，不建议使用）
  • sessionstorage：用于存储 一次性数据，关闭浏览器则被丢弃。
  • localstorage：一般用于登录验证，存储用户登录信息。

4、安全性、服务端通信

  • cookie安全性较低，容易被人攻击，或者串改信息。每次请求不管服务端是否需要，都会携带cookie，从而降低了传输带宽
  • sessionstorage：不用参与服务端，一直存储到客户端，接口可以直接使用，安全性较高。
  • localstorage：不用参与服务端，一直存储到客户端，接口可以直接使用，安全性较高。

5、作用域

  • cookie作用域同一个浏览器，同一个标签页/不同的标签页 均可共享
  • localstorage：同一个浏览器，同一个标签页/不同的标签页 均可共享
  • sessionstorage：不同浏览器，同一个标签页 均可以共享

6、存储位置

  • cookie：一般存储 浏览器客户端
  • localstorage：一般存储 浏览器客户端
  • sessionstorage：一般存储 浏览器客户端

7、机制不同

  • cookie：每次请求接口时，均要携带所有cookie值
  • localstorage：不参与接口机制，但是接口可以直接使用
  • essionstorage：不用参与服务端，接口可以直接使用

8、参考文献

【1】 https://blog.youkuaiyun.com/weixin_42614080/article/details/90706499

二、HTTP状态码

HTTP状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字没有分类的作用。HTTP状态码共分为5种类型。

分类分类描述
1**信息，服务器收到请求，需要请求者继续执行操作
2**成功，操作被成功接收并处理
3**重定向，需要进一步的操作以完成请求
4**客户端错误，请求包含语法错误或无法完成请求
5**服务器错误，服务器在处理请求的过程中发生了错误

HTTP状态码表（版本1） 此表含状态码英文名称

状态码状态码英文名称中文描述
1开头的状态码
100Continue继续。客户端应继续其请求
101Switching Protocols切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到HTTP的新版本协议
2开头的状态码
200OK请求成功。一般用于GET与POST请求
201Created已创建。成功请求并创建了新的资源
202Accepted已接受。已经接受请求，但未处理完成
203Non-Authoritative Information非授权信息。请求成功。但返回的meta信息不在原始的服务器，而是一个副本
204No Content无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档
205Reset Content重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域
206Partial Content部分内容。服务器成功处理了部分GET请求
3开头的状态码
300Multiple Choices多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择
301Moved Permanently永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
302Found临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
303See Other查看其它地址。与301类似。使用GET和POST请求查看
304Not Modified未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
305Use Proxy使用代理。所请求的资源必须通过代理访问
306Unused已经被废弃的HTTP状态码
307Temporary Redirect临时重定向。与302类似。使用GET请求重定向
4开头的状态码
400Bad Request客户端请求的语法错误，服务器无法理解
401Unauthorized请求要求用户的身份认证
402Payment Required保留，将来使用
403Forbidden服务器理解请求客户端的请求，但是拒绝执行此请求
404Not Found服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面
405Method Not Allowed客户端请求中的方法被禁止
406Not Acceptable服务器无法根据客户端请求的内容特性完成请求
407Proxy Authentication Required请求要求代理的身份认证，与401类似，但请求者应当使用代理进行授权
408Request Time-out服务器等待客户端发送的请求时间过长，超时
409Conflict服务器完成客户端的PUT请求是可能返回此代码，服务器处理请求时发生了冲突
410Gone客户端请求的资源已经不存在。410不同于404，如果资源以前有现在被永久删除了可使用410代码，网站设计人员可通过301代码指定资源的新位置
411Length Required服务器无法处理客户端发送的不带Content-Length的请求信息
412Precondition Failed客户端请求信息的先决条件错误
413Request Entity Too Large由于请求的实体过大，服务器无法处理，因此拒绝请求。为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则会包含一个Retry-After的响应信息
414Request-URI Too Large请求的URI过长（URI通常为网址），服务器无法处理
415Unsupported Media Type服务器无法处理请求附带的媒体格式
416Requested range not satisfiable客户端请求的范围无效
417Expectation Failed服务器无法满足Expect的请求头信息
5开头的状态码
500Internal Server Error服务器内部错误，无法完成请求
501Not Implemented服务器不支持请求的功能，无法完成请求
502Bad Gateway充当网关或代理的服务器，从远端服务器接收到了一个无效的请求
503Service Unavailable由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中
504Gateway Time-out充当网关或代理的服务器，未及时从远端服务器获取请求
505HTTP Version not supported服务器不支持请求的HTTP协议的版本，无法完成处理

参考文献

【1】 http://tools.jb51.net/table/http_status_code

三、HTTP的请求方式有哪几种

HTTP Request Method共计15种

序号方法描述
1get请求指定的页面信息，并返回实体主体。
2head类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头
3post向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。
4put从客户端向服务器传送的数据取代指定的文档的内容。
5delete请求服务器删除指定的页面。
6CONNECTHTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
7options允许客户端查看服务器的性能。
8TRACE回显服务器收到的请求，主要用于测试或诊断。
9PATCH实体中包含一个表，表中说明与该URI所表示的原内容的区别。
10MOVE请求服务器将指定的页面移至另一个网络地址。
11COPY请求服务器将指定的页面拷贝至另一个网络地址。
12LINK请求服务器建立链接关系。
13UNLINK断开链接关系。
14WRAPPED允许客户端发送经过封装的请求。
15Extension-mothed

注：一般情况下使用较多的为：get，post，put，delete，head请求

参考文献

【1】 http://tools.jb51.net/table/http_status_code

四、get请求和post请求的区别

1、请求头的区别

  • get：没有请求头
  • post：有请求头

2、请求参数

  • get：请求参数会显示在URL地址
  • post：请求参数通过 request body传递参数

3、安全性

  • get：参数暴露在URL地址中，安全性较低。
  • post：请求参数通过 request body传递，安全性比get高。

4、运用场景

  • get：一般运用列表查询，发送少量数据时候使用
  • post：一般运用修改 增，修、删除等操作。

5、传输大小

  • get：在HTTP规范中，没有对URL的长度和传输的数据大小进行限制。但是在实际开发过程中，对于GET，特定的浏览器和服务器对URL的长度有限制。因此，在使用GET请求时，传输数据会受到URL长度的限制。

6、其他

  • GET在浏览器回退时是无害的，而POST会再次提交请求。
  • GET产生的URL地址可以被Bookmark（标签），而POST不可以。
  • GET请求会被浏览器主动cache（缓存），而POST不会，除非手动设置。
  • GET请求只能进行url编码，而POST支持多种编码方式
  • GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
  • GET请求在URL中传送的参数是有长度限制的，而POST么有。
  • 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
  • GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
  • GET参数通过URL传递，POST放在Request body中。

参考文献

【1】https://www.cnblogs.com/logsharing/p/8448446.html

五、什么原因引起跨域的问题，如何解决的

1、产生跨域的原因

浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。

所谓的同源指的是 域名，协议，端口均相同

  • 非跨域：http://www.123.com/index.html 调用 http://www.123.com/server.php
  • 域名不同 跨域：http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）
  • 子域名不同跨域：http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）
  • 端口不同跨域：http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）
  • 协议不同：http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）

注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。

浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。

2、解决跨域办法

1、jsonp：

使用方式就不赘述了，但是要注意JSONP只支持GET请求，不支持POST请求。

<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript">  
    $.ajax({  
        url:"http://crossdomain.com/services.php",  
        dataType:'jsonp',  
        data:'',  
        jsonp:'callback',  
        success:function(result) {  
            for(var i in result) {  
                alert(i+":"+result[i]);//循环输出a:1,b:2,etc.  
            }  
        },  
        timeout:3000  
    });  
</script>

2、vue3 中vue.config.js 文件下 配置 proxyTbale

devServer: {
    open: true, //是否自动弹出浏览器页面
    host: "localhost", 
    port: '8081',
    https: false,
    hotOnly: false, 
    proxy: {
        '/api': {
            target: 'https://www.v2ex.com/api', //API服务器的地址
            changeOrigin: true, //是否跨域
            pathRewrite: {
                '^/api': ''
            }
        }
    },
}

3、vue2项目 中config 文件下 index.js 配置跨域

vue2解决跨域问题

六、keep-alive运用场景，可通过什么函数来触发 函数。

官方文档： https://cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%9C%A8%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-keep-alive

keep-alive：当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。一般运用在 tab选项卡切换，每次切换后不需要调用方法后，则可以采用 keep-alive进行存入缓存。

如果在切换页面后，值更改则需要重新调用接口，则可通过activated 和 deactivated 将会在 <keep-alive/> 树内的所有嵌套组件中触发 函数。

官方说明：

注意这个 <keep-alive/>要求被切换到的组件都有自己的名字，不论是通过组件的 name 选项还是局部/全局注册。

  • Props：

    • include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
    • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
    • max - 数字。最多可以缓存多少组件实例。

  • 用法：

    <keep-alive/>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition/>相似，<keep-alive>是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

    当组件在 <keep-alive>内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

    在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 <keep-alive/> 树内的所有嵌套组件中触发。

    主要用于保留组件状态或避免重新渲染。

    <!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>

<!-- 多个条件判断的子组件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

<!-- 和 `<transition>` 一起使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

    注意，是用在其一个直属的子组件被开关的情形。如果你在其中有 `v-for` 则不会工作。如果有上述的多个条件性的子元素， 要求同时只有一个子元素被渲染。

  • include and exclude

    2.1.0 新增

    include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：

    <!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

    匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

  • max

    2.5.0 新增

    最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

    <keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>

    <keep-alive> 不会在函数式组件中正常工作，因为它们没有缓存实例。

  • 参考：动态组件 - keep-alive

七、vuex 中的 store 和 $store 的区别

<router-link to="/login">{{ $store.state.userName }}</router-link>
<router-link to="/login">{{ store.state.userName }}</router-link>
<router-link to="/login">{{ this.store.state.userName }}</router-link>
<router-link to="/login">{{ this.$store.state.userName }}</router-link>

$store 是挂载在 Vue 实例上的（即Vue.prototype），而组件也其实是一个Vue实例，在组件中可使用 this 访问原型上的属性，template 拥有组件实例的上下文，可直接通过 {{ $store.state.userName }} 访问，等价于 script 中的 this.$store.state.userName。
至于 {{ store.state.userName }}，script 中的 data 需声明过 store 才可访问。

参考文献

【1】 https://blog.youkuaiyun.com/zeroyulong/article/details/83750708

八、父子组件、兄弟组件之间的传值方式

  • 父组件可以使用 props 把数据传给子组件。
  • 子组件可以使用 $emit 触发父组件的自定义事件。
  • 兄弟组件之间的传值：需新建一个中间组件，然后通过 e m i t ( ) 来 传 递 参 数 （ 类 似 与 子 组 件 给 父 组 件 之 间 的 传 值 方 式 ） ， 然 后 通 过 emit()来传递参数（类似与子组件给父组件之间的传值方式），然后通过 emit()来传递参数（类似与子组件给父组件之间的传值方式），然后通过on(functionName, callback)监听 兄弟组件 暴露出来的事件，通过回调函数获取兄弟组件传递出来的值

1、父组件给子组件传值，关键字：props

父组件：

<template>
  <div>
    <h1>父组件</h1>　　<!-- 引入子组件 -->
    <child :sendMsg="fatherMsg"></child>
  </div>
</template>

<script>
import child from '@/components/child'
export default {
  name: 'father',
  components: {
    child
  },
  data() {
    return {
      fatherMsg: '嗨，儿子' // 传递给子组件的值
    }
  }
}
</script>

子组件：通过props拿到父组件传递过来的值

<template>
  <div>
    <h1>子组件</h1>
    <span>获取父组件传值:{{sendMsg}}</span> 
  </div>
</template>

<script>
export default {
  name: 'child',
  data() {
    return {

    }
  },
  props: ['sendMsg'] // 拿到父组件绑定到sendMsg的值，然后在子组件下显示出来
}
</script>

2、子组件给父组件传值：通过触发事件传递值

子组件：

<template>
  <div>
    <h1>子组件</h1>
    <span>获取父组件传值:{{sendMsg}}</span><hr>
    <button @click="sendToFather">子组件给父组件传值</button>
  </div>
</template>

<script>
export default {
  name: 'child',
  data() {
    return {
      childMsg: '这是来自子组件的数据'
    }
  },
  props: ['sendMsg'],
  methods: {
    sendToFather: function() {
      this.$emit('getChildValue', this.childMsg); // 参数1 getChildValue作为中间状态，参数2 this.childMsg即为传递给父组件的数据
    }
  }
}
</script>

父组件：

<template>
  <div>
    <h1>父组件</h1>
    <!-- 引入子组件 定义一个on的方法监听子组件的状态，然后通过getChild方法获取子组件传递的数据-->
    <child :sendMsg="fatherMsg" v-on:getChildValue="getChild"></child>
    <span>这是来自子组件的数据：{{childValue}}</span>
  </div>
</template>

<script>
import child from '@/components/child'
export default {
  name: 'father',
  components: {
    child
  },
  data() {
    return {
      fatherMsg: '嗨，儿子',
      childValue: ''
    }
  },
  methods: {
    getChild: function(data) { // 此时的参数data为子组件传递的值，即this.$emit()的第二个参数
      this.childValue = data;
    }
  }
}
</script>

3、同级组件传递数据（兄弟组件）

对于同级组件传值用的较多的情况，推荐直接使用vuex进行状态管理会比较方便。

其原理是先建立一个中间事件 center.js，放在tools文件夹下，如下：

import Vue from 'vue'

export default new Vue()

center.js中我们只创建了一个新的Vue实例，以后它就承担起了组件之间通信的桥梁了，也就是中央事件总线

然后创建第一个子组件first.vue：

<template>
  <div class="first-vue-box">
    <p>this is firstChild vue</p>
    <button @click="sendMsg">发送</button>
  </div>
</template>
<script>
import bridge from '../tools/center'
export default {
  data () {
    return {}
  },
  methods: {
    sendMsg () {
      bridge.$emit('firstChildMsg', 'this is firstChild Msg')
    }
  }
}
</script>
<style lang="scss" scoped>
.first-vue-box {
  border: 1px solid blue;
}
</style>

这里先引入事件总线，通过事件总线点击按钮后将first.vue的信息通过事件firstChildMsg的形式发布出去了（我个人的理解是相当于通过事件总线，将first.vue的firstChildMsg这个事件暴露出去），用法跟子组件向父组件传参的模式一样

然后再创建第二个组件second.vue：

<template>
  <div class="second-child">
    <h4>this is second child vue</h4>
    <p>从first.vue获取同级组件传递过来的信息：{{message}}</p>
  </div>
</template>
<script>
import bridge from '../tools/center'
export default {
  data () {
    return {
      message: '默认值'
    }
  },
  mounted () {
    let _this = this
    bridge.$on('firstChildMsg', function (msg) {
      _this.message = msg
    })
  }
}
</script>

在second.vue中再引入事件总线，然后通过$on(functionName, callback)监听first.vue暴露出来的firstChildMsg事件，通过回调函数获取first.vue传递出来的值

引入两个子组件：

<template>
  <div class="detail-div">
    <h3>首页详情</h3>
    <first-child></first-child>
    <second-child></second-child>
  </div>
</template>
<script>
import firstChild from './first'
import secondChild from './second'
export default {
  data () {
    return {}
  },
  components: {
    firstChild,
    secondChild
  },
  mounted () {
    // console.log('详情页面...')
  }
}
</script>

参考文献

【1】：https://www.cnblogs.com/secretAngel/p/9705809.html

九、js 中 == 与 === 的区别？

  • == 表示相等 （值相等）
  • ===表示恒等（类型和值都要相等）

js在比较的时候如果是 == 会先做类型转换，再判断值得大小，如果是===类型和值必须都相等。

代码

结果

十、webpack打包过程

十一、 1+undefined = ？，1+null = ？

啥都不说，直接贴代码，来的实际

  <script>
   let a = 1; 
    let a1 = "1";
    let a2 = [1]; 
    let a3 = {a: 1}; 
    let b = undefined;
    let c = null;
    console.log("----------以下的 1 是number类型：-------------")
    console.log( a + undefined)
    console.log( a + null)
    console.log( a + b)
    console.log( a + c)

    console.log("----------以下的 1 是字符串类型：-------------")
    console.log( a1 + undefined)
    console.log( a1 + null)
    console.log( a1 + b)
    console.log( a1 + c)

    console.log("----------以下的 1 是数组类型：-------------")
    console.log( a2 + undefined)
    console.log( a2 + null)
    console.log( a2 + b)
    console.log( a2 + c)

    console.log("----------以下的 1 是object类型：-------------")
    console.log( a3 + undefined)
    console.log( a3 + null)
    console.log( a3 + b)
    console.log( a3 + c)
  </script>

结果集：

1+undefined与1+null结果

== 与 === 的区别

十二、es6中模板字符串一共有几种用法，分别是？

推荐一本es6语法极好电子书籍 阮一峰 - ECMAScript 6 入门

初级前端面试题最新汇总
Bald_monster的博客
11-24 5820
面试题 一、宏观 1. 自我介绍 2. 你能说一下你是如何自学前端的 好的。首先前端开发的东西是要跑在浏览器里面的，浏览器只能识别html，css，js的。所以我觉得这三块是我们入行最基础的东西，学好这些之后。然后呢，我在使用JavaScript这些老代码的时候，会有很多问题。我就又去学习了es6。就可以做出一个没有前后端交互，但是有前端效果的静态页面。比如说手写一些轮播图啊什么的。然后又去了解前后端分离，我就又去学习网络，比说说http协议什么的。就可以去做一些前后端分离的项目了。但是在做项目的时候
【初级】前端开发工程师面试100题（二）
最新发布
全栈老李的博客
04-23 1756
本题库共计包含100题，考察html，css，js，以及react，vue，webpack等基础知识掌握情况。
写给初级前端的面试经验
weixin_34383618的博客
03-15 1475
最近到了金三银四的跳槽季，很多人都会面临跳槽找工作，并且再过几个月又会到毕业季，越来越多的毕业生会面临这个问题。 同样，我们组因为业务需要（我们今年倒是还没有人员离职，感动╭(╯^╰)╮）需要进行社招，我最近看了不少简历，并且对一些小伙伴进行了电话沟通（电面），对面试找工作有一些自己浅薄的观点 因为个人认为本人的技术还是很菜的，并且工作经验也没有特别丰富，所以文章内容都是自己一些浅薄的看法观点，若...
Doctype作用，标准模式与兼容模式的区别
db1100的博客
11-25 705
<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。 标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。HTML5 ...
初级前端面试题总结（html, css, js, ajax，http）
铁锤妹妹的博客
11-30 3454
1. 什么是盒子模型？ 把所有的网页元素都看成一个盒子，它具有： content，padding，border，margin 四个属性，这就是盒子模型。 2. CSS实现垂直水平居中（列举一种） 方法1： 使用position:absolute与transform配合实现 如果不确定子元素高度，可以不使用margin-top，使用transform:translate(-50%,-50%) 方法2.：弹性布局（flex） 设置父元素的display的值为flex，然后设置align-items: cent
前端面试题汇总集合（初级）
热门推荐
shibaweijin的博客
06-29 1万+
前端面试题整理 面试 目录 $HTML， HTTP，web综合问题 1、前端需要注意哪些 SEO 2、 的 title 和 alt 有什么区别 3、 HTTP 的几种请求方法用途 4、从浏览器地址栏输入 url 到显示页面的步骤 5、如何进行网站性能优化 6、HTTP状态码及其含义 7、语义化的理解 8、介绍一下你对浏览器内核的理解 9、 html5 有哪些新特性、移除了那些元素？ 10、 HTML5 的离线储存怎么使用，工作原理能不能解释一下？ 11、浏览器是怎么对 HTML5 的离线储存资源进行管理和
初级前端面试题大全
a1783118的博客
07-08 3870
初级前端面试题大全
初级前端面试题总结（面试，10K以上，初级前端）
09-25
适合刚刚毕业的学生寻找实习，以及培训班毕业出来寻找工作的前端工程师。 以上都是本人在杭州面试下来的面试题总结，保真。目前就职于一家自研公司，目前11k+13 本人也是培训班出来的
前端初级程序员面试宝典
02-12
总结来说，前端初级程序员面试宝典包含了HTML5、CSS、JavaScript（包括ES6语法）、前端路由、WebSocket、Ajax请求、Node.js、Webpack构建工具、前端框架（jQuery、Angular、React、Vue）、移动端开发以及网络基础...
初级前端开发面试题.pdf
12-19
前端开发面试题总结 本文档总结了前端开发面试中常见的问题，涵盖了HTML、CSS、JavaScript、ES6、Vue、React、微信小程序等领域，旨在为前端开发人员提供面试准备参考。 HTML部分： 1. 兼容性问题：解决浏览器...
初级前端面试题（简化版）
obj_null的博客
11-24 805
这里我结合了朋友的经历，然后整理了一份个人觉得够用的，简化面试题（面向部分中小公司）。
前端初级面试 -- 网络连接
萧墨的博客
07-23 662
1. 建立一条TCP连接需要几个步骤，关闭一个TCP连接需要几个步骤 建立：3次握手：客户端发起连接请求；服务器接收请求并回应客户；客户端收到后回应服务器 关闭：4次握手：客户端发送请求，停止数据发送；服务器接收请求，回应客户端；客户端收到回应后，等待服务器发送最后的数据；服务器发送完最后的数据，通知客户端，等待客户端确认；客户端收到请求，发出确认；服务器收到确认，进入已关闭状态 2....
初级前端面试基础知识整理
ymumi的博客
04-23 3225
整理一些网上常见面试题。1.CSS隐藏元素的几种方法（至少说出三种）Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;Display:display 设为 none 任何对该元素直接的用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方...
初级前端面试题（更新中）
weixin_46880303的博客
05-15 2520
一、html+css 1、css 实现元素水平垂直居中 1.1绝对定位（已知宽高） width:100px; height： 100px; position: absolute; left: 50%; top: 50%; margin-left: -50px; /*宽度一半*/ margin-top: -50px;/*高度一半*/ 1.2未知高度 position: absolute; left: 50%; top: 50%; transform: translat
初级前端面试常见问题（上岸某公司）
pingguocu3的博客
10-03 1870
vue自定义指令_努力学习前端的小陈的博客-优快云博客_vue自定义指令Vue自定义组件的四种方式示例详解_vue.js_脚本之家 (jb51.net)
大三末之初级前端面试（二）
Carrie_zzz的博客
07-19 912
然后陆陆续续的去面试了好几家 总的来说没啥亮点，之后又面了好几家（大局科技，一号互联，前海誉君科技有限公司等等）第一个是一个小公司，人少就几个，面试 没有 提出啥问题就是说你看一下app然后看下公众号做一个小程序。意思就是就找你一个人来做。能做就行说一下你做需要多久！我潦草看 了一下。上后看了他们的电脑上手操作了一下。还不错。不难，但是我内心是很矛盾的，毕竟我是想找一个大公司有个大佬带着。不然这...
初级前端面试总结-3
xiaohuli_hyr的博客
05-25 1604
初级前端面试总结-3 文章目录初级前端面试总结-3面试题汇总css如何让文字居中。分辨率较大的话，如何让图片清晰居中显示。如何居中div？如何实现居中一个浮动元素？如果让绝对定位的div居中？如何水平居中一个div？如何居中一个浮动元素？如何让绝对定位的div居中用纯CSS创建一个三角形的原理是什么？清除浮动的方法？实现预加载一张图片，加载完成后显示在网页中并设定其高度为50px？htmlHTML中那些标签是 块级标签，那些是 行内标签，空标签jsjQuery获取dom元素的方式js的数据类型声明函数和异名
初中级前端面试题—完整版
qq_40588413的博客
02-11 7854
前言 从前端学习到找一份合适的工作，大大小小的面试必不可少，所以我对初级前端面试题进行了初步整理，也方便自己查阅，也希望对小伙伴们有所帮助！ HTML HTML语义化 HTML语义化就是让页面内容结构化，它有如下优点 1、易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。 2、有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。 3、方便其他设备解析，如盲人阅读器根据语义渲染网页 4...
初级前端面试题总结（持续更新....)
菜鸟前端的博客
04-22 844
一 css部分 什么是盒子模型？ 把所有的网页元素都看成一个盒子，它具有： content，padding，border，margin 四个属性，这就是盒子模型。 盒子模型有两种形式：标准盒子模型，怪异盒子模型 首先，两种模式可以利用box-sizing属性进行自行选择： 标准模式： 盒子总宽度/高度 = 内容区宽度 /高度+padding+border + margin box-sizing...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值