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

最新推荐文章于 2022-12-05 23:50:01 发布

weixin_34249367

最新推荐文章于 2022-12-05 23:50:01 发布

阅读量693

点赞数 2

文章标签：前端 ViewUI

原文链接：https://juejin.im/post/5ce27506f265da1baf7cbe50

版权

最近面试了很多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部分组成？

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

前端性能优化问题，你是如何处理前端性能问题的？

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层都被使用不同的颜色添加了一个高亮的边框。为什么会这样呢？

原理解析：

$$("*") 以数组的形式返回页面所有元素
.forEach 。这是一种简写，完整的写法应该是这样：Array.prototype.forEach.call(...);很显然，简写更方便。
.call 是一个prototype，JavaScript函数内置的。 .call 使用它的第一个参数替换掉上面说的这个 this ，也就是你要传人的数组
因此, [].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;
复制代码

解决跨域问题

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

框架：Vue全家桶

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

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

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

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

vue组件通信

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

props和$emit
listeners
中央事件总线
provide和inject
v-model
children
boradcast和dispatch
vuex处理组件之间的数据交互

vue服务器渲染

vue性能优化

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

官网详情介绍

`vue-router`有哪几种导航钩子？

三种：

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

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

使用步骤：

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

有哪几大特性:

可以用变量，例如（$变量名称=值）
可以用混合器，例如（）
可以嵌套

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

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

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

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

创建前/后：在beforeCreated阶段，vue实例的挂载元素 $el 和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在