前端面试题小集

web前端

微信号 vipweb8

功能介绍 分享Web前端相关的技术文章、工具资源、精选课程、热点咨询、个人干货

一、一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化（比如浏览器为500，右边div为400，浏览器为900，右边div为800），请写出大概的css代码。

1.使用flex

//html

<divclass='box'><divclass='left'></div><divclass='right'></div></div>

//css

.box{

    width:400px;

    height:100px;

    display:flex;

    flex-direction:row;

    align-items:center;

    border:1pxsolid#c3c3c3;

}

.left{

    flex-basis：100px;

    -webkit-flex-basis:100px;

    /* Safari 6.1+ */

    background-color:red;

    height:100%;

}

.right{

    background-color:blue;

    flex-grow:1;

}

2.浮动布局

<divid="left">Left sidebar</div>

<divid="content">Main Content</div>

<styletype="text/css">

*{

    margin:0;

    padding:0;

}

#left{

    float:left;

    width:220px;

    background-color:green;

}

#content{

    background-color:orange;

    margin-left:220px;

    /*==等于左边栏宽度==*/

}

</style>

二、请写出一些前端性能优化的方式，越多越好

1.减少dom操作

2.部署前，图片压缩，代码压缩

3.优化js代码结构，减少冗余代码

4.减少http请求，合理设置 HTTP缓存

5.使用内容分发cdn加速

6.静态资源缓存

7.图片延迟加载

三、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

输入地址

1.浏览器查找域名的 IP 地址

2.这一步包括 DNS 具体的查找过程，包括：浏览器缓存->系统缓存->路由器缓存…

3.浏览器向 web 服务器发送一个 HTTP 请求

4.服务器的永久重定向响应（从 http://example.com 到 http://www.example.com）

5.浏览器跟踪重定向地址

6.服务器处理请求

7.服务器返回一个 HTTP 响应

8.浏览器显示 HTML

9.浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）

10.浏览器发送异步请求

四、请大概描述下页面访问cookie的限制条件

1. 跨域问题

2. 设置了HttpOnly

五、描述浏览器重绘和回流，哪些方法能够改善由于dom操作产生的回流

1.直接改变className，如果动态改变样式，则使用cssText

// 不好的写法

varleft = 1;

vartop = 1;

el.style.left = left + "px";

el.style.top = top + "px";// 比较好的写法

el.className += " className1";

// 比较好的写法

el.style.cssText += ";

left: " + left + "px;

top: " + top + "px;";

2.让要操作的元素进行”离线处理”，处理完后一起更新

a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘；

b) 使用display:none技术，只引发两次回流和重绘；

c) 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘

六、vue生命周期钩子

1.beforcreate

2.created

3.beformount

4.mounted

5.beforeUpdate

6.updated

7.actived

8.deatived

9.beforeDestroy

10.destroyed

七、js跨域请求的方式，能写几种是几种

1、通过jsonp跨域

2、通过修改document.domain来跨子域

3、使用window.name来进行跨域

4、使用HTML5中新引进的window.postMessage方法来跨域传送数据（ie 67 不支持）

5、CORS 需要服务器设置header ：Access-Control-Allow-Origin。

6、nginx反向代理 这个方法一般很少有人提及，但是他可以不用目标服务器配合，不过需要你搭建一个中转nginx服务器，用于转发请求

八、对前端工程化的理解

• 开发规范

• 模块化开发

• 组件化开发

• 组件仓库

• 性能优化

• 项目部署

• 开发流程

• 开发工具

九, js深度复制的方式

1.使用jq的$.extend(true,target,obj)

2.newobj = Object.create(sourceObj)，// 但是这个是有个问题就是 newobj的更改不会影响到 sourceobj但是 sourceobj的更改会影响到newObj

3.newobj = JSON.parse(JSON.stringify(sourceObj))

十、js设计模式

总体来说设计模式分为三大类：

• 创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。

• 结构型模式，共七种：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。

• 行为型模式，共十一种：策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模

十一、图片预览

<inputtype="file"name="file"onchange="showPreview(this)" />

<imgid="portrait"src=""width="70"height="75">

functionshowPreview(source){

  varfile = source.files[0];

  if(window.FileReader){

      varfr = newFileReader();

      fr.onloadend = function(e){

        document.getElementById("portrait").src = e.target.result;

      };

      fr.readAsDataURL(file);

  }

}

十二、扁平化多维数组

1、老方法

varresult = []

functionunfold(arr){

    for(vari=0;i<arr.length;i++){

      if(typeofarr[i]=="object" && arr[i].length>1){

      unfold(arr[i]);

    }else{        

      result.push(arr[i]);

    }

  }

}

vararr = [1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];

unfold(arr)

2、使用tostring

varc=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];

varb = c.toString().split(',')

3、使用es6的reduce函数

vararr=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];

constflatten = arr => arr.reduce((a,b) => a.concat(Array.isArray(b)?flatten(b) : b),[]);

varresult = flatten(arr)

十三、iframe有那些缺点？

• iframe会阻塞主页面的Onload事件；

• 搜索引擎的检索程序无法解读这种页面，不利于SEO;

• iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

• 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上

赞赏

长按二维码向我转账

受苹果公司新规定影响，微信 iOS 版的赞赏功能被关闭，可通过二维码转账支持公众号。

阅读

投诉

即将打开""小程序

取消打开