前端工程师查看招聘要求的细节问题了解

最新推荐文章于 2023-05-09 01:53:22 发布

进击的你

最新推荐文章于 2023-05-09 01:53:22 发布

阅读量401

点赞数 1

分类专栏：前端工程师的自检清单前端问题面试文章标签：面试前端经验分享

本文链接：https://blog.csdn.net/zxcv19961204/article/details/117190807

版权

前端问题同时被 3 个专栏收录

51 篇文章 1 订阅

订阅专栏

前端工程师的自检清单

16 篇文章 4 订阅

订阅专栏

面试

1 篇文章 0 订阅

订阅专栏

前端招聘细节问题

文章背景：

招聘要求大多相互抄袭，没能准确明白他们想要什么样的人，我们尝试从更多的细节去触达他们的需求

文章目的：

给程序员们一些当看招聘消息的启示，有思考方向和辨识能力，节省时间，顺利找到心仪工作

有参考价值的文章：

来看看国外招聘WEB前端工程师的帖子都写了什么

https://blog.csdn.net/natalie86/article/details/42612647

seo相关

seo关于前端，ssr渲染，简易seo方案

ps：暂无资料，欢迎朋友们补充

1.前后端交互的全面认识，对Http协议有足够了解

2.熟悉DNS，HTTP及其他相关网络层数据传输协议

HTTP基础与DNS分析

https://blog.csdn.net/It_rod/article/details/79939651

不得不了解的HTTP协议

https://blog.csdn.net/u012497653/article/details/110206419

对Web前端的性能优化、漏洞处理等有深入理解及实践，对web安全有丰富的认识和经验

网站性能优化实战——从12.67s到1.06s的故事

https://juejin.cn/post/6844903613790175240

常见前端安全问题及解决方案

https://juejin.cn/post/6844903942036389895

X-Frame-Options响应头配置详解

https://blog.whsir.com/post-3919.html

熟悉常见安全问题和对策

web前端常见安全问题

https://www.cnblogs.com/mmy67/p/9923422.html

对服务器的配置和优化有所了解

linux基本认识和操作，nginx启动，服务器设置，gzip设置等

ps：暂无资料，欢迎朋友们补充

兼容性，性能：

有UI组件的实际开发经验，能够解决多平台多终端的兼容、适配问题；

1.rem和vw适配方案！

2.@media

熟练使用各种脚本调试器、移动端调试等定位问题

chorme，fidder

熟练使用各种工具检测web服务的性能和定位瓶颈

chorme，WebPagetest，Yslow，Google PageSpeed

前端性能优化和测试工具总结

https://www.cnblogs.com/shmily2018/p/9366618.html

对常见的浏览器兼容问题有清晰的理解，并有可靠的解决思路和方案，如IE8/9/10、Edge、Chrome、Firefox等

对浏览器的兼容性的理解

https://www.cnblogs.com/SallyShan/p/11497763.html

常见浏览器兼容性问题与解决方案

https://www.cnblogs.com/e493825156/p/9028727.html

熟悉常见性能优化、衡量方法

前端性能优化及其度量方法

https://blog.csdn.net/LittleRoundFace/article/details/113892145

web前端页面性能优化（提升页面加载速度）

https://www.pianshen.com/article/2362272323/

大数据与绘图：

有流程处理系统/数据可视化系统开发经验

具备可视化开发经验，熟悉常用的可视化三方库，能够对其优化扩展；

有高并发高性能、中大型项目或产品的WEB开发经验者优先。

Web可视化技术，有过大数据量图形化渲染经验；

有数据平台或大数据可视化项目经验者优先。

两个方向：

1.浏览器api：document.createDocumentFragment，requestAnimationFrame

2.基础知识：WebGL和Canvas，其他数据类型框架

具体：

异步加载，虚拟列表。

特殊经验：

全栈类型：

熟悉nodejs并能熟练使用nodejs知识体系独立完成中小型web应用前后端的搭建者优先；

有kvm或docker等虚拟化技术/项目开发经验的优先

熟悉Docker部署、熟悉数据库基本操作；

专业方向类型：

熟悉web音视频流媒体处理技术；

有GIS（高德API/ArcGIS JS）相关开发经验；

前端工程化类型：

熟练使用GIT工具，熟悉测试驱动开发，熟练单元测试。

有SSR实际项目经验（必要条件）有Serverless + SSR实际应用优先考虑。

熟悉前端工程化相关的yarn/npm/webpack等工具的使用和配置；

熟悉掌握gulp，webpack等前端代码构建工具的使用，能够根据特定需求定制合适的打包方案

1.了解Python，PHP，Node.js，Java等后台开发语言及技术的一种或多种，对前后端的开发对接技术原理有全面认识

2.熟悉服务端WEB应用架构，有服务端脚本语言经验的优先

如果没有良好的流程规范，通常前端接触的到角色会比后端更多（多数应用型项目/产品，并非所有情况）。

前端开发人员会受到项目/产品经理或客户的直接影响：这个地方应该放个按钮，那个操作应该这么进行……；

前端还要与美工对接——这样的设计不好实现，是否可以改成那样？客户要求必须这么操作，但是这个设计做不到；

前端还要跟后端对接，对于某些应用，甚至是多个后端

换句话说，前端可以成为项目沟通的中心，所以比后端更合适承担主导的角色。

前端可以成为项目沟通的中心，所以比后端更合适承担主导的角色。

接口分后端服务实现和前端调用两个部分，技术都是成熟技术，并不难，接口设计才是难点。

前面提到前后端会产生一些矛盾。从前端的角度来看，重点关注的是用户体验，

包括用户在进行业务操作时的流动方向和相关处理；而从后端的角度来看，

重点关注的是数据完整、有效、安全。矛盾在于双方关注点不同，信息不对称，还各有私心。

解决这些矛盾的着眼点就是接口设计。

接口设计时，其粒度的大小往往代表了前后端工作量的大小（非绝对，这和整体架构有关）。

接口粒度太小，前端要处理的事情就多，尤其是对各种异步处理就可能会感到应接不暇；

粒度太大，就会出现高耦合，降低灵活性和扩展性，当然这种情况下后端的工作就轻松不了。

业务层面的东西涉及到具体的产品，这里不多做讨论。这里主要讨论一点点技术层面的东西。

就形式上来说，Web API 可以定义成 REST，也可以是 RPC，只要前后端商议确定下来就行。

更重要的是在输入参数和输出结果上，最好一开始就有相对固定的定义，这往往取决于前端架构或采用的 UI 框架。

熟悉DNS，HTTP及其他相关网络层数据传输协议

网络基础 TCP/IP

通常使用的网络（包括互联网）是在 TCP/IP 协议族的基础上运作的。而 HTTP 属于它内部的一个子集。

TCP/IP 协议族各层的作用如下：

应用层【FTP，DNS，HTTP】

应用层决定了向用户提供应用服务时通信的活动。

TCP/IP 协议族内预存了各类通用的应用服务。

比如，FTP（FileTransfer Protocol，文件传输协议）和

DNS（Domain Name System，域名系统）服务就是其中两类。

HTTP 协议也处于该层。

传输层【TCP，UDP】

传输层对上层应用层，提供处于网络连接中的两台计算机之间的数据传输。

在传输层有两个性质不同的协议：TCP（Transmission Control Protocol，传输控制协议）

和 UDP（User Data Protocol，用户数据报协议）。

网络层（又名网络互连层）

网络层用来处理在网络上流动的数据包。

数据包是网络传输的最小数据单位。

该层规定了通过怎样的路径（所谓的传输路线）到达对方计算机，

并把数据包传送给对方。

与对方计算机之间通过多台计算机或网络设备进行传输时，

网络层所起的作用就是在众多的选项内选择一条传输路线。

链路层（又名数据链路层，网络接口层）

用来处理连接网络的硬件部分。

包括控制操作系统、硬件的设备驱动、

NIC（Network Interface Card，网络适配器，即网卡），

及光纤等物理可见部分（还包括连接器等一切传输媒介）。

硬件上的范畴均在链路层的作用范围之内。

TCP/IP 通信传输流

利用 TCP/IP 协议族进行网络通信时，会通过分层顺序与对方进行通信。

发送端从应用层往下走，接收端则往应用层往上走。

发送端在层与层之间传输数据时，每经过一层时必定会被打上一个该层所属的首部信息。

反之，接收端在层与层传输数据时，每经过一层时会把对应的首部消去。

与HTTP关系密切的协议:IP、TCP和DNS

a. 负责传输的IP协议

按层次分，IP（Internet Protocol）网际协议位于网络层。

InternetProtocol这个名称可能听起来有点夸张，但事实正是如此，

因为几乎所有使用网络的系统都会用到 IP 协议。

TCP/IP 协议族中的 IP 指的就是网际协议，协议名称中占据了一半位置，

其重要性可见一斑。可能有人会把“IP”和“IP 地址”搞混， “IP”其实是一种协议的名称。

IP 协议的作用是把各种数据包传送给对方。而要保证确实传送到对方那里，则需要满足各类条件。

其中两个重要的条件是 IP 地址和 MAC地址（Media Access Control Address）。

IP 地址指明了节点被分配到的地址， MAC 地址是指网卡所属的固定地址。

IP 地址可以和 MAC 地址进行配对。 IP 地址可变换，但 MAC地址基本上不会更改。

b. 确保可靠性的 TCP 协议

按层次分， TCP 位于传输层，提供可靠的字节流服务。

所谓的字节流服务（Byte Stream Service）是指，为了方便传输，

将大块数据分割成以报文段（segment）为单位的数据包进行管理。

而可靠的传输服务是指，能够把数据准确可靠地传给对方。

一言以蔽之，TCP 协议为了更容易传送大数据才把数据分割，

而且 TCP 协议能够确认数据最终是否送达到对方。确保数据能到达目标

为了准确无误地将数据送达目标处， TCP 协议采用了三次握手（three-way handshaking）策略。

用 TCP 协议把数据包送出去后， TCP不会对传送后的情况置之不理，它一定会向对方确认是否成功送达。

21握手过程中使用了 TCP 的标志（flag） —— SYN（synchronize）和ACK（acknowledgement）。

详情可以查看文章。

c. 负责域名解析的 DNS 服务

DNS（Domain Name System）服务是和 HTTP 协议一样位于应用层的协议。它提供域名到 IP 地址之间的解析服务。

计算机既可以被赋予 IP 地址，也可以被赋予主机名和域名。比如www.hackr.jp。

DNS 协议提供通过域名查找 IP 地址，或逆向从 IP 地址反查域名的服务。

精通AJAX运作机制

一、什么是AJAX？

AJAX是“Asynchronous JavaScript And XML”的缩写(即：异步的JavaScript和XML)，

是一种实现无页面刷新获取服务器数据的混合技术。

（一）XML是什么？

XML是“Extensible Markup Language”的缩写（即：可拓展标记语言）

而JSON仅仅是一种数据格式，在JSON发明之前，

人们大量使用XML作为数据传输的载体，

也正因如此，AJAX技术的最后一个字母为“X”。

而如今情况则发生了些变化，

JSON这种类似于字符串对象的轻量级的数据格式越来越受到开发者青睐，

几乎变成了AJAX技术的标准数据格式，因此好像AJAX技术如今应该换个名字，

叫做“AJAJ”，呃，还是算了吧。

（三）混合技术？

是的，AJAX技术并不只是操作XMLHttpRequest对象发起异步请求，

而是为了实现“无页面刷新的资源获取”的一些列技术的统称，这些技术包括了：

JavaScript：用来在获取数据后，通过操作DOM或其他方式达成目标；

客户端（即浏览器）提供的实现异步服务器通信的XMLHttpRequest对象；

服务器端允许浏览器向其发起AJAX请求的相关设置；

明白AJAX并不只是操作XMLHttpRequest对象，对于初学者而言是十分必要的。

“API”是“Application Programming Interface”(即：应用程序接口)的缩写

AJAX技术的核心环节：XMLHttpRequest对象。

XMLHttpRequest对象是浏览器提供的一个API，用来顺畅地向服务器发送请求并解析服务器响应，

让我们先站在较高的层次，对该对象有一个全局的概览：

1.XMLHttpRequest只是一个JavaScript对象，确切的说，是一个构造函数。

换句话说，它一点也不神秘，它的特殊之处只在于它是由客户端(即浏览器)提供的（而不是JavaScript原生的），

除此之外，它有属性，有方法，需要通过new关键字进行实例化，我们只需掌握它们就好；

2.XMLHttpRequest对象是不断被扩展的。随着XML对象被广泛的接收，

W3C也开始着手制定相应的标准来规范其行为。

目前，XMLHttpRequest有两个级别：

1级提供了XML对象的实现细节，

2级进一步发展了XML对象，额外添加了一些方法，属性和数据类型。

但是，并不是所有浏览器都实现了XML对象2级的内容（并不意外，对吧？）；

该实例的属性，方法有：

方法

.open()：准备启动一个AJAX请求；

.setRequestHeader()：设置请求头部信息；

.send()：发送AJAX请求；

.getResponseHeader(): 获得响应头部信息；

.getAllResponseHeader()：获得一个包含所有头部信息的长字符串；

.abort()：取消异步请求；

属性

.responseText：包含响应主体返回文本；

.responseXML：如果响应的内容类型时text/xml或application/xml，

该属性将保存包含着相应数据的XML DOM文档；

.status：响应的HTTP状态；

.statusText：HTTP状态的说明；

.readyState：表示“请求”/“响应”过程的当前活动阶段

另外，浏览器还为该对象提供了一个onreadystatechange监听事件，

每当XML实例的readyState属性变化时，就会触发该事件的发生。

xhr实例的readystatechange事件会监听xhr.readyState属性的变化，

你可以将这个属性想象为一个计数器，随着AJAX流程的推进而不断累加，其可取的值如下：

什么是readyState

0：未初始化 -- 尚未调用.open()方法；

1：启动 -- 已经调用.open()方法，但尚未调用.send()方法；

2：发送 -- 已经调用.send()方法，但尚未接收到响应；

3：接收 -- 已经接收到部分响应数据；

4：完成 -- 已经接收到全部响应数据，而且已经可以在客户端使用了；

什么是status？

HTTP状态码(status)由三个十进制数字组成，第一个十进制数字定义了状态码的类型，

后两个数字没有分类的作用。HTTP状态码共分为5种类型：

2xx，5xx，4xx等

有了这个时间处理程序对AJAX进程做监听，剩下的事就简单多了，一个异步的GET请求代码如下：
const xhr = new XMLHttpRequest()

xhr.onreadystatechange = () = >{

    if (xhr.readystate == 4) {

        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {

            alert(xhr.responseText)

        } else {

            alert("Request was unsuccessful: " + xhr.status)

        }

    }

}

xhr.open("get", "example.php", true)

xhr.send(null)
Ajax原理一篇就够了

https://juejin.cn/post/6844903618764603399

再也不学AJAX了！（一）AJAX概述

https://juejin.cn/post/6844903517442801677

再也不学AJAX了！（二）使用AJAX

https://juejin.cn/post/6844903518055186445

再也不学AJAX了！（三）跨域获取资源 ① - 同源策略

https://juejin.cn/post/6844903518545920008

再也不学AJAX了！（三）跨域获取资源 ② - JSONP & CORS

https://juejin.cn/post/6844903519380570120

跨域资源共享 CORS 详解

http://www.ruanyifeng.com/blog/2016/04/cors.html

AJAX原理（含常见面试题）

https://juejin.cn/post/6844904114896240647

ajax常见面试题

https://juejin.cn/post/6844903573529034759

进击的你

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端工程师查看招聘要求的细节问题了解

前端招聘细节问题文章背景：招聘要求大多相互抄袭，没能准确明白他们想要什么样的人，我们尝试从更多的细节去触达他们的需求文章目的：给程序员们一些当看招聘消息的启示，有思考方向和辨识能力，节省时间，顺利找到心仪工作seo相关seo关于前端，ssr渲染，简易seo方案ps：暂无资料，欢迎朋友们补充1.前后端交互的全面认识，对Http协议有足够了解2.熟悉DNS，HTTP及其他相关网络层数据传输协议HTTP基础与DNS分析https://blog.csdn.n
复制链接

扫一扫