阅读 2740

初级走向中级前端(带答案)

最近面试了 很多1-2年的前端,网上手机了一些 问题和答案,发出来 希望能帮助到大家~

CSS篇

IOS手机浏览器字体齿轮

修改-webkit-font-smoothing属性

结果是:-webkit-font-smoothing: none: 无抗锯齿-webkit-font-smoothing: antialiased | subpixel-antialiased | default: 灰度平滑

怎么让Chrome支持小于12px 的文字?

我们的做法是:

针对谷歌浏览器内核,加webkit前缀,用transform:scale()这个属性进行缩放! p span {font-size:10px;-webkit-transform:scale(0.8);display:block;}

CSS预处理器(Sass/Less/Postcss)

CSS预处理器的原理: 是将类 CSS 语言通过 Webpack 编译 转成浏览器可读的真正 CSS。

在这层编译之上,便可以赋予 CSS 更多更强大的功能,常用功能: 嵌套 变量 循环语句 条件语句 自动前缀 单位转换 mixin复用

JS

网站js和css如何压缩?有哪些方法?

概念性知识点: 在线压缩js/css

http请求问题,HTTP请求信息由哪3部分组成?

  1. 请求方法URI协议/版本 (例如:GET/haorooms.jspHTTP/1.1)
  2. 请求头(Request Header)(例如:Accept:image/gif.image/jpeg./ Accept-Language:zh-cn Connection:Keep-Alive Host:localhost等等)
  3. 请求正文

前端性能优化问题,你是如何处理前端性能问题的?

www.haorooms.com/post/web_xn… 及 前端性能优化补充篇

写出最简单JS的去重方式 (重灾区)

  • es6的new Set()方式
let array = [0, 3, 4, 5, 3, 4, 7, 8, 2, 2, 5, 4, 6, 7, 8, 0, 2, 0, 90];
[...new Set(array)]
复制代码
  • es5的Array filter()
[1, 3, 4, 5, 1, 2, 3, 3, 4, 8, 90, 3, 0, 5, 4, 0].filter(function (elem, index, Array) {
  return index === Array.indexOf(elem);
})
复制代码

谷歌浏览器运行下面代码,并解释!

[].forEach.call($$("*"), function (a) {
  a.style.outline = "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16)
})
复制代码

运行上面代码之后,会发现HTML层都被使用不同的颜色添加了一个高亮的边框。为什么会这样呢?

  • 原理解析:
  1. $$("*") 以数组的形式返回页面所有元素
  2. .forEach 。这是一种简写,完整的写法应该是这样:Array.prototype.forEach.call(...);很显然,简写更方便。
  3. .call 是一个prototype,JavaScript函数内置的。 .call 使用它的第一个参数替换掉上面说的这个 this ,也就是你要传人的数组
  4. 因此, [].forEach.call() 是一种快速的方法访问 forEach ,并将空数组的 this 换成想要遍历的list。

如何处理缓存?如何清除缓存。

ajax随机数、ajax参数、meta中设置等。. 可以看下我写的 js清除浏览器缓存的几种方法

  • meta方法
   //不缓存
   <META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
   <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> 
   <META HTTP-EQUIV="expires" CONTENT="0">
复制代码
  • jquery ajax清除浏览器缓存
1. 用ajax请求服务器最新文件,并加上请求头If-Modified-Since和Cache-Control,如下:
    beforeSend :function(xmlHttp){ 
        xmlHttp.setRequestHeader("If-Modified-Since","0"); 
        xmlHttp.setRequestHeader("Cache-Control","no-cache");
     },
2. 直接用cache:false
3. 用随机数,随机数也是避免缓存的一种很不错的方法!
    URL 参数后加上 "?ran=" + Math.random(); //当然这里参数 ran可以任意取了
4. 用随机时间,和随机数一样。
    在 URL 参数后加上 "?timestamp=" + new Date().getTime();
复制代码

Websocket

Websocket 是一个 持久化的协议, 基于 http , 服务端可以 主动 push

  • 兼容:

FLASH Socket 长轮询: 定时发送 ajax long poll: 发送 --> 有消息时再 response

 let ws = new WebSocket(url);
 /* 收到消息回调 */
  ws.onmessage = onMessage;
  /* 连接断开回调 */
  ws.onclose = onClose;
  /* 连接成功回调 */
  ws.onopen = onOpen;
复制代码

解决跨域问题

  1. JSONP:利用<script>标签不受跨域限制的特点,缺点是只能支持 get 请求
  2. 服务端设置请求头: CORS: Access-Control-Allow-Origin:*
  3. postMessage

框架:Vue全家桶

vue-router 如何做历史返回提示?

可以查看我之前发布的文章

vue-router 如何做用户登录权限等?

实际上就是应用了vue-router提供的router.beforeEach来注册一个全局钩子 官网导航守卫介绍

vue组件通信

很多人都说不全,不知道是 不用还是不看重. 这个帖子写的很全

  1. props和$emit
  2. attrs和listeners
  3. 中央事件总线
  4. provide和inject
  5. v-model
  6. parent和children
  7. boradcast和dispatch
  8. vuex处理组件之间的数据交互

vue服务器渲染

vue性能优化

vue-router 模块的 router-link 组件。

官网详情介绍

vue-router有哪几种导航钩子?

三种:

  1. 是全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截。
  2. 组件内的钩子
  3. 单独路由独享组件

scss是什么?在vue.cli中的安装使用步骤是?有哪几大特性?css的预编译。

使用步骤:

  • 第一步:用npm 下三个loader(sass-loader、css-loader、node-sass)
  • 第二步:在build目录找到webpack.base.config.js,在那个extends属性中加一个拓展.scss
  • 第三步:还是在同一个文件,配置一个module属性
  • 第四步:然后在组件的style标签加上lang属性 ,例如:lang=”scss”

有哪几大特性:

  1. 可以用变量,例如($变量名称=值)
  2. 可以用混合器,例如()
  3. 可以嵌套

Vue的双向数据绑定原理是什么?###

vue.js 是采用数据劫持 结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调

请详细说下你对vue生命周期的理解?

总共分为8个阶段 创建前/后,载入前/后,更新前/后,销毁前/后

  1. 创建前/后: 在beforeCreated阶段,vue实例的挂载元素 $el 和数据对象data都为undefined,还未初始化。 在created阶段,vue实例的数据对象data有了,$el还没有。

  2. 载入前/后: 在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染。

  3. 更新前/后: 当data变化时,会触发beforeUpdate和updated方法。

  4. 销毁前/后: 在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在

请说出vue.cli项目中src目录每个文件夹和文件的用法?

  • assets文件夹是放静态资源;
  • components是放组件;
  • router是定义路由相关的配置;
  • view视图;
  • app.vue是一个应用主组件;
  • main.js是入口文件

自动化测试相关、mock数据相关、 webpack相关

这个考察你对webpack的理解是使用程度。

例如可能考察如下知识点:

  1. hash(contenthash, chunkhash)
  2. 多页面配置
  3. 发布上线流程
  4. 如何加快打包速度,减少打包体积
  5. 和其他工具的区别(grunt,glup,rollup,parcel,Browserify)

如果能看到这里的朋友都很不错~

前端面试基础(1年以内需掌握)

有get到帮助的,可以 圈一下~ 谢谢!

关注下面的标签,发现更多相似文章
评论