前端面试题集锦——前端综合问题

╰半夏微凉° 2022-04-12 09:12 322阅读 0赞

## 前端综合问题 ##

### 前端页面有哪三层构成，分别是什么?作用是什么? ###

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的分支）\]

详细文章：[浏览器内核的解析和对比][Link 1]

### 介绍一下你对浏览器内核的理解？ ###

主要分成两部分：渲染引擎(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
     *  条件判断`<! --[if !IE]>`

### 浏览器是如何渲染页面的？ ###

渲染的流程如下：

1.解析HTML文件，创建DOM树。

自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。

2.解析CSS。优先级：`浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式`；

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是不可避免的，只能尽量减小，常用的方法有：
    
    1.  尽量不用行内样式style属性，操作元素样式的时候用添加去掉class类的方式
    2.  给元素加动画的时候，可以把该元素的定位设置成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绑定等等；

详细版：

1.  浏览器会开启一个线程来处理这个请求，对 URL 分析判断如果是 http 协议就按照 Web 方式来处理;
2.  调用浏览器内核中的对应方法，比如 WebView 中的 loadUrl 方法;
3.  通过DNS解析获取网址的IP地址，设置 UA 等信息发出第二个GET请求;
4.  进行HTTP协议会话，客户端发送报头(请求报头);
5.  进入到web服务器上的 Web Server，如 Apache、Tomcat、Node.JS 等服务器;
6.  进入部署好的后端应用，如 PHP、Java、JavaScript、Python 等，找到对应的请求处理;
7.  处理结束回馈报头，此处如果浏览器访问过，缓存上有对应资源，会与服务器最后修改时间对比，一致则返回304;
8.  浏览器开始下载html文档(响应报头，状态码200)，同时使用缓存;
9.  文档树建立，根据标记请求所需指定MIME类型的文件（比如css、js）,同时设置了cookie;
10. 页面开始渲染DOM，JS根据DOM API操作DOM,执行事件绑定等，页面显示完成。

简洁版：

1.  浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
2.  服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
3.  浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
4.  载入解析到的资源文件，渲染页面，完成。

### 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属性为空：当值为空时，浏览器很可能会把当前页面当成其属性值加载；  
\- 正确的闭合标签：如避免使用`<div/>`，浏览器会多一个将它解析成`<div\></div\>`的过程；  
\- 链接为目录或首页的地址后面加”/”，如`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压缩内容；

### 移动端性能优化 ###

1.  尽量使用css3动画，开启硬件加速。
2.  适当使用touch事件代替click事件。
3.  避免使用css3渐变阴影效果。
4.  可以用`transform: translateZ(0)`来开启硬件加速。
5.  不滥用Float。Float在渲染时计算量比较大，尽量减少使用
6.  不滥用Web字体。Web字体需要下载，解析，重绘当前页面，尽量减少使用。
7.  合理使用requestAnimationFrame动画代替setTimeout
8.  CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过度使用会引发手机过耗电增加

相关阅读：[如何做到一秒渲染一个移动页面][Link 2]

### 前端开发中，图像格式的区别？如何优化图像？ ###

#### 图像格式的区别 ####

矢量图：图标字体，如 font-awesome；svg

位图：gif,jpg(jpeg),png

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

优缺点：

1、能在保证最不失真的情况下尽可能压缩图像文件的大小。

2、对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。

#### 优化图像 ####

1.  不用图片，尽量用css3代替。 比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。
2.  使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！
3.  使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。
    
    基本上，内容图片多为照片之类的，适用于JPEG。
    
    而修饰图片通常更适合用无损压缩的PNG。
    
    GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。
4.  按照HTTP协议设置合理的缓存。
5.  使用字体图标webfont、CSS Sprites等。
6.  用CSS或JavaScript实现预加载。
7.  Wepp图片格式能给前端带来的优化。Wepp支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，非常适合用于网络等图片传输。
8.  Base64
    
    将图片转化为base64编码格式，资源内嵌于CSS或HTML中，不必单独请求。

Base64格式：`data:[][;charset=][;base64]`

Base64 在CSS中的使用

`.demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAA    L...."); }`

Base64 在HTML中的使用

`<imgwidth="40"height="30"    src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." />`

1.  压缩图片

### 如何对网站的文件和资源进行优化? ###

1.  文件合并
2.  文件最小化/文件压缩
3.  使用CDN托管
4.  缓存的使用
5.  css文件放置在head，js放置在文档尾
6.  在服务器端配置control-cache last-modify-date
7.  在服务器配置Entity-Tag if-none-match
8.  用更少的时间下载更多的文件，提高网站加载速度，提高用户体验，可以使用以下方法：
    
    1.  css sprites----将小图片合并为一张大图片，使用background-position等css属性取得图片位置
    2.  将资源放在多个域名下
    3.  图片延迟加载
9.  书写代码的时候要注意优化：
    
    1.  css
        
         *  将可以合并的样式合并起来，比如margin-top、margin-bottom等。
         *  给img图片设置宽高，因为浏览器渲染元素的时候没有找到这两个参数，需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。
    2.  js  
        少改变DOM元素，少触发reflow，可以复用的代码提出来写成公共的等等……
    3.  img  
        优化图片，不失真的情况下尽量减少图片大小，使用iconfont等

### 缓存和预加载的区别是什么？ ###

缓存就是把请求过的数据缓存起来，下次请求的时候直接使用缓存内容，提高响应速度。

如何使用缓存？

1.  可以基于http的头信息控制缓存
2.  ajax请求对早期的IE浏览器默认就是缓存的，可以通过时间戳防止缓存。Ajax调用都采用缓存调用方式，一般采用附加特征参数方式实现，注意其中的`<script src=”xxx.js?{VERHASH}”`，`{VERHASH}`就是特征参数，这个参数不变化就使用缓存文件，如果发生变化则重新下载新文件或更新信息。

预加载指的是提前把需要的内容加载完成，访问的时候可以提高响应效率，比如图片的预加载（可以提前加载一定数量的图片，当用户访问图片的时候一般只看前几张，由于是预加载好的，所以速度比较快）

例如，可以通过js预先从服务加载图片资源(动态创建Image，设置src属性)，只要浏览器把图片下载到本地，就会被缓存，再次请求相当的src时就会优先寻找浏览器缓存，提高访问速度。

### cookies 是干嘛的，服务器和浏览器之间的 cookies 是怎么传的，httponly 的 cookies 和可读写的 cookie 有什么区别，有无长度限制 ###

参考资料：[HTTP-服务器端CooKie与浏览器端Cookie][HTTP-_CooKie_Cookie]

#### Cookie的来源 ####

由于HTTP协议是无状态的，而服务器端的业务必须是要有状态的。Cookie诞生的最初目的是为了存储web中的状态信息，以方便服务器端使用。比如判断用户是否是第一次访问网站。目前最新的规范是RFC 6265，它是一个由浏览器服务器共同协作实现的规范。

#### 服务器和浏览器之间的 cookies传递 ####

1.  服务器向客户端发送cookie
2.  浏览器将cookie保存
3.  之后每次http请求浏览器都会将cookie发送给服务器端
4.  服务端会根据cookie信息来识别状态（之前是否访问过）

#### cookie格式 ####

Set-Cookie: “name=value;domain=.domain.com;path=/;expires=Sat, 11 Jun 2016 11:29:42 GMT;HttpOnly;secure”

其中name=value是必选项，其它都是可选项。Cookie的主要构成如下：

name:一个唯一确定的cookie名称。通常来讲cookie的名称是不区分大小写的。
    value:存储在cookie中的字符串值。最好为cookie的name和value进行url编码
    domain:cookie对于哪个域是有效的。所有向该域发送的请求中都会包含这个cookie信息。这个值可以包含子域(如：yq.aliyun.com)，也可以不包含它(如：.aliyun.com，则对于aliyun.com的所有子域都有效).
    path: 表示这个cookie影响到的路径，浏览器跟会根据这项配置，像指定域中匹配的路径发送cookie。
    expires:失效时间，表示cookie何时应该被删除的时间戳(也就是，何时应该停止向服务器发送这个cookie)。如果不设置这个时间戳，浏览器会在页面关闭时即将删除所有cookie；不过也可以自己设置删除时间。这个值是GMT时间格式，如果客户端和服务器端时间不一致，使用expires就会存在偏差。
    max-age: 与expires作用相同，用来告诉浏览器此cookie多久过期（单位是秒），而不是一个固定的时间点。正常情况下，max-age的优先级高于expires。
    HttpOnly: 告知浏览器不允许通过脚本document.cookie去更改这个值，同样这个值在document.cookie中也不可见。但在http请求张仍然会携带这个cookie。注意这个值虽然在脚本中不可获取，但仍然在浏览器安装目录中以文件形式存在。这项设置通常在服务器端设置。
    secure: 安全标志，指定后，只有在使用SSL链接时候才能发送到服务器，如果是http链接则不会传递该信息。就算设置了secure 属性也并不代表他人不能看到你机器本地保存的 cookie 信息，所以不要把重要信息放cookie就对了

#### cookie 和session 的区别 ####

1、cookie数据存放在客户的浏览器上，session数据放在服务器上。

2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗

考虑到安全应当使用session。

3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能

考虑到减轻服务器性能方面，应当使用COOKIE。

4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

5、所以个人建议：

将登陆信息等重要信息存放为SESSION
    
    其他信息如果需要保留，可以放在COOKIE中

#### Cookie的优缺点 ####

优点：极高的扩展性和可用性

1. 通过良好的编程，控制保存在cookie中的session对象的大小。
    2. 通过加密和安全传输技术（SSL），减少cookie被破解的可能性。
    3. 只在cookie中存放不敏感数据，即使被盗也不会有重大损失。
    4. 控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

缺点：

1. `Cookie`数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。
    
    2. 安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
    
    3. 有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

#### Cookie的弊端 ####

cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。

*  每个特定的域名下最多生成20个cookie
    
    1.  IE6或更低版本最多20个cookie
    2.  IE7和之后的版本最后可以有50个cookie。
    3.  Firefox最多50个cookie
    4.  chrome和Safari没有做硬性限制
 *  IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。
 *  cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节。

IE 提供了一种存储可以持久化用户数据，叫做userdata，从IE5.0就开始支持。每个数据最多128K，每个域名下最多1M。这个持久化数据放在缓存中，如果缓存没有清理，那么会一直存在。

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

如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，所以不如隔离开。

因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。

同时这种方式不会将cookie传入Web Server，也减少了Web Server对cookie的处理分析环节，提高了webserver的http请求的解析速度。

#### 注意 ####

*  Cookie是存储在浏览器中的一段纯文本信息，建议不要存储敏感信息如密码，因为电脑上的浏览器可能被其它人使用
 *  Cookie基于域名安全，不同域名的Cookie是不能互相访问的
    
     *  如访问itcast.cn时向浏览器中写了Cookie信息，使用同一浏览器访问baidu.com时，无法访问到itcast.cn写的Cookie信息
     *  浏览器的同源策略
 *  如果在Cookie中设置了"HttpOnly"属性，那么通过程序(JS脚本、Applet等)将无法读取到Cookie信息，这样能有效的防止XSS攻击。
 *  单个cookie保存的数据不能超过4K
 *  secure属性是防止信息在传递的过程中被监听捕获后信息泄漏，HttpOnly属性的目的是防止程序获取cookie后进行攻击。

### 常见web安全及防护原理 ###

每次向服务器发送数据时，都需要考虑安全性。到目前为止，HTML表单是最常见的攻击媒介(可能发生攻击的地方)。这些问题从来都不是来自HTML表单本身，它们来自于服务器如何处理数据。

根据你所做的事情，你会遇到一些非常有名的安全问题：

#### XSS 和 CSRF ####

跨站脚本(cross-site scripting，XSS)和跨站点请求伪造(Cross-Site Request Forgeries，CSRF)是常见的攻击类型，它们发生在当您将用户发送的数据显示给用户或另一个用户时。

XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。  
CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。

##### XSS #####

XSS允许攻击者将客户端脚本注入到其他用户查看的Web页面中。攻击者可以使用跨站点脚本攻击的漏洞来绕过诸如[同源策略][Link 3]之类的访问控制。这些攻击的影响可能从一个小麻烦到一个重大的安全风险。

比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。

##### CSRF #####

CSRF攻击类似于XSS攻击，因为它们以相同的方式攻击——向Web页面中注入客户端脚本——但它们的目标是不同的。CSRF攻击者试图将特权升级到特权用户(比如站点管理员)的权限，以执行他们不应该执行的操作(例如，将数据发送给一个不受信任的用户)。

要完成一次CSRF攻击，受害者必须依次完成两个步骤：

1.  登录受信任网站A，并在本地生成Cookie。
2.  在不登出A的情况下，访问危险网站B。

##### XSS 和 CSRF的区别 #####

XSS攻击利用用户对web站点的信任，而CSRF攻击则利用网站为其用户提供的信任。

XSS是获取信息，不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。

##### 防范方法 #####

为了防止这些攻击，您应该始终检查用户发送给服务器的数据(如果需要显示)，尽量不要显示用户提供的HTML内容。相反，您应该处理用户提供的数据，这样您就不会逐字地显示它。当今市场上几乎所有的框架都实现了一个最小的过滤器，它可以从任何用户发送的数据中删除HTML[`<script>`][script]、[`<iframe>`][iframe] 和[`<object>`][object] 元素。这有助于降低风险，但并不一定会消除风险。

**XSS防范方法**

1.  代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过滤；其次任何内容写到页面之前都必须加以encode，避免不小心把html tag 弄出来。这一个层面做好，至少可以堵住超过一半的XSS 攻击。
2.  避免直接在cookie 中泄露用户隐私，例如email、密码等等。
3.  通过使cookie 和系统ip 绑定来降低cookie 泄露后的危险。这样攻击者得到的cookie 没有实际价值，不可能拿来重放。如果网站不需要再浏览器端对cookie 进行操作，可以在Set-Cookie 末尾加上HttpOnly 来防止javascript 代码直接获取cookie 。
4.  尽量采用POST 而非GET 提交表单

**CSRF的防御**

服务端的CSRF方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数。比如通过验证码的方法。

#### SQL注入 ####

SQL注入就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。

SQL 注入是一种试图在目标web站点使用的数据库上执行操作的攻击类型。这通常包括发送一个SQL请求，希望服务器能够执行它（通常，当应用服务器试图存储由用户发送的数据时）。这实际上是[攻击网站的主要途径之一][Link 4]。

其后果可能是可怕的，从数据丢失到通过使用特权升级控制整个网站基础设施的攻击。这是一个非常严重的威胁，您永远不应该存储用户发送的数据，而不执行一些清理工作(例如，在php/mysql基础设施上使用`[mysql_real_escape_string()](http://www.php.net/manual/en/function.mysql-real-escape-string.php "http://www.php.net/manual/en/function.mysql-real-escape-string.php")`。

sql注入防护总的来说有以下几点：

1.  永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等。
2.  永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。
3.  永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。
4.  不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息。

#### HTTP数据头注入和电子邮件注入 ####

当您的应用程序基于表单上用户的数据输入构建HTTP头部或电子邮件时，就会出现这种类型的攻击。这些不会直接损害您的服务器或影响您的用户，但是它们是一个更深入的问题，例如会话劫持或网络钓鱼攻击。

这些攻击大多是无声的，并且可以将您的服务器变成[僵尸][Link 5]。

#### 偏执:永远不要相信你的用户 ####

那么，你如何应对这些威胁呢?最重要的原则是:永远不要相信你的用户，包括你自己；即使是一个值得信赖的用户也可能被劫持。

所有到达服务器的数据都必须经过检查和消毒。总是这样。没有例外。

*  有潜在危险的字符转义。应该如何谨慎使用的特定字符取决于所使用的数据的上下文和所使用的服务器平台，但是所有的服务器端语言都有相应的功能。
 *  限制输入的数据量，只允许有必要的数据。
 *  沙箱上传文件(将它们存储在不同的服务器上，只允许通过不同的子域访问文件，或者通过完全不同的域名访问文件更好)。

如果你遵循这三条规则，你应该避免很多问题，但是如果你想要得到一个有能力的第三方执行的安全检查，这是一个好主意。不要以为你已经看到了所有可能的问题。

### WEB应用从服务器主动推送Data到客户端有哪些方式？ ###

*  html5提供的Websocket
 *  不可见的iframe
 *  WebSocket通过Flash
 *  XHR长时间连接
 *  XHR Multipart Streaming
 *  `<script>`标签的长时间连接(可跨域)

### 请谈下团购倒计时如何实现？ ###

团购倒计时页面端的效果比较好实现，主要是样式和时间的操作，重要的考虑时间要和服务器端同步，其实这个效果也可以基于服务器端推送技术来实现

### 知道什么是SEO并且怎么优化么? 知道各种meta data的含义么? ###

优化：

*  语义化html标签
 *  合理的title, description, keywords;
 *  重要的html代码放前面
 *  少用iframe, 搜索引擎不会抓取iframe中的内容
 *  图片加上alt

### 字符串拼接和模板引擎，项目中会如何操作？模板引擎会不会利于SEO优化？ ###

简单的数据渲染，拼接字符串即可，稍微复杂的业务逻辑使用前端模板引擎，过于复杂的页面基本上使用后台渲染的方式；模板引擎会影响SEO优化，为了解决这个问题，需要关注SEO的页面最好采用后台渲染的方式。

### 轮播图有哪几种？如何实现？ ###

纯css可以实现轮播图；js实现轮播图

### 简述移动开发的注意点,如何做好不同手机的适配,你以前的项目是怎么做的? ###

1、单独做移动端项目，采用百分比布局

2、采用响应式的方式做适配

27、响应式布局的时候，轮播图使用两张不同的图片去适配大屏幕和超小屏幕，还是一张图片进行压缩适配不同终端，说明原因？

最好使用两张不同大小的图片去适配大屏幕和超小屏幕，这样可以针对不同设备的屏幕大小，来加载响应的图片，减少超小屏幕设备的网络流量消耗，加快响应速度，同时防止图片在大屏幕下分辨率不够导致失真的问题。

### 如何设计突发大规模并发架构？ ###

### 部分地区用户反应网站很卡，请问有哪些可能性的原因，以及解决方法？ ###

### 从打开app到刷新出内容，整个过程中都发生了什么，如果感觉慢，怎么定位问题，怎么解决? ###

### 设计一个系统，实现统计网站中每个URL访问到的次数(pv)，以及访问的独立用户数(uv)，其中每个独立网页以URL为key，每个独立用户以ip为key？ ###

[Link 1]: http://www.cnblogs.com/fullhouse/archive/2011/12/19/2293455.html
[Link 2]: https://github.com/cssmagic/blog/issues/20
[HTTP-_CooKie_Cookie]: https://blog.csdn.net/qiqingjin/article/details/51760343
[Link 3]: https://developer.mozilla.org/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript
[script]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script
[iframe]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe
[object]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/object
[Link 4]: https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project
[Link 5]: http://en.wikipedia.org/wiki/Zombie_%28computer_science%29