整理所有看过的文章的面试题+各种百度每一道题的答案,希望可以有效的帮助别人
本章博客,梳理所有基础的css,js,html,jquery,vue等题,包含面试题,可供参考学习,也督促自我学习
第一阶段:前端和计算机基础相关知识
问题三:被点击过的超链接不再具有hover和active属性
按照lvha的顺序书写css样式
“link”:a标签还未被访问的状态
“visited”:a标签已被访问过的状态
“hover”:鼠标悬浮在a标签上的状态
“active”:a标签被按着时的状态
Referer:指当前请求的URL是在什么地址引用的( 点击超链接的请求的referer为当前超链接所在页面 )
17.http响应头有哪儿些字段allow:对某网络资源的有效的请求行为
age:从原始服务器到代理缓存形成的估算时间(以秒计,非负)
http1.0:每次请求和响应都需要建立一个单独的连接,每次连接只是传输一个对象,严重影响客户机和服务器的性能
http1.1:支持持久连接(keep-alive/close),在一个TCP连接上可以传送多个HTTP请求和响应,减少了建立和关闭连接的消耗和延迟,增加了更多的请求头和响应头来改进和扩充http1.0的功能,增加了host请求投字段后,实现了在一台web服务器上可以在同一个ip地址和端口号上使用不同主机名来创建多个虚拟web站点,新增身份认证(authentication)
19.三种禁止浏览器缓存的头字段以及设置指
20.常用的http状态码列表
304: Not Modified,未修改,所请求的资源未修改,服务器返回此状态码时,不会返回任何资源,可以直接只用浏览器缓存 305: Use Proxy,使用代理,所请求的资源必须通过代理访问 400: Bad Request,客户端请求的语法错误,服务器无法理解 403: Forbidden,服务器理解请求客户端的去部分请求,但是拒绝执行次请求 404: Not Found,服务器无法根据客户端的请求找到资源(网页) 502: Bad Gateway,充当网管或代理的服务器,从远端服务器接收到了一个无效的请求 503: Service Unavailable,由于超载或系统维护,服务器暂时的无法处理客户端的请求dns: 域名解析,将url地址的域名解析成ip地址
dns prefetch是一种dns预解析技术,当浏览网页时,浏览器会在加载网页时对网页中的域名进行解析缓存,这样在单击当前网页中的连接时就无需进行dns的解析,减少用户等待时间,提高用户体验
使用//是为了防止不确定是http还是https协议
第二阶段:html问题
1、行内元素有哪儿些?块级元素有哪儿些?空元素(void)有哪儿些?
- localStorage :只要你手动不清缓存或者removeItem,clear等操作。设置的值会一直存在,关闭浏览器后还会存在(前提是你重新打开同样的网址)
-
cookie和session都是用来跟踪浏览器用户身份的会话方式
cookie保存在浏览器端,session保存在服务器端
一、 cookie机制:如果不在浏览器中设置过期时间,cookie被保存在内存中,生命周期随浏览器的关闭而结束,这种cookie简称会话cookie,如果在浏览器中设置了cookie的过期时间,cookir被保存在硬盘中,关闭浏览器后,cookie数据仍在,知道过期时间结束才消失设置cookie的过期时间
二、session机制:服务器收到请求需要创建session对象时,首先会检查客户端请求中是否包含sessionid。如果有sessionid,服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid,服务器会创建新的session对象,并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端,在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie,则要使用URL重写,可以通过response.encodeURL(url) 进行实现;API对encodeURL的结束为,当浏览器支持Cookie时,url不做任何处理;当浏览器不支持Cookie的时候,将会重写URL将SessionID拼接到访问地址后。
-
Cookie(客户端)存储于访问者的计算机中的变量的大小是受限的,大概只允许4k web storage(客户端) 缓存大小能到5m甚至更大。 这两者都是保存在浏览器端,且同源的 Session 在服务器端,默认被存在在服务器的一个文件里(不是内存),
3.HTML5的form如何关闭自动完成功能?
HTML的输入框可以拥有自动完成的功能,当你往输入框输入内容的时候,浏览器会从你以前的同名输入框的历史记录中查找出类似的内容并列在输入框下面,这样就不用全部输入进去了,直接选择列表中的项目就可以了。但有时候我们希望关闭输入框的自动完成功能,例如当用户输入内容的时候,我们希望使用AJAX技术从数据库搜索并列举而不是在用户的历史记录中搜索。
在IE的internet选项菜单中里的自动完成里面设置
设置form输入框的autocomplete为on或者off来来开启输入框的自动完成功能
4. 网页验证码是干嘛的,是为了解决什么安全问题?
- 区分用户是计算机还是人的程序;
- 可以防止恶意破解密码、刷票、论坛灌水;
title属性没有明确意义,只表示标题;
h1表示层次明确的标题,对页面信息的抓取也有很大的影响
strong标明重点内容,语气加强含义;
em表示强调文本;i是斜体,是无意义的视觉表示
在alt和title同时设置的时候,alt作为图片的替代文字出现,title是图片的解释文字。
- 通过visibility state的值得检测页面当前是否可见,以及打开网页的时间。
- 在页面被切换到其他后台进程时,自动暂停音乐或视频的播放。
-
(1)iframe能够原封不动的把嵌入的网页展现出来。 (2)如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。 (3)网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用。 (4)如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。
-
(1)搜索引擎的爬虫程序无法解读这种页面 (2)框架结构中出现各种滚动条 (3)使用框架结构时,保证设置正确的导航链接。 (4)frame页面会增加服务器的http请求
9. HTML5的文件离线储存怎么使用,工作原理是什么?
在线情况下,浏览器发现HTML头部有manifest属性,它会请求manifest文件,如果是第一次访问,那么浏览器就会根据manifest文件的内容下载相应的资源,并进行离线存储。如果已经访问过并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面。然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不会做任何操作,如果文件改变了,那么就会重新下载文件中的资源,并且进行离线存储。例如,
在页面头部加入manifest属性
10. 简述一下你对HTML语义化的理解?
(1)去掉或丢失样式的时候能够让页面呈现出清晰的结构。
(2)有利于SEO和搜索引擎建立良好沟通,有助于爬虫抓取更多的信息,爬虫依赖于标签来确定上下文和各个关键字的权重。
(3)方便其它设备解析。
(4)便于团队开发和维护,语义化根据可读性。
11. html5新增的标签以及对应语义化(只简介8种)
(1)header: header标签定义页面的页眉信息。【主要用于定义结构,一般来说也可以使用其他方式来创建头部,但使用header就标注出了这个结构是头部,比其他多出了语意】
例子:比如一些网上商城的顶部logo信息
(2) nav: 定义导航链接。【主要用于定义结构,一般来说也可以使用其他方式来创建导航,但使用nav就标注出了这个结构是导航,比其他多出了语意】
(3)article: 定义一个独立的内容,article比p,比div多了语意,虽然理论上都可以使用div来实现,但多出了语意。【比如一本书可以一章可以有多个段落,但可以有几章,而article的语意就像章节,它的内容是独立的,而不是仅仅的“段落”】
是道德的沦丧,还是。。。
贪玩蓝月,你没玩过的全新版本
(4)footer:用来定义页尾。【主要用于定义结构,一般来说也可以使用其他方式来创建页脚,但使用footer就标注出了这个结构是页脚,比其他多出了语意】
(5)session:功能:定义网页的中的“区块”【比p多出语意“区块”,而又比div少出样式之意,div更多的用来定义样式,而session可以用来做结构划分】【如果article是一篇文章的话,那么session可以某块围绕一个论点的文章内容】
小标题:如何学习马克思
(8)embed:embed标签用来定义插入的内容(媒体内容),比如可以插入swf
12. Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?
- 声明位于文档中的最前面,处于 标签之前。告知浏览器以何种模式来渲染文档。
- 严格模式的排版和 JS 运作模式是,以该浏览器支持的最高标准运行。
- 在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
- DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
13.你知道多少种Doctype文档类型?
- 标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
- Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,
- Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。
a. XHTML 元素必须被正确地嵌套。
c. 标签名必须用小写字母。
d. XHTML 文档必须拥有根元素。
15. html5有哪些新特性、移除了那些元素?
- 太深的嵌套,比如table>tr>td>h3,会导致搜索引擎读取困难,而且,最直接的损失就是大大增加了冗余代码量。
- 灵活性差,比如要将tr设置border等属性,是不行的,得通过td
- 代码臃肿,当在table中套用table的时候,阅读代码会显得异常混乱
- 混乱的colspan与rowspan,用来布局时,频繁使用他们会造成整个文档顺序混乱。
- src用于替换当前元素;href用于在当前文档和引用资源之间确立联系。
- src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置
- href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接
18.很多网站不常用table iframe这两个元素,知道原因吗?
因为浏览器页面渲染的时候是从上至下的,而table 和 iframe 这两种元素会改变这样渲染规则,他们是要等待自己元素内的内容加载完才整体渲染。用户体验会很不友好。
第三阶段:css样式问题,我学的sass,less,所以还有sass,less扩展
1、介绍一下css的盒子模型,与低版本IE的盒子模型有什么不同
用来控制元素的盒子模型解析模式,默认为content-box
3、css选择器有哪儿些?
(7) 通配选择器 (*)4、css哪儿些属性可以继承?
- font-face属性:定义自己的字体
- @media媒介查询,用于适配不同分辨率下的css样式
6、常见的兼容性问题?
-
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示
7、css伪类和伪元素
- 伪类用于当已有元素处于某个状态时,为其添加对应的样式,这个状态根据用户行为而动态变化。
- 伪元素的操作对象是DOM树中已有的元素
-
伪类和伪元素的区别在于有没有创建一个DOM树之外的元素
8、页面导入样式时,使用link和@import有什么区别?
(1)link属于XHTML标签,除了加载css外,还能用于定义RSS(简易信息聚合,是一种基于XML标准),rel连接属性等作用;@import是css提供,只能用于加载css
(2)页面被加载时,link会同时被加载;@import引用的css会等到页面被加载完成后再加载
(3)link是XHTML标签,没有兼容问题;@import只有在IE5以上才能被识别
9、 请列举几种隐藏元素的方法
- a. visibility: hidden;这个属性只是简单的隐藏某个元素,但是元素占用的空间任然存在。
- c. position: absolute;使元素脱离文档流,处于普通文档之上,给它设置一个很大的left负值定位,使元素定位在可见区域之外。
- d. display: none;元素会变得不可见,并且不会再占用文档的空间。
- e. transform: scale(0);将一个元素设置为无限小,这个元素将不可见。这个元素原来所在的位置将被保留。
- g. height: 0; overflow: hidden;将元素在垂直方向上收缩为0,使元素消失。只要元素没有可见的边框,该技术就可以正常工作。
- h. filter: blur(0);将一个元素的模糊度设置为0,从而使这个元素“消失”在页面中。
10、 在CSS样式中常使用px、em,各有什么优劣,在表现上有什么区别?
- px是相对长度单位,相对于显示器屏幕分辨率而言的。
- em是相对长度单位,相对于当前对象内文本的字体尺寸。
- px定义的字体,无法用浏览器字体放大功能。
- em的值并不是固定的,会继承父级元素的字体大小,1 ÷ 父元素的font-size × 需要转换的像素值 = em值。
11、 解释下浮动和它的工作原理?
- 浮动元素脱离文档流,不占据空间(引起“高度塌陷”现象)
- 浮动元素碰到包含它的边框或者浮动元素的边框停留。
12、 浮动元素引起的问题?
- 父元素的高度无法被撑开,影响与父元素同级的元素
- 与浮动元素同级的非浮动元素会跟随其后
- 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构
13、 请列举几种可以清除浮动的方法(至少两种)?
-
-
使用br标签和其自身的html属性,例如
14、什么是 FOUC(无样式内容闪烁)?你如何来避免 FOUC?
-
如果使用import方法对CSS进行导入,会导致某些页面在Windows下的IE出现一些奇怪的现象:
-
以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。
原理:当样式表晚于结构性html加载,当加载到此样式表时,页面将停止之前的渲染。此样式表被下载和解析后,将重新渲染页面,也就出现了短暂的花屏现象。
解决方法:使用LINK标签将样式表放在文档HEAD中。
15、简介flex布局(弹性布局)
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
-
flex-direction属性决定主轴的方向(即项目的排列方向)。
// row(默认值):主轴为水平方向,起点在左端。 // row-reverse:主轴为水平方向,起点在右端。 // column:主轴为垂直方向,起点在上沿。
-
flex-wrap属性: 默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
// wrap:换行,第一行在上方。
-
justify-content属性定义了项目在主轴上的对齐方式。
// space-between:两端对齐,项目之间的间隔都相等。 // space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
-
align-items属性定义项目在交叉轴上如何对齐。
// stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度
-
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
// center:与交叉轴的中点对齐。 // space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。 // space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。 // stretch(默认值):轴线占满整个交叉轴。
16、sass的知识点参考笔记sass笔记
(1)less和sass在语法上有些共性:(8个)
-
参数混合: 可以将class像函数的参数一样进行传递
-
嵌套规则:class中嵌套class,从而减少重复的代码(在一个选择器中嵌套另一个选* 择器来实现继承)
-
运算: css中的数学计算(在css中使用加减乘除进行数学计算,主要运用于属性值和颜色的运算)
-
颜色功能:可以编辑你的颜色(颜色的函数运算,颜色会被先转化成HSL色彩空间,然后在通道级别操作)
-
命名空间: 样式分组,从而方便被调用(将一些变量或者混合模块打包封装,更好的组织css和属性集的重复使用)
-
作用域:局部修改样式(先从本地查找变量或者混合模块,如果没有找到的话就会去父级作用域中查找,直到找到为止,这一点和其他程序语言的作用域非常的相似)
js表达式:在css样式中使用js表达式赋值(在less或者sass文件中可以使用js的表达式,用来赋值)
-
他们之间的主要区别在于实现方式不同,less是基于js运行,所以less是在客户端处理;sass是基于ruby的,是在服务器端处理的。
很多开发者不选择less是因为less输出修改过的css到浏览器需要依赖于js引擎,而js引擎需要额外的时间来处理代码。关于这个有很多种方式,我选择的是只在开发环节使用less。一旦开发完成,我就复制粘贴less输出到一个压缩器,然后到一个单独的css文件来替代less文件。另一种方式是使用less app来编译和压缩你的less文件。两种方式都将是最小化你的样式输出,从而避免由于用户的浏览器不支持js而可能引起的任何问题。
2. 例举3种强制类型转换和2种隐式类型转换?
前者是将字符串切割成数组的形式,后者是将数组转换成字符串
5. 如何阻止事件冒泡
7.添加 删除 替换 插入到某个接点的方法
-
2)添加、移除、替换、插入
前者会自动转换类型,再判断是否相等
后者不会自动类型转换,直接去比较
9. 函数声明与函数表达式的区别?
在Javscript中,解析器在向执行环境中加载数据时,对函数声明和函数表达式并非是一视同仁的,解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问),至于函数表达式,则必须等到解析器执行到它所在的代码行,才会真正被解析执行。
-
“事件冒泡”:事件开始由最具体的元素接受,然后逐级向上传播
-
“事件捕捉”:事件由最不具体的节点先接收,然后逐级向下,一直到最具体的
-
“DOM事件流”:三个 阶段:事件捕捉,目标阶段,事件冒泡
全局变量:当前页面内有效
局部变量:函数方法内有效
null是一个表示"无"的对象,转为数值时为0;
undefined是一个表示"无"的原始值,转为数值时为NaN。
当声明的变量还未被初始化时,变量的默认值为undefined。
null用来表示尚未存在的对象
-
undefined表示"缺少值",就是此处应该有一个值,但是还没有定义。典型用法是:
1)变量被声明了,但没有赋值时,就等于undefined。
2)调用函数时,应该提供的参数没有提供,该参数等于undefined。
3)对象没有赋值的属性,该属性的值为undefined。
4)函数没有返回值时,默认返回undefined。 -
null表示"没有对象",即该处不应该有值。典型用法是:
(1) 作为函数的参数,表示该函数的参数不是对象。
(2) 作为对象原型链的终点。
13. new操作符具体干了什么呢?
1、创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用,并且最后隐式的返回 this 。
14. Cookie在客户机上是如何存储的
-
Cookies就是服务器暂存放在你的电脑里的文本文件,好让服务器用来辨认你的计算机。当你在浏览网站的时候,Web服务器会先送一小小资料放在你的计算机上
-
Cookies 会帮你在网站上所打的文字或是一些选择都记录下来。当下次你再访问同一个网站,Web服务器会先看看有没有它上次留下的Cookies资料,有的话,就会依据
-
Cookie里的内容来判断使用者,送出特定的网页内容给你。
16. 列举javaScript的3种主要数据类型,2种复合数据类型和2种特殊数据类型。
17. 程序中捕获异常的方法?
(2)当readystate==4时,表示已经接收到全部响应数据。 (3)当status ==200时,表示服务器成功返回页面和数据。 (4)如果(2)和(3)内容同时满足,则可以通过xhr.responseText,获得服务器返回的内容。
(1)JSON 是一种轻量级的数据交换格式。
(2)JSON 独立于语言和平台,JSON 解析器和 JSON 库支持许多不同的编程语言。
(3)JSON的语法表示三种类型值,简单值(字符串,数值,布尔值,null),数组,对象
20.js中的3种弹出式消息提醒(警告窗口,确认窗口,信息输入窗口)的命令式什么?
22.浏览器的滚动距离:
可视区域距离页面顶部的距离
23. 节点的种类有几种,分别是什么?
(1)希望一个变量长期驻扎在内存当中(不被垃圾回收机制回收)
(2)避免全局变量的污染
26. 请解释一下什么是语义化的HTML
内容使用特定标签,通过标签就能大概了解整体页面的布局分布
27. 为什么利用多个域名来存储网站资源会更有效?
确保用户在不同地区能用最快的速度打开网站,其中某个域名崩溃用户也能通过其他郁闷访问网站
28. 请说出三种减低页面加载时间的方法
2、合并js、css文件,减少http请求
3、外部js、css文件放在最底下
4、减少dom操作,尽可能用变量替代不必要的dom操作
29. dom事件委托什么原理,有什么优缺点
事件委托原理:事件冒泡机制
-
1.可以大量节省内存占用,减少事件注册。比如ul上代理所有li的click事件就很不错。
2.可以实现当新增子对象时,无需再对其进行事件绑定,对于动态内容部分尤为合适 事件代理的常用应用应该仅限于上述需求,如果把所有事件都用事件代理,可能会出现事件误判。即本不该被触发的事件被绑定上了事件.
30. http的cache机制,以及200状态下怎么实现 from cache(表示接触最多的就是304的from cache)(用于优化,没有接触过,需要理解)
-
定义:浏览器缓存(Browser Caching)是为了加速浏览,浏览器在用户磁盘上对最近请求过的文档进行存储,当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,这样就可以加速页面的阅览。
1、减少延迟,让你的网站更快,提高用户体验。
2、避免网络拥塞,减少请求量,减少输出带宽。 对于强制缓存,服务器通知浏览器一个缓存时间,在缓存时间内,下次请求,直接用缓存,不在时间内,执行比较缓存策略。
对于比较缓存,将缓存信息中的Etag和Last-Modified通过请求发送给服务器,由服务器校验,返回304状态码时,浏览器直接使用缓存。
-
如我们所知,在浏览器渲染网页的过程中,加载到HTML文档后,会将文档解析并构建DOM树,然后将其与解析CSS生成的CSSOM树一起结合产生爱的结晶——RenderObject树,然后将RenderObject树渲染成页面(当然中间可能会有一些优化,比如RenderLayer树)。这些过程都存在与渲染引擎之中,渲染引擎在浏览器中是于JavaScript引擎(JavaScriptCore也好V8也好)分离开的,但为了方便JS操作DOM结构,渲染引擎会暴露一些接口供JavaScript调用。由于这两块相互分离,通信是需要付出代价的,因此JavaScript调用DOM提供的接口性能不咋地。各种性能优化的最佳实践也都在尽可能的减少DOM操作次数。
-
而虚拟DOM干了什么?它直接用JavaScript实现了DOM树(大致上)。组件的HTML结构并不会直接生成DOM,而是映射生成虚拟的JavaScript DOM结构,React又通过在这个虚拟DOM上实现了一个 diff 算法找出最小变更,再把这些变更写入实际的DOM中。这个虚拟DOM以JS结构的形式存在,计算性能会比较好,而且由于减少了实际DOM操作次数,性能会有较大提升
32. js基础数据类型和引用类型分别是什么?这个前提条件下写一个getType,返回相应的类型
33. dom选择器优先级是什么,以及权重值计算(一道老问题了)
-
回答: offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素;在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为
-
4)li标签的祖级元素可以为li,父级元素也可以为例
35. http协议属于七层协议中的哪一层,下一层是什么
-
七层结构:物理层、数据链路层、网络层、传输层、会话层、表示层、应用层
-
tcp属于传输层;http属于应用层。
36. 作用域什么时候生成的?
页面加载-->创建window全局对象,并生成全局作用域-->然后生成执行上下文,预解析变量(变量提升),生成全局变量对象;
-
Websocket是一个持久化的协议,相对于HTTP这种非持久的协议来说。 类似长轮循长连接 ; 发送一次请求 ; 源源不断的得到信息
38. 理解web安全吗?都有哪几种,介绍以及如何预防
-
1.XSS,也就是跨站脚本注入
-
编写注入脚本,比如”/>