前端思考题

Posted 2020-09-29 春花碧浪，秋月无边

1.站点 Logo 是否应出现在标签中？

 

2.是否应该支持IE6？

 

3.前端网页制作怎么克服不同分辨率的问题？

　　根据屏幕不同大小，缩小窗口出横向滚动条在所难免，但理想情况下，页面应该能适应不同客户端浏览器和分辨率。实际操作通常又有三种情况：版面自适应、视觉自适应、内容自适应。具体要怎样实现呢？

 

4.是否该继续使用 <b> 和 <i> 两个标签?

　　正方：

　　如果你仅仅想把一个词设为粗体，而这个词并没有强调表示重要的意思，应该使用 <b> 标签，不该用 <strong> 标签，读屏软件对 　<b> 和<i> 标签有不同的发音，而 html5 规范中仍包含这两个标签。

　　反方:

　　这两个标签的作用是将文字设置为粗体或斜体，从语义角度看，任何装饰性的东西都应该使用 CSS 实现，如果要强调一个词语，应该使用 <strong> 或 <em> 标签。

　　和事佬：

　　<b> 和 <i> 标签不应该用于修饰文字的式样，这些视觉的修饰应该交由 CSS 处理。如果要强调一个词汇或语句，应该使用 <strong> 或 <em> 标签。只有在那些没有别的标签可用的场合，才可以考虑 <b> 和 <i> 。

 

5.在链接中应该使用诸如“Click here” 一类的笼统词汇吗？

　　正方:

　　事实证明，“Click here” 比描述性的链接更容易获得点击，因此应该使用该词汇以获得更好的点击率。

　　反方:

　　“Click here” 一类的链接损害 Web 的易用性，用户在点击之前，只能通过周围的上下文关系猜测这个链接是做什么的。Quality guidelines 建议，任何链接文字都应该明确描述该链接的目的。

　　和事佬:

　　为了提高站点的易用性，可访问性和 SEO 性能，应该始终使用描述性链接。很有趣听到有人说 “Click here” 比描述性链接可以获得更多点击率，不知道那些点击进来的人是不是看两眼就离开了。

 

6. 链接是否应该在新窗口打开？

　　在 Web 空前繁荣的今天，有关 Web 设计中的各种观点很多会成为话题，有的很快达成一致，有的则一直争议下去。

　　正方:

　　外部链接应该始终从新窗口打开，当你浏览一个站点的时候，点击了一个链接，却被带到另外一个站点，你在这个站点的会话也因此丢失，这实在令人恼怒。因此，站点内的链接可以在现有窗口打开，而站点外链接则应该在新窗口打开。

　　反方:

　　作为 Web 设计师，我们不该控制用户的行为，一个链接是否在新窗口打开，应该是用户自己的选择。剥夺用户的控制权，在用户的桌面上打开一堆窗口或标签，这才是真正让 人恼怒的事。如果用户想打开新窗口，他们可以自己选择，而对非熟练用户，新窗口让他们丢失了“后退”按钮更让他们无所适从。

　　和事佬:

　　总体来讲，应该避免使用新窗口打开链接，但在某些场合，如打开购物车中的帮助链接，打开一个非 html 文件（如 PDF 文件），应该使用新窗口。为了提高易用性，最好在需要打开新窗口的地方，用一个小图标提示一下。

 

7.时至今日前端canvas还是否有深入学习的必要？

　　现在手机和PC的性能越来越好，而且adobe animation、bodymovin和lottie等工具也渐渐进入大众的视野，似乎一般情况下的需求都可以由设计完成。徒手写酷炫的canvas的技能似乎越来越边缘化了，人写与软件生产最大区别是什么？是性能问题吗？按照目前硬件发展速度，性能还会是一个问题吗？canvas本身学习成本高，开发思维和一般意义前端不同，诚然尖端的游戏引擎、渲染、数据可视化、webgl方面肯定是需要人才的，但是低端的可替代性，其陡峭的学习曲线，是否可以说明其生态的恶化？低端的人没有实践场景我觉得是很难走到高端的。

 

8.你如何对网站的文件和资源进行优化?

　　有效的解决方案包括：

　　文件合并

　　文件最小化/文件压缩

　　使用CDN托管

　　缓存的使用

 

9.ajax请求的时候get 和post方式的区别是什么？

　　区别在：

　　　　一个在url后面，一个放在虚拟载体里面

　　　　有大小限制

　　　　安全问题

　　应用不同：一个是论坛等只需要请求的，一个是类似修改密码的。

 

10. Web前端密码加密是否有意义？(既然前端代码都是直接可以看到的，那加密是否还有意义？)

　　我总结一下，首先大家都知道走 HTTPS 才是目前唯一负责的方式。但在 HTTP 环境下，无论如何都可能会被劫持流量，不管前端做不做加密都会被轻易成功登录。这个时候保护密码明文是否有意义？有人站队前端加密无意义，考虑的是这个加密对本站的安全性没有任何提升；但如果你是从保护用户的角度出发，用户多站点共享密码是现状，你在没法改变这一点的情况下，如果能够保护密码明文，至少降低了一点该用户其他网站（即使是 HTTPS 的网站）被一锅端的风险。这怎么能说完全没有意义？有人说 HTTP 流量可以直接注入脚本，直接拿到用户输入的密码，这没错。但是注入脚本就是代价，只要能够提高一点点门槛就不能说没有意义，很多时候是这些收益和成本之间的权衡。

 

11.前端开发中有什么经典的轮子值得自己去实现一遍？

　　我造过的轮子：LiuJi-Jim/jas：异步控制的工具，11年写的，只有60行，然而炒鸡好用，吃自己狗食的级别。LiuJi-Jim/raze-tpl：模板引擎，语法风骚迷人，吃自己狗食的级别。LiuJi-Jim/mirror：Virtual-DOM实现，玩具级别。LiuJi-Jim/h5pal：万吨巨轮，仙剑奇侠传web移植（介绍）。LiuJi-Jim/c-struct：一个用于JS读写C结构体的工具，从h5pal里拆出来重构的。还有一些烂尾了，还有一些不想发出来的，各种Promise、EventEmitter、Module Loader、山寨Lodash、数据结构、类工厂、MVC……不提也罢。

 

12.在你的日常开发中遇到过哪些常用布局是无法用纯 CSS 实现的？

　　1. 多行文字溢出显示省略号

　　2. 最大行数

　　3. 更好用的 Flex

　　4. 元素查询（Element Queries）

　　5. CSS 分页滚动

　　6. 非矩形布局

　　7. 流式 Grid 布局

 

13.对前端工程师这个职位你是怎么样理解的？

　　a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好

　　b. 参与项目，快速高质量完成实现效果图，精确到1px；

　　c. 与团队成员，UI设计，产品经理的沟通；

　　d. 做好的页面结构，页面重构和用户体验；

　　e. 处理hack，兼容、写出优美的代码格式；

　　f. 针对服务器的优化、拥抱最新前端技术。

 

14.平时如何管理你的项目？

　　先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等；

　　1 编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；

　　2 标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；

　　3 页面进行标注（例如 页面 模块 开始和结束）；

　　4 CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；

　　5 JS 分文件夹存放 命名以该JS功能为准的英文翻译。

　　6 图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理

 

15.如何视觉隐藏网页内容，只让它们在屏幕阅读器中可用？

　　display:none;的缺陷搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略屏幕阅读器（是为视觉上有障碍的人设计的读取屏幕内容的程序）会忽略被隐藏的文字。

　　visibility:hidden;的缺陷这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间3.overflow:hidden;一个比较合理的方法.texthidden{display:block;/*统一转化为块级元素*/overflow:hidden;width:0;height:0;}就像上面的一段CSS所展示的方法，将宽度和高度设定为0，然后超过部分隐藏，就会弥补上述一、二方法中的缺陷，也达到了隐藏内容的目的。

 

16.你觉得WebAssembly为什么比asm.js快？

　　WebAssembly 为什么比 asm.js 快？

　　WebAssembly 是为 Web 而设计的、可以生成浏览器可执行的二进制文件的编程语言。并且于2017 年 2 月 28 日，四个主要的浏览器一致同意宣布 WebAssembly 的 MVP 版本已经完成，即将推出一个浏览器可以搭载的稳定版本。WebAssembly 的一个主要目标就是变快。当然，“快”是相对的概念。相比于 javascript 和其他动态语言，WebAssembly 的快主要是因为它的静态类型特性和方便优化特性。WebAssembly 意在速度上能够达到和本地执行一样快，其实 asm.js 已经比较接近这一目标了，但是 WebAssembly 要进一步缩短和本地执行速度之间的差距。

 

17.前端安全方面有没有了解？CSRF 如何攻防？

 

18.说说你对 SVG 理解?

 

19.谈谈垃圾回收机制方式及内存管理.

 

20.开发过程中遇到的内存泄露情况，如何解决的？