web相关题目

你觉得前端工程师的价值体现在哪？

• 为简化用户使用提供技术支持（交互部分）
• 为多个浏览器兼容性提供支持
• 为提高用户浏览速度（浏览器性能）提供支持
• 为跨平台或者其他基于webkit或其他渲染引擎的应用提供支持
• 为展示数据提供支持（数据接口）

谈谈性能优化问题

代码层面：避免使用css表达式，避免使用高级选择器，通配选择器。
缓存利用：缓存ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等
请求数量，合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。
请求带宽：压缩文件，开启GZIP。

代码层的优化

• 用hash-table来优化查找
• 少用全局变量
• 用 innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
• 用setTimeout来避免页面失去相应
• 缓存DOM节点查找结果
• 避免使用css Expression
• 避免全局查询
• 避免使用with（with会创建自己的作用域，会增加作用域链长度）
• 多个变量声明合并
• 避免图片和iFrame等空src，空src会重新加载当前页面，影响速度和效率
• 尽量避免在HTML标签中些Style属性

移动端性能优化

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

HTTP和HTTPS？

http协议通常承载于TCP协议之上，在http和tcp之间添加一个安全协议层（SSL或TSL），这个时候就成了我们常说的HTTPS。
默认http的端口号为80，https的端口号为443。

为什么HTTPS安全？

因为网络请求需要中间有很多服务器路由器的转发，中间的节点都可能篹该信息，而如果使用https，密钥在你和终点站才有。https之所以比http安全，是因为它利用ssl或tsl传输。它包含证书、卸载、流量转发、负载均衡、页面适配、浏览器适配、refer传递等，保证了传输过程的安全性。

请谈谈cookie的弊端？

cookie虽然在持久保持客户端数据提供了方便，分担了服务器存储的负担，但还有很多局限性。
第一： 每个特定的域名下最多生成20个cookie
1.IE或最低版本最多20个cookie
2.IE7和之后的版本最多可以有50个cookie
3.Firefox最多50个cookie
4.Chrome和Safari没有做硬性限制
IE和opera会清理近期最少使用的cookie，firefox会随机清理cookie。
cookie最大约为4096字节，为了兼容性，一般不能超过4095字节。

优点：极高的扩张性和可用性。

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

缺点

1.cookie数量和长度的限制。每个domain最多只能有20个cookie，每个cookie长度不能超过4kb，否则会被截掉。
2.安全性问题，如果cookie被人拦截了，那人就可以取得所有的session信息，即使加密也于事无补，因为拦截者并不需要直到cookie的意义，他只要原样转发cookie就可以达到目的。

3. 有些状态不可能保存在客户端，例如为了防止重复提交表单，我们需要在服务器端保存一个计数器，如果我们把这个计数器保存在客户端，那么他起不到任何作用。

浏览器本地存储有哪些？

html5中web Storage包括了两种存储方式：sessionStorage和localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁，因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
web storage和cookie的区别
web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。cookie的大小是受限的，并且每次请求一个新的页面的时候cookie都会被发送过去，这样无形中浪费了宽带，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，web Storage拥有setItem，getItem，removeItem，clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
但是cookie也是不可以或缺的：cookie的作用是与服务器进行交互，作为http规范的一部分而存在，而webStorage仅仅是为了在本地存储数据而生。
浏览器的支持除了IE7及以下不支持外，其他标准浏览器都完全支持（ie及ff需在web服务器里运行），值得一提的是IE总是办好事，例如IE7、IE6中的userData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web Storage。
localStorage和seesionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等。

cookie和session的区别：

1.cookie数据存放在客户的浏览器上，session数据放在服务器上。
2.cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全应当使用session。
3.session会在一定时间内保存在服务器上，当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用cookie。
4.单个cookie保存的数据不能超过4kb，很多浏览器都限制一个站点最多保存20个cookie。
5.所以个人建议：

• 将登陆信息等重要信息存放session
• s 其他信息如果需要保留，可以放在cookie中

如何实现浏览器内多个标签之间的通信？

调用localstorage、cookies等本地存储方式

一个页面从输入URL到页面加载显示完成，这个过程中都发生了生么？

分为4个步骤：

1. 当发送一个URL请求时，不管这个URL是web页面的URL还是web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询，这能使浏览器获得请求对应的IP地址。
2. 浏览器与远程web服务器通过“TCP”三次握手协商来建立一个‘TCP／IP’连接，该握手包括一个同步报文，一个同步应答报文和一个应答报文，这三个报文在浏览器和服务器之间传递，该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
3. 一旦‘TCP／IP’连接建立，浏览器会通过该连接向远程服务器发送‘HTTP’的‘get’请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。
4. 此时，‘web’服务器提供资源服务，客户端开始下载资源。
   请求返回后便进入了我们关注的前端模块
   简单来说，浏览器会解析‘HTML’生成‘DOM Tree’，其次会根据css生成Rule Tree，而‘javascript’又可以根据DOM API操作DOM