前端面试被问到项目中的难点有哪些?_前端面试被问到项目中难点-程序员宅基地

技术标签: 面试  websocket  前端  

在每个前端求职者的面试过程中,一定都有过被面试官问到项目中的难点,而答不上来的情况。为了让大家在前端面试前准备得更加充足,小编准备了一些易被忽视且难度较高的前端面试题。

希望可以帮助大家更加顺利完成求职,找到自己满意的工作。

前端面试被问到的难点

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 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样更加高效;如果有大量图片使用懒加载。

以上就是前端面试被问到项目中的难点。如果还有对前端面试抱有疑问的小伙伴,可以私信我。相信对大家的面试会有很大的帮助。

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Blue92120/article/details/121695089

智能推荐

微信小程序电子签名及图片生成_电子签名小程序-程序员宅基地

文章浏览阅读8.5k次,点赞17次,收藏129次。实现在小程序内安全有效的电子签名,实名认证,图片传输。_电子签名小程序

Logback日志框架使用_logback依赖-程序员宅基地

文章浏览阅读5.6k次,点赞4次,收藏37次。Logback是在log4j的基础上重新开发的一套日志框架,是完全实现SLF4J接口API(也叫日志门面)。Logback 的架构非常通用,可以应用于不同的环境。目前logback分为三个模块,logback-core,logback-classic和logback-access。logback-core模块为其他两个模块奠定了基础。logback-classic模块原生实现了SLF4JAPI,因此您可以轻松地在logback和其他日志记录框架(例如 log4j1.x或java.util.log...._logback依赖

Red Hat 6.5 虚拟机——离线Python环境配置_redhat6.5 安装python-程序员宅基地

文章浏览阅读330次。第一章 在win 10 上 安装 Red Hat 6.5 虚拟机——测试环境配置第二章 Python环境安装第三章 tiff文件操作第四章 numpy库操作矩阵第五章 图像拼接_redhat6.5 安装python

C语言字符串_c 字符-程序员宅基地

文章浏览阅读2.7k次。文章目录字符串:1、c语言中表示一个字符串:字符串的输入和输入:如何用scanf输入带空格的字符串?2、char型指针和char型数组的区别3、字符串长度获取strlen4、字符串拷贝strcpy5、字符串拼接strcat注意:要求前面字符串申请的地址空间足够长,必须容纳两个字符串,否则会越界6、字符串的比较strcmp字符串比较是要区分大小写strncmp比较的是前n个字符相不相同,而不是第n个字符相不相同7、strstr判断字符串时候有某个字符串8、strtok 分割字符串 同sscanf9、strch_c 字符

解决win11家庭版无法使用cmd文件或bat文件问题_win11系统cmd打不开-程序员宅基地

文章浏览阅读6.4k次,点赞3次,收藏7次。a、创建用户变量 %Path% ,值为 C:/windows/system32。下面图文说明cmd文件无法执行的解决方法,bat文件同理。b、修改path 变量,添加 %Path%2、创建并编辑hyper-v.cmd文件。3、经验证,cmd文件可执行了。_win11系统cmd打不开

FTP上传文件经常中断或超时的解决方案-程序员宅基地

文章浏览阅读1.5w次。近日做了一个简单的活,就是把一个phpcms建的网站整站迁移到另一个空间上。原本应该是很简单的事情,无奈却处处碰壁,遇到各种问题。终于在今天把所有问题解决,特撰写此文以留纪念,同时这里面遇到的一些问题的解决方法希望能给需要的朋友一些帮助。任务:把用所在A服务器的A1域名下的phpcms所建的网站迁移到B服务器下B1域名下。环境:普通家用1.5..._为什么向服务器上上传数据总是中断

随便推点

计算机网络的组成及通信子网和资源子网的划分_计算机网络可以分为通信子网和资源子网-程序员宅基地

文章浏览阅读1k次。网络操作系统:是网络软件的重要组成部分,是进行网络系统管理和通信控制的所有软件的集合,负责整个网络软件,硬件资源的管理以及网络通信和任务的调度,并提供用户与网络之间的接口,常用的网络操作系统有:Windows,Linux,Unix,netwear等。网络接口卡:简称网卡,又称为网络适配器,主要负责主机与网络之间的信息传输控制,功能是线路传输控制,如堵塞,冲突等,差错检测与恢复,代码转换以及数据帧的装配与拆装等。传输介质:用于将网络中各种设备连接起来,是数据传输的物理通道,有有线传输介质和无线传输介质之分。_计算机网络可以分为通信子网和资源子网

STM32-深入理解GPIO的8种工作模式_otg_fs_gccfg-程序员宅基地

文章浏览阅读4.6k次,点赞14次,收藏104次。对STM32中GPIO的8种工作模式做一个详细的说明_otg_fs_gccfg

python绘制有误差线的折线图_plt 带误差带的折线图-程序员宅基地

文章浏览阅读1.3w次,点赞8次,收藏44次。数据如上import pandas as pdimport numpy as npimport matplotlib.pyplot as pltimport matplotlib.font_manager as fm#读取数据data = pd.read_excel(r'C:\Users\Administrator\Desktop\图(1).xlsx',sheet_name = 5)..._plt 带误差带的折线图

vim :ctags+cscope_vim与ctags/cscope-程序员宅基地

文章浏览阅读424次。 转自:http://www.cnblogs.com/sunblackshine/archive/2011/08/25/2152962.html + http://easwy.com/blog/ 使用vim + cscope/ctags,就能够实现Source Insight的功能,可以很方便地查看分析源代码。 关键词: vim, cscope, ctags, tags ..._vim与ctags/cscope

ue4-shader-自定义shader代码hlsl_ue4 hlsl sample-程序员宅基地

文章浏览阅读6.4k次,点赞3次,收藏27次。title: ue4-shader-自定义shader代码hlslcategories: UnrealEngine4tags: [ue4, shader, hlsl]date: 2019-05-01 00:14:31comments: falseue4-shader-自定义shader代码hlsl前篇Shader Development - https://docs.un..._ue4 hlsl sample

python集合(set)类型_python set size-程序员宅基地

文章浏览阅读1.5w次,点赞2次,收藏8次。集合(set)快速访问集合(set)涉及修改集合数据的相关函数以及运算符—程序说明集合(set)帮助文档_python set size

推荐文章

热门文章

相关标签