web前端面试常考问题——持续更新中(5.20)

        1.介绍一下你的技术栈
            HTML5 + CSS3 + ES6 + Jquery + React + Webpack + git + npm ....

        2.简单自我介绍

        3.电商网站怎样做优化，提高加载速度？

        4.什么是同源策略，如何实现跨域？
            同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

            同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。若地址里面的协议、域名和端口号均相同则属于同源。

            如何实现跨域？

            jsonp跨域、nginx反向代理、node.js中间件代理跨域、后端设置http header、后端在服务器上设置cors。

            1.jsonp实现跨域
               


            2.跨域资源共享（CORS）

            https://segmentfault.com/a/1190000011145364


        5.什么CSS放前面，JS脚本放后面？

            下载某一个js时其他任务是暂停的，需要等这个JS下载并执行完毕后再下载其他的。


        6.http协议中 GET和POST有什么区别，分别适用什么场景？
            

        7. http 状态码 200 302 304 403 404 500分别代表什么？
                1 消息类
                    100  Continue   继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息

                2 成功
                    200  OK         正常返回信息
                    201  Created    请求成功并且服务器创建了新的资源
                    202  Accepted   服务器已接受请求，但尚未处理

                3 重定向
                    301 Moved Permanently  请求的网页已永久移动到新位置。
                    302 Found       临时性重定向。
                    303 See Other   临时性重定向，且总是使用 GET 请求新的 URI。
                    304  Not Modified 自从上次请求后，请求的网页未修改过。 

                4 错误，一般是指客户端错误
                    400 Bad Request  服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
                    401 Unauthorized 请求未授权。
                    403 Forbidden   禁止访问。
                    404 Not Found   找不到如何与 URI 相匹配的资源。

                5 6 服务器错误
                    500 Internal Server Error  最常见的服务器端错误。
                    503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。


        8.什么是XSS CSRF攻击，如何防范？


        9.一个页面从输入URL到加载显示完成，这个过程发生了什么？
            简洁版：
                1.浏览器根据请求的URL交给DNS域名解析，找到真实的IP，向服务器发起请求；
                2.服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、CSS、JavaScript等）；
                3.浏览器对加载到的资源（HTML、CSS、JavaScript等）进行语法解析，构建相应的内部数据结构（DOM树、CSS树、render树等）；
                4.载入解析到的资源文件、渲染页面、完成。


            详细版：
                1.首先浏览器开启一个线程来处理这个请求，对URL分析判断，如果是http协议就按照Web方式来处理；
                2.其次浏览器会对URL进行解析，一般包括（协议头、主机域名或IP地址、端口号、请求路径、查询参数、hash等），然后开启网络线程发出一个完整到http请求；
                3.当然一般我们输入的URL是服务器域名，这时就需要DNS通过域名查询得到对应的IP；
                4.DNS首先会查看浏览器DNS缓存，没有就查询计算机本地DNS缓存，还没有就询问递归式DNS服务器（即网络提供商，一般这个服务器都会有自己的缓存，所以IP查询一般在这里完成），如果没有缓存，那就需要通过根域名和TLD域名服务器指到对应的权威DNS服务器找回记录，并缓存到递归式服务器，然后递归服务器在将记录返回给本地。
                5.有了IP地址，此时网络层便会通过IP地址寻的对应服务器的物理地址
                6.寻得服务器地址，客户端在网络传输层便可以和服务器通过三次握手建立tcp\ip连接
                7.连接建立后网络数据链路层将数据包装成帧；
                8.最后物理层利用物理介质进行传输；
                9.到了服务器，就会通过相反的方式将数据一层一层的还原回去；
                10.请求到了后台服务器，一般会有统一的验证，如安全验证、跨域验证等，验证未通过就直接返回相应的http报文
                11.验证通过后，就会进入后台代码，此时程序收到请求，然后执行对应的操作（如查询数据库等）；
                12.如果浏览器访问过，且缓存上有对应的资源，便会与服务器最后修改时间对比，一致便返回304，告诉浏览器可使用本地缓存；
                13.前端浏览器接收到响应成功的报文后便开始下载网页
                14.下载完的网页将被交给浏览器内核（渲染进程）进行处理：
                    1. 根据顶部定义的DTD类型进行对应的解析方式；
                    2. 渲染进程内部是多线程的，网页的解析将会被交给内部的GUI渲染线程处理；
                    3. 首先渲染线程中的HTML解释器，将HTML网页和资源从字节流解释转换成字符流；
                    4. 再通过词法分析器将字符流解释成词语；
                    5. 之后经过语法分析器根据词语构建成节点；最后通过这些节点组建一个DOM树；
                    6. 这个过程中，如果遇到的DOM节点是JavaScript代码，就会调用JavaScript引擎对JavaScript代码进行解释执行，此时由JavaScript引擎和GUI渲染线程的互斥，GUI渲染线程就会被挂起，渲染过程停止；如果JavaScript代码的运行中对DOM树进行了修改，那么DOM的构建需要从新开始；
                    7. 如果节点需要依赖其他资源，如（图片，CSS等），便会调用网络模块的资源加载器来加载它们，但它们是异步的，不会阻塞当前DOM树的构建；
                    8. 如果遇到的是JavaScript资源URL（没有标记异步），则需要停止当前DOM的构建，直到JavaScript的资源加载并被JavaScript引擎执行后才继续构建DOM；
                    9. 对于CSS，CSS解释器会将CSS文件解释成内部表示结构，生成CSS规则树；
                    10. 然后合并CSS规则树和DOM树，生成render渲染树；
                    11. 最后对render树进行布局和绘制，并将结果通过IO线程传递给Browser控制进程进行显示。

        10.常用正则表达式


            //验证邮箱
            /^w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/


            //验证手机号
            /^1[3|5|8|7]d{9}$/


            //验证URL
            /^http://.+./


            //验证身份证号码
            /(^d{15}$)|(^d{17}([0-9]|X|x)$)/


        11.什么是渐进增强和优雅降级？


            * 渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。


            * 优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容


        12.请解释什么是事件代理


            * 事件代理（Event Delegation），又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能


        13.常见浏览器内核有哪些？
           * Blink内核：新版 Chrome、新版 Opera
           * Webkit内核：Safari、原Chrome
           * Gecko内核：FireFox、Netscape6及以上版本
           * Trident内核（又称MSHTML内核）：IE、国产浏览器
           * Presto内核：原Opera7及以上


        14.请说说对MVC，MVP和MVVM的理解


            * MVC即model\view\controller，是最常见的软件架构模式。view是指用户界面，controller则处理业务逻辑，而model则用来存储数据。view传送指令到controller，controller完成业务逻辑后要求model改变状态，model将新数据发送给view，使用户得到反馈。各部分的通信都是单向的。


            * MVP将controller改为presenter，在这种模式中，各个部分之间的通信都是双向的。view与model不发送直接联系，都通过presenter传递。view非常薄，不部署任何业务逻辑，而presenter非常厚。


            * MVVM将presenter改为viewModel，和MVP模式非常相似，唯一的区别在于它是双向绑定，view改变，自动反应在viewModel上，反之亦然。




        15. 重绘和回流（考察频率：中）


            * 重绘：当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。


            * 回流：当Render Tree（DOM）中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。


            回流要比重绘消耗性能开支更大。
            回流必将引起重绘，重绘不一定会引起回流
        
        16.浏览器渲染页面过程：


            * 根据 HTML 结构生成 DOM 树
            * 根据 CSS 生成 CSSOM
            * 将 DOM 和 CSSOM 整合形成 RenderTree
            * 根据 RenderTree 开始渲染和展示
            * 遇到script标签时，会执行并阻塞渲染




        17.介绍一下你对浏览器内核的理解


            主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。


            * 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。


            * JS引擎则：解析和执行javascript来实现网页的动态效果。


            * 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
        
        18.你有用过哪些前端性能优化的方法？


            （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布局慢。对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。


        19.如何做SEO优化？


            (1)网站结构布局优化：尽量简单、开门见山，提倡扁平化结构。
                1. 控制首页链接数量
                2.扁平化的目录层次，尽量让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页
                3.导航优化
                4. 网站的结构布局--不可忽略的细节
                    　　页面头部：logo及主导航，以及用户的信息。
                    　　页面主体：左边正文，包括面包屑导航及正文；右边放热门文章及相关文章，好处：留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关链接，增强了页面相关性，也能增强页面的权重。
                    　　页面底部：版权信息和友情链接。
                    　　特别注意：分页导航写法，推荐写法：“首页 1 2 3 4 5 6 7 8 9 下拉框”，这样“蜘蛛”能够根据相应页码直接跳转，下拉框直接选择页面跳转。而下面的写法是不推荐的，“首页 下一页 尾页”，特别是当分页数量特别多时，“蜘蛛”需要经过很多次往下爬，才能抓取，会很累、会容易放弃。
            　　 5.控制页面的大小，减少http请求，提高网站的加载速度。
                　　一个页面最好不要超过100k，太大，页面加载速度慢。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛”也会离开。


            (2)网页代码优化
            　　1.