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

1.使用flex

//html

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

//css

.box {

width: 400px;

height: 100px;

display: flex;

flex-direction: row;

align-items: center;

border: 1px solid #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.浮动布局

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

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

<style type="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

// 不好的写法

var left = 1;

var top = 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设计模式

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

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

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

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

十一、图片预览

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

<img id="portrait" src="" width="70" height="75">

function showPreview(source) {

var file = source.files[0];

if(window.FileReader) {

var fr = new FileReader();

fr.onloadend = function(e) {

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

};

fr.readAsDataURL(file);

}

}

十二、扁平化多维数组

1、老方法

var result = []

function unfold(arr){

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

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

unfold(arr[i]);

} else {

result.push(arr[i]);

}

}

}

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

unfold(arr)

2、使用tostring

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

var b = c.toString().split(',')

3、使用es6的reduce函数

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

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

var result = flatten(arr)

十三、iframe有那些缺点?

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

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

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

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

Web前端面试题小集的更多相关文章

  1. 2016最全的web前端面试题及答案整理

    面试web前端开发,不管是笔试还是面试,都会涉及到各种专业技术问题,今天小编整理了一些常见的web前端面试题及答案,希望对大家有所帮助. 1.常用那几种浏览器测试?有哪些内核(Layout Engin ...

  2. web前端面试题HTML/CSS部分

    web前端面试题HTML/CSS部分 前端页面有哪三层构成,分别是什么?作用是什么? 1.结构层:由 HTML 或 XHTML 之类的标记语言负责创建,仅负责语义的表达.解决了页面“内容是什么”的问题 ...

  3. web前端面试题库

    web前端面试题及答案   1.常用那几种浏览器测试?有哪些内核(Layout Engine)? 答: (Q1) 浏览器:IE,Chrome,FireFox,Safari,Opera.    (Q2) ...

  4. 第136天:Web前端面试题总结(理论)

    Web前端面试题总结 HTML+CSS理论知识 1.讲讲输入完网址按下回车,到看到网页这个过程中发生了什么 a. 域名解析 b. 发起TCP的3次握手 c. 建立TCP连接后发起http请求 d. 服 ...

  5. 金三银四,磨砺锋芒;剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)上

    金三银四,磨砺锋芒:剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)上 引言 元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待! ...

  6. 好程序员分享Web前端面试题汇总JS篇之跨域问题

    为什么80%的码农都做不了架构师?>>>   好程序员分享Web前端面试题汇总JS篇之跨域问题,接着上一篇文章我们继续来探讨web前端面试必备面试题. 跨域解决方案 1. 通过jso ...

  7. 【web前端面试题整理02】前端面试题第二弹袭来,接招!

    前言 今天本来准备先了解下node.js的,但是,看看我们一个小时前与一个小时后的差距: 既然如此,我们继续来搜集我们的前端面试题大业吧!!! 特别感谢玉面小肥鱼提供哟,@玉面小飞鱼 题目一览 Jav ...

  8. 【重点--web前端面试题总结】

    前端面试题总结 HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应. JavaScri ...

  9. 【web前端面试题整理06】成都第一弹,邂逅聚美优品

    前言 上周四回了成都,休息了一下下,工作问题还是需要解决的,于是今天去面试了一下,现在面试回来了,我感觉还是可以整理一下心得. 这个面试题整理系列是为了以后前端方面的兄弟面试时候可以得到一点点帮助,因 ...

随机推荐

  1. python基础===15条变量&方法命名的最佳实践

    不同的代码段采用不同的命名长度.通常来说,循环计数器(loop counters)采用1位的单字符来命名,循环判断变量(condition/loop variables)采用1个单词来命名,方法采用1 ...

  2. angular项目中使用Primeng

    1.第一步把依赖添加到项目中 npm install primeng --save npm install @angular/animations --save npm install font-aw ...

  3. NLP基础 成分句法分析和依存句法分析

    正则匹配: .除换行符所有的 ?表示0次或者1次 *表示0次或者n次 a(bc)+表示bc至少出现1次 ^x.*g$表示字符串以x开头,g结束 |或者 http://regexr.com/ 依存句法分 ...

  4. LightOJ 1323 Billiard Balls(找规律(蚂蚁爬木棍))

    题目链接:https://vjudge.net/contest/28079#problem/M 题目大意: 一个边界长为L宽为W的平面同时发射n个台球,运动K秒,台球碰到桌面及两(多)个台球相撞情况如 ...

  5. CVE-2010-3971 CSS内存破坏漏洞分析

    看了仙果版主的议题演讲,其中提到cve-2010-3971是一个浏览器漏洞利用中的里程碑.于是找来POC,尝试分析一下. 1.漏洞重现 XP SP3+ie6.0环境 poc如下: poc.htm &l ...

  6. 深入浅出Mysql索引

    索引的出现其实就是为了提高数据查询的效率,就像书的目录一样. 索引模型有三种常见.也比较简单的数据结构分别是哈希表.有序数组和搜索树. 哈希表 哈希表是一种以键 - 值(key-value)存储数据的 ...

  7. 【58沈剑架构系列】细聊分布式ID生成方法

    一.需求缘起 几乎所有的业务系统,都有生成一个记录标识的需求,例如: (1)消息标识:message-id (2)订单标识:order-id (3)帖子标识:tiezi-id 这个记录标识往往就是数据 ...

  8. Spark 源码解析:TaskScheduler的任务提交和task最佳位置算法

    上篇文章<  Spark 源码解析 : DAGScheduler中的DAG划分与提交 >介绍了DAGScheduler的Stage划分算法. 本文继续分析Stage被封装成TaskSet, ...

  9. ajax个人总结

    ajax是什么? AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. ...

  10. centos 7 安装python3.5

    1.安装编译环境 yum groupinstall 'Development Tools' yum install zlib-devel bzip2-devel openssl-devel ncure ...