WEB前端面试之浏览器相关

• 浏览器有哪些常见的兼容问题？

1. 不同浏览器的内外补丁不同

        解决方法：通配符

*{
    margin:0;
    padding:0;
}

    2.浮动元素float，若有横向margin，则在IE6显示下margin会变大

        解决方法：在float元素标签样式中写display：inline

    3.若元素的宽高小于5px，在IE6显示下其实会比5px大

        解决方法：overflow：hidden；

• IE浏览器与其他浏览器的不同

1. 阻止事件冒泡 IE：window.event.cancleBubble=true;     非IE:e.stopPra...
2. 阻止默认事件 IE：window.event.returnVlaue=false;     非IE：e.preventDefault
3. 获取鼠标点击位置 IE：event.ClientX    非IE：event.PageX
4. innerText使用 IE:使用innerText    非IE:使用Textcontent

• web安全防护及原理

1. sql注入原理

        通过sql命令插入到web表单递交或输入域名或页面请求的查询字符串，最终欺骗服务器执行恶意的Sql命令

        解决方法：1.对用户输入进行校验，限制长度等

                         2.不要使用动态拼装sql，可以使用参数化Sql或直接使用存储过程进行数据查询存取

                         3.不要使用管理员权限的数据库连接

                         4.不要把机密信息明文存放

    2.xss:攻击者往Web页面里插入恶意html标签或js代码（如：在论坛中放一个恶意连接，用户点开后，获取用于的cookie信息）

        解决方法：1.采用post而不是get

                            post月get的区别：（1）get通常用来接收数据，post用来发送数据

                                                          （2）get传输数据上有长度限制，而post没有

                                                          （3）get请求参数会留在浏览器上，而post不会

                        2.避免直接在cookie泄漏用户的隐私

    3.CSRF xss与csrf的区别：xss获取信息，不需要提前知道其他用户页面的代码和数据包

                                           csrf代替用户完成指定动作，需要知道其他用户页面的代码和数据包

        解决方法：1.在客户端页面增加伪随机数

                         2.通过验证码的方法

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

1. 浏览器开启一个线程来处理这个url请求，同时在远程的DNS服务器上启动一个DNS查询，获得请求对应的IP地址
2. 浏览器与远程Web服务器建立TCP连接
3. 通过该TCP连接向远程服务器发送'HTTP'的'get'请求，远程服务器找到资源并使用HTTP响应返回该资源
4. Web服务器提供资源服务，客户端开始下载资源
5. 接下里就是前端模块，浏览器解析HTML生成DOM树，再根据CSS渲染生成CSS DOM树，根据JSS生成DOM API操作。

• 浏览器本地存储

    在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在html5中提供了localStorage来取代globalStorage。 

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

•  sessionStorage、localStorage和cookie的区别

1. Web Storage是为了更大容量存储而设计的，cookie有大小限制
2. 每次请求新页面的时候，cookie都会被发送过去
3. cookie需要作用域，不可以跨域访问
4. cookie需要前端开发者自己封装setCookie和getCookie，而Web Storage有自己的方法，如setItem，getItem