前端面试题集锦——前端综合问题
前端综合问题
前端页面有哪三层构成，分别是什么?作用是什么?
1）结构层（html）structural layer
由HTML或者XHTML之类的标记语言负责创建，即：标签；
2）表示层（css）presentation layer
解决结构层如何显示的问题。
3）行为层（js）behavior layer
内容如何对事件作出反应一类的问题解决。
常见的浏览器内核有哪些？
- Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
- Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
- Presto内核：Opera7及以上。[Opera内核原为：Presto，现为：Blink;]
- Webkit内核：Safari,Chrome等。[Chrome的：Blink（WebKit的分支）]
详细文章：浏览器内核的解析和对比
介绍一下你对浏览器内核的理解？
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
-
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
-
JS引擎：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
什么叫优雅降级和渐进增强？
-
优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会针对旧版本的IE进行降级处理了,使之在旧式浏览器上以某种形式降级体验却不至于完全不能用。如：
border-shadow -
渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新版本浏览器才支持的功能,向页面增加不影响基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。如：默认使用flash上传，但如果浏览器支持 HTML5 的文件上传功能，则使用HTML5实现更好的体验；
如何为有功能限制的浏览器提供网页?
功能限制的浏览器, 比如低版本IE, 手机浏览器, 等会在很多功能上不符合Web标准, 而应对方式主要有:
- 只提供符合Web标准的页面
- 提供另一个符合那些浏览器标准的页面
- 兼容: 两种思路:
- 渐进增强: 提供一个可用的原型，后来再为高级浏览器提供优化
- 优雅降级: 据高级浏览器提供一个版本，然后有功能限制的浏览器只需要一个刚好能用的版本
- 相关技术:
- Media Query
- CSS hack
- 条件判断
除IE外都可识别
浏览器是如何渲染页面的？
渲染的流程如下：
1.解析HTML文件，创建DOM树。
自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。
2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式
3.将CSS与DOM合并，构建渲染树（Render Tree）
4.布局和绘制，重绘（repaint）和重排（reflow）
当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为重排(reflow)。每个页面至少需要一次重排，就是在页面第一次加载的时候。在重排的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树。完成重排后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。
浏览器加载文件(repaint/reflow)
- 文件加载顺序
浏览器加载页面上引用的CSS、JS文件、图片时，是按顺序从上到下加载的，每个浏览器可以同时下载文件的个数不同，因此经常有网站将静态文件放在不同的域名下，这样可以加快网站打开的速度。 - reflow
- 在加载JS文件时，浏览器会阻止页面的渲染，因此将js放在页面底部比较好。
- 因为如果JS文件中有修改DOM的地方，浏览器会倒回去把已经渲染过的元素重新渲染一遍，这个回退的过程叫reflow。
- CSS文件虽然不影响js文件的加载，但是却影响js文件的执行，即使js文件内只有一行代码，也会造成阻塞。因为可能会有
var width = $('#id').width()这样的语句，这意味着，js代码执行前，浏览器必须保证css文件已下载和解析完成。 - 办法：当js文件不需要依赖css文件时，可以将js文件放在头部css的前面。
- 常见的能引起reflow的行为：
- 1.改变窗囗大小
- 2.改变文字大小
- 3.添加/删除样式表
- 4.脚本操作DOM
- 5.设置style属性
- 等等……
- reflow是不可避免的，只能尽量减小，常用的方法有：
- 尽量不用行内样式style属性，操作元素样式的时候用添加去掉class类的方式
- 给元素加动画的时候，可以把该元素的定位设置成absolute或者fixed，这样不会影响其他元素
- repaint
另外，有个和reflow相似的术语，叫做repaint（重绘），在元素改变样式的时候触发，这个比reflow造成的影响要小，所以能触发repaint解决的时候就不要触发reflow
浏览器一次可以从一个域名下请求多少资源？
浏览器的并发请求数目限制是针对同一域名的，同一时间针对同一域名下的请求有一定数量限制，不同浏览器这个限制的数目不一样，超过限制数目的请求会被阻塞；
目前的话，所有浏览器的并发数目一般限制在10以内。
ie各版本和chrome可以并行下载多少个资源
IE6 两个并发，iE7升级之后的6个并发，之后版本也是6个
Firefox，chrome也是6个
为什么利用多个域名来存储网站资源会更有效？
确保用户在不同地区能用最快的速度打开网站，其中某个域名崩溃用户也能通过其他域名访问网站
一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）
注：这题胜在区分度高，知识点覆盖广，再不懂的人，也能答出几句，
而高手可以根据自己擅长的领域自由发挥，从URL规范、HTTP协议、DNS、CDN、数据库查询、
到浏览器流式解析、CSS规则构建、layout、paint、onload/domready、JS执行、JS API绑定等等；
详细版：
- 浏览器会开启一个线程来处理这个请求，对 URL 分析判断如果是 http 协议就按照 Web 方式来处理;
- 调用浏览器内核中的对应方法，比如 WebView 中的 loadUrl 方法;
- 通过DNS解析获取网址的IP地址，设置 UA 等信息发出第二个GET请求;
- 进行HTTP协议会话，客户端发送报头(请求报头);
- 进入到web服务器上的 Web Server，如 Apache、Tomcat、Node.JS 等服务器;
- 进入部署好的后端应用，如 PHP、Java、JavaScript、Python 等，找到对应的请求处理;
- 处理结束回馈报头，此处如果浏览器访问过，缓存上有对应资源，会与服务器最后修改时间对比，一致则返回304;
- 浏览器开始下载html文档(响应报头，状态码200)，同时使用缓存;
- 文档树建立，根据标记请求所需指定MIME类型的文件（比如css、js）,同时设置了cookie;
- 页面开始渲染DOM，JS根据DOM API操作DOM,执行事件绑定等，页面显示完成。
简洁版：
- 浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
- 服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
- 浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
- 载入解析到的资源文件，渲染页面，完成。
99%的网站都需要被重构是那本书上写的？
网站重构：应用web标准进行设计（第2版）
页面重构怎么操作？
网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。
也就是说是在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。
对于传统的网站来说重构通常是：
- 表格(table)布局改为DIV+CSS
- 使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)
- 对于移动平台的优化
- 针对于SEO进行优化
深层次的网站重构应该考虑的方面
- 减少代码间的耦合
- 让代码保持弹性
- 严格按规范编写代码
- 设计可扩展的API
- 代替旧有的框架、语言(如VB)
- 增强用户体验
通常来说对于速度的优化也包含在重构中
- 压缩JS、CSS、image等前端资源(通常是由服务器来解决)
- 程序的性能优化(如数据读写)
- 采用CDN来加速资源加载
- 对于JS DOM的优化
- HTTP服务器的文件缓存
列举IE与其他浏览器不一样的特性？
1、事件不同之处：
触发事件的元素被认为是目标（target）。而在 IE 中，目标包含在 event 对象的 srcElement 属性；
获取字符代码、如果按键代表一个字符（shift、ctrl、alt除外），IE 的 keyCode 会返回字符代码（Unicode），DOM 中按键的代码和字符是分离的，要获取字符代码，需要使用 charCode 属性；
阻止某个事件的默认行为，IE 中阻止某个事件的默认行为，必须将 returnValue 属性设置为 false，Mozilla 中，需要调用 preventDefault() 方法；
停止事件冒泡，IE 中阻止事件进一步冒泡，需要设置 cancelBubble 为 true，Mozzilla 中，需要调用 stopPropagation()；
2、IE支持currentStyle，FIrefox使用getComputStyle
3、IE 使用innerText，Firefox使用textContent
4、滤镜方面：IE:filter:alpha(opacity= num)；Firefox：-moz-opacity:num
5、事件方面：IE：attachEvent：火狐是addEventListener
6、鼠标位置：IE是event.clientX；火狐是event.pageX
7、IE使用event.srcElement；Firefox使用event.target`
8、IE中消除list的圆点仅需margin:0即可达到最终效果；FIrefox需要设置margin:0;padding:0以及list-style:none
9、CSS圆角：ie7以下不支持圆角
你有用过哪些前端性能优化的方法？
（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4） 当需要设置的样式很多时设置className而不是直接操作style。
（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳。
（8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。
（9） 避免图片和iFrame等的空Src。空Src会重新加载当前页面，影响速度和效率。
对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。
向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。
减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询）。
减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。
1) HTML部分
- 语义化HTML：好处在于可以使代码简洁清晰，支持不同设备，利于搜索引擎，便于团队开发；
- 减少DOM节点：加速页面渲染；
- 给图片加上正确的宽高值：这可以减少页面重绘，同时防止图片缩放；
- 防止src属性和link的href属性为空：当值为空时，浏览器很可能会把当前页面当成其属性值加载；
- 正确的闭合标签：如避免使用，浏览器会多一个将它解析成
- 链接为目录或首页的地址后面加”/”，如http://www.5icool.org/；
- 用LINK而不用@import方式导入样式；
- 样式放在页头，JS放在页尾；
- 缩小favicon.ico并缓存；
2) CSS部分
- 避免使用CSS Expressions(CSS表达式)：如background-color: expression( (newDate()).getHours()%2 ? “#B8D4FF” : “#F08A00″ ) ;
- 避免使用CSS Filter（CSS滤镜）；
- 使用CSS缩写，减少代码量；
- 通过CSSSprites把同类图片合成一张，减少图片请求；
- 减少查询层级：如.header .logo要好过.header .top .logo；
- 减少查询范围：如.header>li要好过.header li；
- 避免TAG标签与CLASS或ID并存：如a.top、button#submit；
- 删除重复的CSS；
3) Javscript部分
- 尽量少用全局变量；
- 使用事件代理绑定事件，如将事件绑定在body上进行代理；
- 避免频繁操作DOM节点；
- 不使用EVAL；
- 减少对象查找，如a.b.c.d这种查找方式非常耗性能，尽可能把它定义在变量里；
- 类型转换：把数字转换成字符串使用”” + 1，浮点数转换成整型使用Math.floor()或者Math.round()；
- 对字符串进行循环操作，譬如替换、查找，应使用正则表达式；
- 删除重复的JS；
4) 服务器部分
- 尽量合并CSS、JS文件，或将其直接写在页面上，减少HTTP请求；
- 压缩CSS、JS文件，缩短文件传输时间；
- 避免404错误：特别要避免给404指定一个停摆页面，否则所有404错误都将会加载一次页面；
- 一般要求减少DNS查询次数，如同一个页面的请求资源尽量少的使用不同的主机名，这可以减少网站并行下载的数量，但很多网站为了加速下载资源其实是特意用了多个主机名，这里要做一个权衡；
- 使用CDN加速，使用户从离自己最近的服务器下载文件；
- 减少Cookie的大小，使用无cookie的域，客户端请求静态文件的时候，减少 Cookie 的反复传输对主域名的影响；
- 为文件头指定Expires，使内容具有缓存性；
- 使用gzip压缩内容；
移动端性能优化
- 尽量使用css3动画，开启硬件加速。
- 适当使用touch事件代替click事件。
- 避免使用css3渐变阴影效果。
- 可以用
transform: translateZ(0)来开启硬件加速。 - 不滥用Float。Float在渲染时计算量比较大，尽量减少使用
- 不滥用Web字体。Web字体需要下载，解析，重绘当前页面，尽量减少使用。
- 合理使用requestAnimationFrame动画代替setTimeout
- CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过度使用会引发手机过耗电增加
相关阅读：如何做到一秒渲染一个移动页面
前端开发中，图像格式的区别？如何优化图像？
图像格式的区别
矢量图：图标字体，如 font-awesome；svg
位图：gif,jpg(jpeg),png
- gif，Graphics Interchange format，图形交换格式，是一种索引颜色格式，颜色少的情况下，产生的文件极小，支持背景透明，动画，图形渐进，无损压缩（适合线条，图标等），缺点只有256种颜色
- jpg，Joint Photograhic Experts Group（联合图像专家组），支持上百万种颜色，有损压缩，压缩比可达180：1，而且质量受损不明显，不支持图形渐进与背景透明，不支持动画
- png，可移植网络图形格式(Portable Network Graphic Format)，为替代gif产生的，位图文件，支持透明，半透明，不透明。不支持动画，无损图像格式。Png8简单说是静态gif，也只有256色，png24不透明，但不止256色。
- webp，谷歌开发的旨在加快图片加载速度的图片格式，图片压缩体积是jpeg的2/3，有损压缩。高版本的W3C浏览器才支持，如google39+，safari7+
优缺点：
1、能在保证最不失真的情况下尽可能压缩图像文件的大小。
2、对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。
优化图像
-
不用图片，尽量用css3代替。 比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。
-
使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！
-
使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。
基本上，内容图片多为照片之类的，适用于JPEG。
而修饰图片通常更适合用无损压缩的PNG。
GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。
-
按照HTTP协议设置合理的缓存。
-
使用字体图标webfont、CSS Sprites等。
-
用CSS或JavaScript实现预加载。
-
Wepp图片格式能给前端带来的优化。Wepp支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，非常适合用于网络等图片传输。
-
Base64
将图片转化为base64编码格式，资源内嵌于CSS或HTML中，不必单独请求。
Base64格式：data:[][;charset=][;base64]
Base64 在CSS中的使用
.demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAA L...."); }
Base64 在HTML中的使用
- 压缩图片
如何对网站的文件和资源进行优化?
- 文件合并
- 文件最小化/文件压缩
- 使用CDN托管
- 缓存的使用
- css文件放置在head，js放置在文档尾
- 在服务器端配置control-cache last-modify-date
- 在服务器配置Entity-Tag if-none-match
- 用更少的时间下载更多的文件，提高网站加载速度，提高用户体验，可以使用以下方法：
- css sprites----将小图片合并为一张大图片，使用background-position等css属性取得图片位置
- 将资源放在多个域名下
- 图片延迟加载
- 书写代码的时候要注意优化：
- css
- 将可以合并的样式合并起来，比如margin-top、margin-bottom等。
- 给img图片设置宽高，因为浏览器渲染元素的时候没有找到这两个参数，需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。
- js
少改变DOM元素，少触发reflow，可以复用的代码提出来写成公共的等等…… - img
优化图片，不失真的情况下尽量减少图片大小，使用iconfont等
- css
缓存和预加载的区别是什么？
缓存就是把请求过的数据缓存起来，下次请求的时候直接使用缓存内容，提高响应速度。
如何使用缓存？
- 可以基于http的头信息控制缓存
- ajax请求对早期的IE浏览器默认就是缓存的，可以通过时间戳防止缓存。Ajax调用都采用缓存调用方式，一般采用附加特征参数方式实现，注意其中的