1、对标签的理解和用法
什么是meta标签? 引自下W3school的定义说明一下。
meta是用来在HTML文档中模拟HTTP协议的响应头报文。
用于网页的<head>与</head>中,meta标签的用处很多。
meta 中的重要属性:name。name属性主要用于描述网页,对应于content(网页内容),以便于搜索引擎机器人查找、分类(目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类)。
这其中关键部分在于description(站点在搜索引擎上的描述)和keywords(分类关键词),所以应该给每页加一个meta值。
2、HTML5的新特性
hisyory:通过对浏览器历史记录的读取,实现在访问记录中前进和后退
pushState、replaceState:用于向history添加当前页面的记录(改变浏览器记录)
popState:当hisyory被改变的时候,该事件会发生
3、什么是盒子模型?
W3C 标准盒子模型
总width /height:元素width /height + padding + border + margin
IE 怪异盒子模型
总width /height:元素width /height + margin
4、行内元素有哪些?块级元素有哪些?空元素有哪些?
行内元素:a b span img input
块级元素:div ul ol li dl dt dd p h1-h6
空元素:metabrhr input img
5、简述href和src的区别
href:引用外部文档中的一部分内容,与外部文档相关联
src:引入外部文件作用于目标文档
6、了解并使用过哪些前端页面模板引擎
Handlebars:在许多前端框I(MUI/AmazeUi)中被引入,它的语法简单,通常使用{{value}}将数据包裹起来,他还会自动匹配响应数值和对象。
CSS
1、为什么需要浮动?什么时候需要清除浮动?阐述清楚浮动的几种方式?(常见问题)
为了解决做到有效且美观的样式需求
当子元素设置了float 属性之后,父元素高度塌陷的时候
父元素设置clear:both或者overflow:hidden
2、解释css sprites ,如何使用?css sprites制作有哪几种方法?
通过CSS属性background-image中的background-repeat,background-position来实现使用
3、box-sizing有哪几种值?分别有什么作用?
box-sizing:content-box(宽度/高度分别应用到元素的内容框)
box-sizing:border-box(元素指定的任何内边距和边框都在已设定的宽度和高度内进行绘制)
box-sizing:inherit
4、CSS覆盖规则
继承原因样式冲突时,最近父元素样式有效
继承样式和指定样式冲突时,最近指定样式有效
!important的样式不被覆盖
5、css3新增了哪些属性?常用的有哪些?
border-radius:边框圆角
border-shadow:边框阴影
border-image:边框图片
background-size:属性规定背景图片的尺寸。
background-orgin:属性规定背景图片的定位区域。
2D(transform)
transform:translate平移
transform:rotate旋转
transform:scale缩放
6、display:none和visiblilty:hidden的区别?
display:none(隐藏占据的空间消失)
visiblilty:hidden(隐藏仍然占据页面空间)
7、link和@import的区别?
link:从属HTML
@import:从属CSS
前者的权重高且优先加载
JavaScript
1、JQuery的选择器有哪些(即JQuery查找页面元素的方法有哪些)?
基本过滤选择器,内容过滤选择器,可视化过滤选择器,属性过滤选择器,子元素过滤选择器
2 、Javascript中的定时器有哪些?他们的区别及用法是什么?
定时器setTimeOut()与clearTimeOut(),事件发生后只执行一次
定时器setInterval()与clearInterval(),事件发生后重复执行
3、客户端缓存有哪几种方式?各有什么区别?(cookies sessionStorage和localstorage)
localStorage 是 HTML5 标准中新加入的技术,localStorage 被大多数浏览器所支持,更多用他来存储数据。(不兼容IE低版本浏览器
Cookie的主要用途有保存登录信息, 比如你登录某个网站市场可以看到“记住密码”, 这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在
sessionStorage直译是会话存储, 它只是可以将一部分数据在当前会话中保存下来, 刷新页面数据依旧存在。 但当页面关闭后,sessionStorage中的数据就会被清空。
4、ajax是什么?使用时有那几步?
前端向后台请求数据 ,
第一步:创建一个ajax(实例)对象
第二步:设置请求协议(配置信息)(open)
第三步:监听 ajax 请求状态(xhr.onreadystatechange)
第四步:开始发送请求(send)
5、xml和json的区别是什么
XML可读性较好些,XML有很好的扩展性
json体积小,传输快,编译难度小
6、常见的HTTP状态码及意义
200 请求成功,
301 请求的资源已永久移动到新位置。
302 请求的资源现在临时从不同的 URI 响应请求。
400 语义有误,当前请求无法被服务器理解,请求参数有误。
401 当前请求需要用户验证。
403 服务器已经理解请求,但是拒绝执行它。
404 请求失败,请求所希望得到的资源未被在服务器上发现。
500 服务器遇到了一个未曾预料的状况,无法完成对请求的处理,会在程序码出错时出现。
501 服务器不支持当前请求所需要的某个功能。无法识别请求的方法。
502 作为网关或者代理工作的服务器尝试执行请求时,从上游服务器接收到无效的响应。
503 由于临时的服务器维护或者过载,服务器当前无法处理请求。
7、http 和 https 有何区别?如何灵活使用?
HTTP:80端口,超文本传输协议是互联网上应用最为广泛的一种网络协议。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。
HTTPS:443端口,是以安全为目标的HTTP通道,简单讲是HTTP的安全版。HTTPS的安全基础是SSL,因此加密的详细内容就需要SSL。必须有一台支持SSL的服务器或主机,提前准备好正规的SSL。
8、JavaScript循环的方法有哪些?分别适用哪种情景?
for循环,用来遍历数组.
forEach(…):会遍历数组中的所有值并忽略回调函数的返回值
some(…):一直运行直到回调函数返回 true (或者“真”值).返回true时相当于在for循环里break,会提前终止循环
every(…):一直运行直到回调函数返回 false (或者“假”值).返回false时相当于在for循环里break,会提前终止循环
for…in循环会遍历对象中的所有可枚举属性,
for…of :为了弥补for…in循环遍历数组的缺陷,
9、常用的正则表达式?能否写出一两个?(例:电话和邮箱验证)
var Phone = /^1[0-9]{10}/;
var Email=/^(\w+.?)*\w+@(?:\w+.)\w+$/;
10、对JavaScript闭包的理解(什么是闭包?为什么使用闭包?如何使用?)
闭包是能够读取其他函数内部变量的函数;
原因:一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中
使用:由于闭包会携带包含它的函数的作用域,因此会比其他函数占用更多的内存。因此可以手动解除对匿名函数的引用,以便释放内存。
11、关于JS事件冒泡与JS事件代理(事件委托)
js事件冒泡:js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行;
js事件委托,其实是使用了冒泡的原理,从点击的元素开始,递归方式的向父元素传播事件,就是事件目标自身不处理事件,而是把处理任务委托给其父元素或者祖先元素。当点击子元素,根据"事件冒泡",该子元素的父级元素捕获了该次点击事件,并触发自己的方法。
12、什么是JSONP?以及它为什么不是真正的ajax?
jsonp是利用浏览器可以动态地插入一段js并执行的特点完成的。
因为 ajax的核心是 : 通过XmlHttpRequest获取非本页内容,而jsonp的核心 : 动态添加
13、为什么会有跨域问题?怎么解决?
ajax请求受同源策略影响,不允许进行跨域请求,
使用jsonp 创建一个script标签在src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现了跨域。
14、get方法和post方法有什么异同?
本质上get是向服务器发索取数据的一种请求,而post是向服务器提交数据的一种请求;get方式提交的数据,服务器端使用request.QueryString获取变量的值;post方式提交的数据,服务器端使用request.Form获取数据
get方式安全性低,post方式较安全,但是post方式执行效率要比get方式差一些,get有大小限制,post没有。
15、JavaScript继承的几种方法?
原型链继承,实例继承,构造继承,组合继承,寄生组合继承
16、异步加载和延迟加载的方法?
异步:onload,async,await
延时:deter
二、高级部分
1、页面优化的方法有哪些?
1.尽量减少 HTTP 请求
-
不要在 HTML 中使用缩放图片
-
Image压缩
-
减少对DOM的操作
2、什么是MVC、MVVM,区别和原理?
MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型(双向)
MVC是Model-View- Controller的简写。即模型-视图-控制器(单向)
MVC和MVVM的区别并不是VM完全取代了C,ViewModel存在目的在于抽离Controller中展示的业务逻辑,而不是替代Controller,其它视图操作业务等还是应该放在Controller中实现。
MVVM原理:数据劫持发布-订阅模式。Vue 将遍历此对象所有的属性,并使用Object.defineProperty()方法把这些属性全部转成setter、getter方法。当data中的某个属性被访问时,则会调用getter方法,当data中的属性被改变时,则会调用setter方法。Compile指令解析器,它的作用对每个元素节点的指令进行解析,替换模板数据,并绑定对应的更新函数,初始化相应的订阅。Watcher 订阅者,作为连接 Observer 和 Compile 的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数。
3、什么是优雅降级和渐进增强?
优雅降级:Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题,针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效.
渐进增强:从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时,它们会自动地呈现出来并发挥作用。
4、JS哪些操作会造成内存泄露?
JS回收机制,标记清除,引用计数
5、bootstrap响应式实现的原理
Bootstrap响应式布局是利用其栅格系统,通过一系列的行(row)与列(column)的组合来创建页面布局,对于不同的屏幕采用不同的类属性。在开发中可以只写一套代码在手机平板,PC端都能使用,而不用考虑使用媒体查询(针对不同的设备分别写不同的代码)。
6、谈谈垃圾回收机制及内存管理
垃圾收回机制:垃圾收集器会定期找出那些不在继续使用的变量,然后释放其内存。
内存管理:遍历所有可访问的对象,回收已不可访问的对象。
7、浏览器是如何渲染页面的
解析文档构建DOM树,构建渲染树,布局与绘制渲染树
8、从输入url到页面呈现发生了什么?
浏览器的地址栏输入URL并按下回车,浏览器查找当前URL是否存在缓存,并比较缓存是否过期,DNS解析URL对应的IP,根据IP建立TCP连接(三次握手),HTTP发起请求,服务器处理请求,浏览器接收HTTP响应,渲染页面,构建DOM树,关闭TCP连接(四次挥手)。
9、web worker和web socket是什么?有何相关项目经验?(注:主要和网页消息通讯有关)
Web Worker让JS有了多线程的能力,可以将复杂耗时的操作都交付给Worker线程处理。
WebSocket让web端与服务端维持一个有效的长连接,实现服务端主动推送数据。
将二者一结合,业务系统信息流转通知功能完全就可以剥离出来。
10、如何规避多人开发明明冲突问题?
把自己写好的代码,复制一份出来,放到一个安全的地方,然后重新找个地方,把线上的最新的代码 git clone 下来,然后把自己刚才复制出来的代码放进项目相应的地方,把原来自己写的旧代码覆盖了,然后新建分支,再按照上面的方法去提交代码就行了
12、如何进行web性能优化?
减少向服务器发出的并发请求数量,减少浏览器的内存使用率,减少服务器端的负载
13、谈谈你对webpack的看法(注:vue的很多项目都使用了webpack)
WebPack 是一个模块打包工具,你可以使用WebPack管理你的模块依赖,并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、Javascript、CSS以及各种静态文件图片、字体等,让开发过程更加高效。对于不同类型的资源,webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系,最后 生成了优化且合并后的静态资源。
14、谈谈对前端模块化的认识(AMD和CMD是什么?)
AMD 是一个在浏览器端模块化开发的规范(异步模块定义),由于不是JavaScript原生支持,使用AMD规范进行页面开发需要用到对应的库函数(RequireJS)。
CMD (通用模块定义),CMD规范是国内发展出来的,就像AMD有个requireJS,使用CMD规范进行页面开发也需要用到对应的库函数(SeaJS)。两者在模块加载(可以说运行、解析)时机上有所不同 。
15、栈和队列的区别?
队列是先进先出,有出口和入口,先进去可以先出来,而栈是后放上去的,可以先出来
16、栈和堆的区别?
栈由操作系统自动分配释放,无需我们手动控制;堆的申请和释放工作由程序员控制,容易产生内存泄漏;
每个进程拥有的栈的大小要远远小于堆的大小;
堆的生长方向向上,内存地址由低到高;栈的生长方向向下,内存地址由高到低;
堆都是动态分配的,没有静态分配的堆。栈有2种分配方式:静态分配和动态分配;
栈由操作系统自动分配,堆则是由C/C++提供的库函数或运算符来完成申请与管理,堆的效率比栈要低得多;
栈存放的内容,函数返回地址、相关参数、局部变量和寄存器内容等。堆,一般情况堆顶使用一个字节的空间来存放堆的大小,而堆中具体存放内容是由程序员来填充的。
17、如何评价angularJS和backbone js
18、web应用从服务器主动推送data到客户端有哪些方式?
Commet:基于HTTP长连接的服务器推送技术
SSE(Server-Send Event):服务器推送数据新方式
19、谈谈你对网站重构的理解
-
表格(table)布局改为 DIV + CSS
-
使网站前端兼容于现代浏览器(针对于不合规范的 CSS、如对 IE6 有效的)
-
对于移动平台的优化
-
针对于 SEO 进行优化
-
深层次的网站重构应该考虑的方面
-
减少代码间的耦合
-
让代码保持弹性
-
严格按规范编写代码
-
设计可扩展的 API
-
代替旧有的框架、语言(如 VB)
-
增强用户体验
-
通常来说对于速度的优化也包含在重构中
-
压缩 JS、CSS、image 等前端资源(通常是由服务器来解决)
-
程序的性能优化(如数据读写)
-
采用 CDN 来加速资源加载
-
对于 JS DOM 的优化
-
HTTP服务器的文件缓存
20、说说你对promise的理解
Promise是一种解决异步编程的方案,合理而强大;
promise是为解决异步处理回调金字塔问题而产生的;
Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject;
Promise对象的状态不受外界影响(pending 初始状态,fulfilled 成功状态,rejected 失败状态)。
21、说说严格模式的限制
不能使用with语句
不能对只读属性赋值,否则报错
不能使用前缀0表示八进制数,否则报错
不能删除不可删除的属性,否则报错
不能删除变量delete prop,会报错,只能删除属性delete global[prop]
禁止this指向全局对象
不能使用fn.caller和fn.arguments获取函数调用的堆栈
增加了保留字(比如static)
22、怎样做前端单元测试?
23、有没有服务端编程语言基础?如java或php
版权归原作者所有,金桐网依法保护版权,保护权利人合法权益。金桐网部分文章、知识等若未能第一时间与作者取得联系或标注原始出处,请谅解。若涉及版权或第三方网络侵权问题,请及时与我公司服务中心联系。