在每个Web前端求职者的面试过程中，一定都有过被面试官问到项目中的难点，而答不上来的情况。为了让大家在Web前端面试前准备得更加充足，千锋武汉Web前端培训小编准备了一些易被忽视且难度较高的前端面试题，希望可以帮助大家更加顺利完成求职，找到自己满意的工作。

       1、流式布局如何实现，响应式布局如何实现？

       流式布局：也叫fluid，当上面一行的空间不够容纳新的TextView时候才开辟下一行的空间。场景：主要用于关键词搜索或者热门标签等场景；他主要是按照页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变，使用%百分比定义宽度，高度大都是用px来固定，可以根据可视区域和父元素的实时尺寸来调整，尽可能适应各种分辨率。

       响应式布局：主要是实现不同屏幕分辨率的终端上浏览网页的不同展示方式，通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验；首先设置meta标签，通过媒体查询来设置样式Media Queries，然后再设置多种试图宽度。

       2、什么是“use strict”，好处和坏处是什么？

       ECMAscript 5添加了第二种运行模式："严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。

       好处：消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为；消除代码运行的一些不安全之处，保证代码运行的安全；提高编译器效率，增加运行速度；为未来新版本的 Javascript 做好铺垫。注：经过测试IE6，7，8，9均不支持严格模式。

       缺点：现在网站的JS都会进行压缩，一些文件用了严格模式，而另一些没有。这时这些本来是严格模式的文件，被merge后，这个串就到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节。

       3、介绍一websocket。

       websocket是一种网络通信协议，是HTML5开始提供的一种在单个TCP连接上进行全双工通信的协议，这个对比着http协议来说，http协议是一种无状态的、无连接的、单向的应用层协议，通信请求只能由客户端发起，服务端对请求做出应答处理。http 协议无法实现服务器主动向客户端发起消息，Websocket连接允许客户端和服务器之间进行全双工通信，以便任一方都可以通过建立的连接将数据推送到另一端。WebSocket只需要建立一次连接，就可以一直保持连接状态。

       4、jquery如何绑定事件，有几种类型和区别？

       jquery 绑定事件的方法分别是：bind()，live()，delegate()和 on()，像bind()，live()，delegate()，随着jquery版本的更新，已经被移除。注意：bind()是在3.0版本之后被移除的，现在用的比较多的是on()，on()既可以绑定单事件，也可以绑定多事件，还可以进行事件委托。

       区别：bind()的事件绑定是只对当前页面选中的元素有效，对动态创建的元素bind()事件，是没有办法达到效果的，而其余三个可以。

       5、单页面应用有什么SEO方案？

       原因：较之于传统页面，单页应用需要先下载框架（数据 / 模板），然后才能开始加载数据、

       方案：服务器端渲染首屏（SSR基于vue的服务端下载）；让服务端把首屏的数据渲染在页面上；进行基本的css模板js的编译合并；减少请求次数，使用gulp工具，把css打包成一个文件，js打包成一个文件， 模板打包成一个js文件($templateCache) 可以和js文件打包成一起（促使模板JS文件和JS文件一次性请求）；代码分块，如果首屏不需要的块，就不用加载了；路由组件懒加载。当打包构建应用时，Javascript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样更加高效；如果有大量图片使用懒加载。

       以上就是千锋武汉Web前端培训小编总结的Web前端面试时被问到项目中的难点。如果还有对Web前端面试抱有疑问的小伙伴，来千锋武汉Web前端培训机构免费试听两周，让你亲身感受学习效果，了解学员的学习情况！