问题总结

HTML部分

1.Doctype作用？标准模式与兼容模式如何区分？

<!DOCTYPE>告知浏览器的解析器解析文档的标准。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式的页面渲染和JS运行都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

2.HTML5 为什么只需要写<!DOCTYPE HTML>？

HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为。w3c 和 WHATWG合作制定的新标准。

3.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

每个元素都有默认的display值disblock 块级元素，inline 行内元素。

（1）行内元素有：a b span img input select strong（强调的语气）
（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（3）常见的空元素：
    <br> <hr> <img> <input> <link> <meta>
4.页面导入样式时，使用link和@import有什么区别？

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

5.浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎

渲染引擎负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等）渲染。

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey，Firefox 。
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]。
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]。

6.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

绘画 canvas;
用于媒介回放的 video 和 audio 元素;
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除;
语意化更好的内容元素，比如 article、footer、header、nav、section;
表单控件，calendar、date、time、email、url、search;
新的技术webworker, websockt, Geolocation;

区分：头部标准，标签。

E8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式。

当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

7.HTML5的离线储存怎么使用，工作原理能不能解释一下？
在用户断网时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

如何使用：
1、页面头部像下面一样加入一个manifest的属性；
2、在cache.manifest文件的编写离线存储的资源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、在离线状态时，操作window.applicationCache进行需求实现。

8.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。

9.简述一下你对HTML语义化的理解？

使文档结构化，让浏览器爬虫（依赖于标签来确定上下文和各个关键字的权重）更好的理解标签意思。即使没有样式也页面也能呈现出很好地内容结构。用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页。语义化可以减少编码差异，增加可读性。

10.请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

11.iframe有那些缺点？

*iframe会阻塞主页面的Onload事件；
*搜索引擎的检索程序无法解读这种页面，不利于SEO;

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

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

12.Label的作用是什么？是怎么用的？

label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。for 属性关联表单的 id 属性。

13.HTML5的form如何关闭自动完成功能？

给不想要提示的 form 或下某个input 设置为 autocomplete=off。

14.如何实现浏览器内多个标签页之间的通信? (阿里)

调用localstorge、cookies等本地存储方式
webSocket如何兼容低浏览器？(阿里)

Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、基于 multipart 编码发送 XHR 、基于长轮询的 XHR

15.如何在页面上实现一个圆形的可点击区域？

border-radius js canvas

16.title与h1的区别、b与strong的区别、i与em的区别？

对于搜索引擎来说em和strong比i和b要重视的多。

1.H1是大标题的意思。一般出现网页文章页面，作用如同一张报纸的大标题，使用读者在没看内容之前就

大概了解本文的旨意，它是直接给用户看的。而且在SEO中，搜索引擎也非常重视H1，目的是告诉搜索引擎，这

个地方的内容很重要,H1要求贴近文章内容，突出主题，言简意赅。

2.title是用来面对的是搜索引擎和用户，其范围相对于H1来说要广，title中可以包含H1，在搜索引擎中

tiele的权重要高于H1;一般来讲，H1做到突出主题目，title修饰主题关键字。

CSS部分

1.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

CSS盒子模型：由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height);

标准的CSS盒子模型和低端IE CSS盒子模型不同：宽高不一样

　　标准的css盒子模型宽高就是内容区宽高；

　　低端IE css盒子模型宽高内边距﹢边界宽﹢内容区；

2.CSS选择符有哪些？哪些属性可以继承？

1) id选择器(# myid)

2) 类选择器(.myclassname)

3) 标签选择器(div, h1, p)

4) 相邻选择器(h1 + p)

5) 子选择器(ul > li)

6) 后代选择器(li a)

7) 通配符选择器( * )

8) 属性选择器(a[rel = "external"])

9) 伪类选择器(a: hover, li:nth-child)

可继承的样式：

1) font-size

2) font-family

3) color

4) text-indent

不可继承的样式：

1) border

2) padding

3) margin

4) width

5) height

优先级算法：

1) 优先级就近原则，同权重情况下样式定义最近者为准;

2) 载入样式以最后载入的定位为准;

3) 3.!important > id > class > tag

4) important 比内联优先级高，但内联比 id 要高

CSS3新增伪类举例：

1) p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

2) p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

3) p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

4) p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。

5) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

6) :enabled :disabled 控制表单控件的禁用状态。

7) :checked 单选框或复选框被选中。

CSS3有哪些新特性？

1) CSS3实现圆角（border-radius），阴影（box-shadow），

2) 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

3) transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜

4) 增加了更多的CSS选择器多背景 rgba

5) 在CSS3中唯一引入的伪元素是 ::selection.

6) 媒体查询，多栏布局

7) border-image

 3.如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
块状元素水平居中：margin：0 auto;
浮动元素居中：
1.在浮动元素外面再嵌套一层div,然会外层元素设置margin:0 auto;
2.外层元素 position: relative;float: left;left: 50%; 内层元素。height:200px;width:200pxfloat: left;position: relative;right: 50%;

4.内容居中

内联元素：text-align:center；vertical-align:middle

块状元素：

display:table-cell;vertical-align:middle;

若是单行内容：line-height=height

5.绝对定位元素居中

1.已知元素尺寸。

.element {

   width: 600px; height: 400px;

   position: absolute; left: 50%; top: 50%;

   margin-top: -200px;    /* 高度的一半 */

   margin-left: -300px;    /* 宽度的一半 */

}

2.未知元素尺寸

.element {

   width: 600px; height: 400px;

   position: absolute; left: 50%; top: 50%;

   transform: translate(-50%, -50%);   /* 第一个50%为width的一半，第二个50%为height的一半 */

}

.element {

   width: 600px; height: 400px;

   position: absolute; left: 0; top: 0; right: 0; bottom: 0;

   margin: auto;    /* 水平和垂直都居中 */

}

4.position的值relative和absolute定位原点是？

1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。　　

3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

4、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

5.CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

6.用纯CSS创建一个三角形的原理是什么？
等分原理：一个块级元素，设置height:100px;width:100px;border:100px solid transparent;border-bottom:100px solid yellow;
直角三角形（如下）

width: 0; 
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;

7.li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

<li>横向排列，而又为了能设置其宽度和高度，为其设置display:inline-block，相邻<li>之间会出现8px的空白间隔，不是margin也不是padding。

原因：.浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上面的代码<li>换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。

解决方案：1.既然是因为<li>换行导致的，那就可以将<li>代码全部写在一排。

　　　　　2.很多时候我们不可能将<li>全部写在一排，那怎么办？既然是空格占一个字符的宽度，那我们索性就将<ul>内的字符尺寸直接设为0，将下面样式放入样式表，问题解决。

　　　　　3.本来以为方法二能够完全解决问题，但经测试，将li父级标签字符设置为0在Safari浏览器依然出现间隔空白；既然设置字符大小为0不行，那咱就将间隔消除了，将下面代码替换方法二的代码，目前测试完美解决。同样随来而来的问题是li内的字符间隔也被设置了，我们需要将li内的字符间隔设为默认。.wrap ul{letter-spacing: -5px;} .wrap ul li{letter-spacing: normal;}

8.为什么要初始化浏览器样式？
消除不同浏览器渲染的差异

9.对BFC规范(块级格式化上下文：block formatting context)的理解？
css定位方案三种：
一，普通流 ：元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行， 除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。
二，浮动 ：在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。
三，绝对定位：元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

具有 BFC 的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器没有的一些特性，例如可以包含浮动元素，上文中的第二类清除浮动的方法（如 overflow 方法）就是触发了浮动元素的父元素的 BFC ，使到它可以包含浮动元素，从而防止出现高度塌陷的问题。

满足下面任一条件的元素，会触发为 BFC ：

浮动元素，float 除 none 以外的值
绝对定位元素，position（absolute，fixed）
display 为以下其中之一的值 inline-blocks，table-cells，table-captions
overflow 除了 visible 以外的值（hidden，auto，scroll）

除了使用 overflow: hidden 触发 BFC 外，还使用了一个 *zomm: 1 的属性，这是 IEhack

1. BFC 会阻止外边距折叠

2. BFC 可以包含浮动的元素（防止塌陷）

3. BFC 可以阻止元素被浮动元素覆盖

10.请解释一下为什么需要清除浮动？清除浮动的方式

清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响。

清除浮动的两种基本方法：

1.脚底插入clear:both;

2.父元素BFC/haslayout

BFC/haslayout通常声明

float:left/right
position:absolute/fixed
overflow:hidden/scroll(IE7+)
display:inline-block/table-cell(IE8+)
width/height/zoom:1/…(IE6/IE7)

当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

ie下子元素浮动时候父元素不随着自动扩大的问题，使用下面的CSS写法。父元素 { overflow: auto; zoom: 1 }

11.移动端的布局用过媒体查询吗？

@media screen and (min-width: 400px) and (max-width: 700px) { … }

12.CSS优化、提高性能的方法有哪些？

1、尽量将样式写在单独的css文件里面，在head元素中引用
2、不使用@import
3、避免使用复杂的选择器，层级越少越好
4、精简页面的样式文件，去掉不用的样式
5、利用CSS继承减少代码量
6、慎重使用高性能属性：浮动、定位；

13.元素竖向的百分比设定是相对于容器的高度吗？
1.竖向百分比 ——之高度    相对于容器的height。
2.竖向百分比——之 间距   相对对于margin-top、margin-bottom、padding-top、padding-bottom这些竖直方向的内外边距属性的百分比取值，参考的其实是容器的宽度而不是高低。

14.移动端优化的站点 视口基础？

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">   initial-scale属性控制页面最初加载时的缩放等级。maximum-scale、minimum-scale及user-scalable属性控制允许用户以怎样的方式放大或缩小页面。

15.::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素（伪元素由双冒号和伪元素名称组成）

16.如何修改chrome记住密码后自动填充表单的黄色背景 ？

情景一：input文本框是纯色背景的
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
border: 1px solid #CCC!important;
}
思路二： 关闭浏览器自带填充表单功能
设置表单属性 autocomplete="off/on" 关闭自动填充表单，自己实现记住密码
 
<!-- 对整个表单设置 -->
<form autocomplete="off" method=".." action="..">
<!-- 或对单一元素设置 -->
<input type="text" name="textboxname" autocomplete="off">

17.设置元素浮动后，该元素的display值是多少？
（自动变成display:block）
18.怎么让Chrome支持小于12px 的文字？
transform:scale()
19.让页面里的字体变清晰，变细用CSS怎么做？
（-webkit-font-smoothing: antialiased;）
20.font-style属性可以让它赋值为“oblique” oblique是什么意思？
oblique是一种模仿的斜体，而不是真正的斜体。和斜体”italic”的效果是一样。
21.如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

22.overflow: scroll时不能平滑滚动的问题怎么处理？

在 overflow:scroll部分，也就是需要滑动的层处，加css

: -webkit-overflow-scrolling: touch;

23.png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

gif图形交换格式，索引颜色格式，颜色少的情况下，产生的文件极小，支持背景透明，动画，图形渐进，无损压缩（适合线条，图标等），缺点只有256种颜色
jpg支持上百万种颜色，有损压缩，压缩比可达180：1，而且质量受损不明显，不支持图形渐进与背景透明，不支持动画
png为替代gif产生的，位图文件，支持透明，半透明，不透明。不支持动画，无损图像格式。Png8简单说是静态gif，也只有256色，png24不透明，但不止256色。
webp谷歌开发的旨在加快图片加载速度的图片格式，图片压缩体积是jpeg的2/3，有损压缩。高版本的W3C浏览器才支持，google39+，safari7+

24.css3的calc()属性

.test {
　　width: calc(100% - 50px);
　　background: #eee;
}

25.什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）
document.cookie = null;

Javascript
1.写javascript基本规范？

1.减少全局污染
2.变量名的提升
3.for循环 （length属性提前算，不要在循环条件里算，不然每次循环都需要计算一次）
4.用“===”取代"=="
5.命名规则 构造函数首字母大写  Person(){}
6.写注释。
7.不要在同一个行内声明多个变量。
8.Switch语句中必须带有default分支.

2.JavaScript原型，原型链 ? 有什么特点？

3.JavaScript有几种类型的值？
堆：原始数据类型和 栈：引用数据类型

。
。
。
。
。


18.那些操作会造成内存泄漏？
1.意外的全局变量引起的内存泄露

function leak(){
  leak="xxx";//leak成为一个全局变量，不会被回收
}


2.闭包引起的内存泄露

function bindEvent(){
  var obj=document.createElement("XXX");
  obj.onclick=function(){
    //Even if it's a empty function
  }
}

3.被遗忘的定时器或者回调

var someResouce=getData();
setInterval(function(){
    var node=document.getElementById('Node');
    if(node){
        node.innerHTML=JSON.stringify(someResouce)
    }
},1000)

这样的代码很常见, 如果 id 为 Node 的元素从 DOM 中移除, 该定时器仍会存在, 同时, 因为回调函数中包含对 someResource 的引用, 定时器外面的 someResource 也不会被释放。

19.如何避免内存泄漏？

1）减少不必要的全局变量，或者生命周期较长的对象，及时对无用的数据进行垃圾回收；

2）注意程序逻辑，避免“死循环”之类的；

3）避免创建过多的对象原则：不用了的东西要及时归还。

20.事件节流和函数防抖

1.一些短时间内频繁触发的事件会导致占用过多的资源，这时候我们设置一个触发间隔。频繁触发的事件，例如的 mousemove（鼠标移动）、scroll（滚动条），resize 等

实现原理：

1.初次调用函数时，设置一个定时器，在指定的 间隔 之后运行代码

2.第二次调用函数时（若小于 间隔 时间，定时器 尚未执行），清除定时器并重设一个

3.如果定时器已经执行（过了间隔时间），此次操作就无意义。

4.目的是只有在执行函数的请求停止了一段时间（间隔时间）之后才执行。

输入框验证（函数防抖）

const filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
$("#email").on("keyup",checkEmail());
function checkEmail(){
    let timer=null;
    return function (){
        clearTimeout(timer);
        timer=setTimeout(function(){
            console.log('执行检查');
        },800);
    }
}

注册时邮箱的输入框，随着用户的输入，实时判断邮箱格式是否正确
但每次的用户输入（按键弹起）都触发邮箱格式检测事件，造成了浪费
设置输入间隔大于800ms时（用户结束输入时），再执行检查邮箱格式

滚动加载（函数节流）

$(window).scroll(loadMore());
    function loadMore(){
        var canRun=true;
        return function(){
            if(!canRun){return;}
            canRun=false;
            setTimeout(function(){
                console.log("执行滚动事件");
                var docHeight=$(document).height();
                var winHeight=$(window).innerHeight();
                var scrollDistance=$(window).scrollTop();
                if( docHeight - (winHeight+scrollDistance) <=100 ){
                    console.log('加载中...');
                }
                canRun=true;
            },600);
        }
    }

滚动事件的触发非常频繁
每次触发都去检查是否到页面底部，浪费资源
设置一个开关，一次只能有一个触发执行，并对执行设置计时一段时间再执行
执行完毕之后再解锁。这就是函数节流。

posted @ 2018-07-10 10:01 winyh 阅读(242) 评论(0) 编辑收藏举报

刷新页面返回顶部