image.png
更加全面的了解请点击 ：https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions
1.页面加载时link和@import区别？
link属于xhtml标签，还用于定义rss，rel连接属性，而@import是css提供的只能加载css
link随页面同时加载，@import等页面加载完后才开始加载
@import是css2.1提出的，IE5以上才会识别，link无兼容问题
2.浏览器内核的理解？
有两部分：渲染引擎和js引擎
渲染引擎负责网页的内容（html、xml、svg、图像）、整理讯息（如引入css）、及计算网页的显示方式
js引擎负责解析执行javascript，实现与网页的交互的动态效果
3.常见浏览器内核？
Trident： IE、360、搜狗
Gecko： Netscape6以上、ff等
Presto： Opera以上（现为Blink）
Webkit：Safari、Chrome（Chrome的Blank是Webkit的分支）
4.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;
纯表现的元素：basefont，big，center，font, s，strike，tt，u;
对可用性产生负面影响的元素：frame，frameset，noframes；
IE8/IE7/IE6支持通过document.createElement方法产生的标签；
直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
DOCTYPE声明、新增的结构元素、功能元素
5.HTML语义化，什么是HTML语义化？为什么要语义化？写HTML代码时应注意什么？
nav--导航 li--列表 strong--强调
为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
尽可能少的使用无语义的标签div和span
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
6.HTML5的离线储存怎么使用，以及工作原理
页面头部加入manifest属性
<!DOCTYPE HTML>
<html manifest = "cache.manifest">
</html>
新建cache.manifest文件的编写离线存储的资源
CACHE MANIFEST
#v0.11
CACHE: //可缓存的文件
js/app.js
css/style.css
NETWORK: //需联网的文件
resourse/logo.png
FALLBACK: //未联网操作失败是展现的页面 即404错误页
/offline.html/ /404.html
在离线状态时，操作window.applicationCache的API进行需求实现。
7.cookies，sessionStorage 和 localStorage 的区别？
cookie
本地储存(通常经过加密,标示用户身份);
在同源的http请求中携带,浏览器和服务器间来回传递。
存储较小(4k)
自定义过期时间
sessionStorage
本地储存
不会自动把数据发给服务器
存储较大（5M或更大）
关闭浏览器即主动删除
localStorage
本地储存
不会自动把数据发给服务器
存储较大（5M或更大）
若主动删除，永久存储
8.iframe/frame缺点？优点？
重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，加快了网页下载速度)
技术易于掌握，使用方便，使用者众多，可主要应用于不需搜索引擎来搜索的页面
方便制作导航栏
遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决
代码复杂，无法被一些搜索引擎解读。
页面样式调试麻烦，出现多个滚动条；
浏览器的后退按钮失效；
过多会增加服务器的HTTP请求；
小型的移动设备无法完全显示框架；
产生多个页面，不易管理；
不容易打印；
9、如何实现浏览器内多个标签页之间的通信?
调用localstorge、cookies等本地存储方式
localStorage
标签页1
<input id="name">>
<input type="button" id="btn" value="提交">>
<script type="text/javascript">>
$(function(){
$("#btn").click(function(){
var name=$("#name").val();
localStorage.setItem("name", name);
});
});
</script>
标签页2
<script type="text/javascript">>
$(function(){
window.addEventListener("storage", function(event){
console.log(event.key + "=" + event.newValue);
});
});
</script>>
cookie
标签页1
<input id="name">
<input type="button" id="btn" value="提交">
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
var name=$("#name").val();
document.cookie="name="+name;
});
});
</script>
标签页2
<script type="text/javascript">
$(function(){
function getCookie(key) {
return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];
}
setInterval(function(){
console.log("name=" + getCookie("name"));
}, 10000);
});
</script>
10.webSocket如何兼容低浏览器？(阿里)
Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR
11.页面可见性？
页面可见性： 就是对于用户来说，页面是显示还是隐藏, 所谓显示的页面，就是我们正在看的页面；
隐藏的页面，就是我们没有看的页面。
API，document.hidden 返回布尔值，如果是true, 表示页面可见，false 则表示，页面隐藏。 不同页面之间来回切换，触发visibilitychange事件。
还有一个document.visibilityState, 表示页面所处的状态，取值：visible, hidden 等四个。
document.addEventListener("visibilitychange", function(){
if(document.hidden){
document.title ="hidden";
}else {
document.title = "visibile";
}
})
我们打开这个页面，然后再打开另一个页面，来回点击这两个页面，当我们看到这个页面时，标题显示visiable ,当我们看另一个页面时，标题显示hidden;
动画，视频，音频都可以在页面显示时打开，在页面隐藏时关闭。
12.浏览器是怎样解析CSS选择器的？
浏览器解析css选择器的规则是从右向左的，这样会提高查找选择器所对应的元素的效率。减少dom的遍历
13.margin和padding分别适合什么场景使用？
需要在border外侧添加空白时。空白处不需要背景（色）时。上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。
需要在border内测添加空白时。空白处需要背景（色）时。上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。
14.抽离样式模块怎么写，说出思路，有无实践经验？
css权重：!important(权值最大) > 内联(权值1000 `<p style=''></p>` ) > id(权值100) > class(权值10) > 元素/标签选择器(权值1) > 通配符/子选择器/相邻选择器(权值0 如*、>、+) > 继承样式(权值无)
15.元素竖向的百分比设定是相对于容器的高度吗？
相对于父元素宽度的：
[max/min-]width、left、right、padding、margin 等；
相对于父元素高度的：
[max/min-]height、top、bottom 等；
相对于继承字号的：
font-size 等；
相对于自身字号的：
line-height 等；
相对于自身宽高的：
border-radius、background-size、transform: translate()、transform-origin、zoom、clip-path 等；
特殊算法的：
background-position（方向长度 / 该方向除背景图之外部分总长度 * 100）、
filter 系列函数等；
16.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE
一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本
响应式布局主要运用的是CSS3中的media query特性(媒体查询)
根据页面大小及变化添加或移除class
$(window).resize(function () {
screenRespond();
});
screenRespond();
function screenRespond(){
var screenWidth = $(window).width();
if(screenWidth <= 1800){
$("body").attr("class","w1800");
}
if(screenWidth <= 1400){
$("body").attr("class","w1400");
}
if(screenWidth > 1800){
$("body").attr("class","");
}
}
17.视差滚动效果，如何给每页做不同的动画？
视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。
插件推荐 http://prinzhorn.github.io/skrollr/
18. ::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用
一个冒号是伪类，两个冒号是伪元素
伪类有：:first-child ，:link:，vistited，:hover:，active:focus，:lang
伪元素有：:first-line，:first-letter，:before，:after
伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类
与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。
如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。
19.如何修改chrome记住密码后自动填充表单的黄色背景 ？
方法一
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
border: 1px solid #CCC!important;
}
方法二
input:-webkit-autofill {
-webkit-text-fill-color: #fff !important;
transition: background-color 5000s ease-in-out 0s;
}
方法三
关闭浏览器自带填充表单功能
<form autocomplete="off" method=".." action="..">
20.你对line-height是如何理解的?
line-height 决定元素基线的位置,影响元素的高度
21.设置元素浮动后，该元素的display值是多少？
display: block;
22.怎么让Chrome支持小于12px 的文字？
用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片
.abc{font-size:7px;-webkit-text-size-adjust:none}
-webkit-transform:scale(),如：
p span{font-size:10px;-webkit-transform:scale(0.8);display:block;}
23.让页面里的字体变清晰，变细用CSS怎么做？
-webkit-font-smoothing: antialiased;
24.font-style属性可以让它赋值为“oblique” oblique是什么意思？和Italic区别?
可以理解成Italic是使用文字的斜体，Oblique是让没有斜体属性的文字倾斜！
25.如果需要手动写动画，你认为最小时间间隔是多久，为什么？
1秒刷新60次,1/60＊1000ms ＝ 16.7ms
26.position:fixed;在Android下无效怎么处理？
在我们没有focus的时候的，这个div的属性不发生改变的，当我们focus的让这个div的fixed变成的absoluted(需在body修改)，blur的时候的又变成大fixed的
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> （有用没用我也不知道，没有用过）