前端面试 1000道!

作者: 蓝海00 | 来源:发表于2019-05-17 20:05 被阅读3次

基础强化

1. 聊一聊前端存储。
  (1)老朋友cookie
  (2)短暂的sessionStorage
  (3)简易强大的localStorage
  (4) websql 与indexeddb
  详细见 https://segmentfault.com/a/1190000005927232

1. BFC
  (1) w3c 规范中的 BFC 定义
  浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline- blocks, table-cells，和 table- captions），以及 overflow 值不为 visiable'的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
  在 BFC 中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的 margin 值所決定的。在一个 BFC 中，两个相部的块级盒子的垂直外边距会产生折叠。
  在 BFC 中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘（border-left)（对于从右到左的格式来说，则触碰到右边缘）。
  (2) BFC 的通俗理解：
  首先 BFC 是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为 BFC 的理解则是：BFC 中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个 BFC 中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
  详细参见
  http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
  https://www.zhihu.com/question/28433480

前端工程化

1. 场景：你是第一天来公司上班的，项目代码托管在 Gitlab，项目地址: gt@lab.com: org/project.gt，现在有一处代码需要你修改。请下完成此项任务中，与 git/gitlab相关的操作步骤。
  第一步：$> ssh-keygen-trss-zhangsan@abc.com
  第二步：拷贝公钥到 gitlab
  第三步：$> git config -global user name zhangsan => $> gitconfig-globaluser.emailzhangsan@abc.com
  第四步：$> gitclonegit (@lab. com:org/project.git
  第五步：$> git checkout -b project-20170227- zhangsan- bugfix
  第六步：修改代码
  第七步：git status
  第八步：git add
  第九步：git commit- am ' bugfix
  第十步：git push- set-upstream origin project20170227- zhangsan- bugfix

1. CSS, JS 代码压缩，以及代码 CDN 托管，图片整合。
  (1) CSS, JS 代码压缩
  可以应用 gulp 的 gulp- uglify, gulp- minify-CSs 模块完成；可以应用 webpackf 的 Uglify Jsplugin 压缩插件完成。
  (2) CDN
  内容分发网络（CDN）是一个经策略性部署的整体系统，包括分布式存储、负载均衡、网络请求的重定向和内容管理 4 个要件。主要特点有：本地 Cache 加速，镜像服务，远程加速，带宽优化。关键技术有：内容发布，内容路由，内容交换，性能管理。CDN 网站加速适合以咨询为主的网站。CDN 是对域名加速不是对网站服务器加速。CDN 和镜像站比较不需要访客手动选择要访问的镜像站。CDN 使用后网站无需任何修改即可使用 CDN 获得加速效果。如果通过 CDN 后看到的网页还是旧网页，可以通过 URL 推送服务解決，新增的网页和图片不需要 URL 推送。使用动态网页可以不缓存即时性要求很高的网页和图片。CDN 可以通过 gt 或 SVN 来管理
  (3) 图片整合
  减少网站加载时间的最有效的方式之一就是減少网站的 HTPい请求数。实现这一目标的一个有效的方法就是通过 CSS Spritesーー将多个图片整合到一个图片中，然后再用 CSS来定位。缺点是可维护性差。可以使用百度的 fis/webpack 来自动化管理 sprite

1. 如何利用 webpack 把代码上传服务器以及转码测试？
  (1) 代码上传
  可以使用 sftp-webpack-plugin，但是会把子文件夹给提取出来，不优雅。可以使用 gulp + webpack 来实现
  (2) 转码测试
  webpack 应用 babel 来对 ES6 转码，开启 devtool: "source-map"来进行浏览器测试。应用 karma 或 mocha 来做单元测试。

1. 项目上线流程是怎样的？
  (1) 流程建议
  模拟线上的开发环境
  本地反向代理线上真实环境开发即可。（apache, nginx, modest 均可实现）
  模拟线上的测试环境
  模拟线上的测试环境，其实是需要一台有真实数据的測试机，建议没条件搭 daily 的，就直接用线上数据测好了，只不过程序部分走你们的測试环境而已，有条件搭 daly 最好。
  可连调的测试环境
  可连调的测试环境，分为 2 种。一种是开发测试都在一个局域网段，直接绑 hosts 即可，不在一个网段，就每人分配一台虚拟的测试机，放在大家都可以访问到的公司内网，代码直接往上布即可。
  自动化的上线系统
  自动化的上线系统，可以采用 Jenkins。如果没有，可以自行搭建一个简易的上线系统，原理是每次上线时都抽取最新的 tunk 或 master，做一个 tag，再打一个时间戳的标记，然后分发到 cdn 就行了。界面里就 2 个功能，打 tag，回滚到某 tag，部署。
  适合前后端的开发流程
  开发流程依据公司所用到的工具，构建，框架。原则就是分散独立开发，互相不干扰，连调时有 hosts。可绑即可。
  (2) 简单的可操作流程
  代码通过 gt 管理，新需求创建新分支，分支开发，主干发布
  上线走简易上线系统
  通过 gulp+ webpack 连到发布系统，一键集成，本地只关心原码开发
  本地环境通过 webpack 反向代理的 server
  搭建基于 linux 的本地測试机，自动完成 build+push 功能

1. 工程化怎么管理的？
  gulp 和 webpack

git 常用命令
Workspace：工作区
Index/ Stage：暂存区
Repository：仓库区（或本地仓库）
Remote：远程仓库
详细参见：http://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html

1. Webpack 和 gulp 对比
  Gulp 就是为了规范前端开发流程，突现前后端分离、模块化开发、版本控制、文件合并与压缩、mock 数据等功能的一个前端自动化构建工具。说的形象点，"Gulp 就像是一个产品的流水线，整个产品从无到有，都要受流水线的控制，在流水线上我们可以对产品进行管理。”另外，Gup 是通过 task 对整个开发过程进行构建。
  Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔等到实际需要的时候再异步加载。通过 loaders 的转换，任何形式的资源都可以视作模块，七如 Commonjs 模块、AMD 模块、ES6 模块、CSS、图片、JSON、Coffeescript、LESS 等
  Gulp 和 Webpack 功能实现对比：从基本概念、启动本地 server、sass/less 预编译、模块化开发、文件合并与压缩、mock 数据、版本控制、组件控制八个方面对 Gulp 和 Webpack 进行对比。
  详细参见 http://www.tuicool.com/articles/e632EbA

1. Webpack 打包文件太大怎么办？
  webpack 把我们所有的文件都打包成一个 JS 文件，这样即使你是小项目，打包后的文件也会非常大。可以从去除不必要的插件，提取第三方库，代码压缩，代码分割，设置缓存几个方面着手优化。
  详细参见http://www.jianshu.com/p/a64735eb0e2b

1. 不想让别人盗用你的图片，访问你的服务器资源该怎么处理？
  目前常用的防盗链方法主要有两种：
  (1) 设置 Referer：适合不想写代码的用户，也适合喜欢开发的用户
  (2) 签名 URL：适合喜欢开发的用户
  详细参见: https://yq.aliyun.com/articles/57931

1. 精灵图和 base64 如如何选择？
  css 精灵，用于一些小的图标不是特别多，一个的体积也稍大，比如大于 10 K（这个没有严格的界定）。
  base64, 用于小图标体积较小（相对于 css 精灵），多少都无所谓。字体图标，用于一些别人做好的图标库（也有少数自己去做的）用起来比较方便，他的图标只能用于单色，图标用只能于一种颜色。

13.webpack怎幺引入第三方的库?
jQuery实例:

entry: {
page: 'path/to/page.js',
jquery: 'node_modules/jquery/dist/jquery.min.js' }
new HtmlWebpackPlugin({ 
filename: 'index.html', 
template: 'index.html',
inject: true,
chunks: ['jquery', 'page'] // script 
})

15.用过Nginx吗?都用过哪些?
nginx是一个高性能的HTTP和反向代理服务器。
常使用场景:
(1)反向代理
(2)网站负载均衡
详细参见: http://www.cnblogs.com/hobinly/p/6023883.html

移动端布局与适配

16.iscroll安卓低版本卡顿,
如何解决?
方案一: iScroll v5.1 .3设置momentum: true
方案二:配置probeType
方案三:开启硬价加速:给scroll元素增加css样式: -webkit-transform:translate3d(0,0,0);
方案四:判断手机版系统版本，应用原生CSS: overflow:scroll-y

17.移动布局自适应不同屏幕的几种方式
(1)响应式布局
(2) 100%布局(弹性布局)
(3)等比缩放布局(rem)

20.你们做移动端平时在什么浏览器上测试?
Chrome, Safari, 微信X5，UC,其他手机自带浏览器

21.说说移动端是如何调试的?
移动端调试:
(1)模拟手机调试
(2)真机调试之android手机+Chrome
(3)真机调试之iphone + safari
(4) UC浏览器
(5)微信内置浏览器调试
(6) debuggap
(7)抓包
详细参考: https://segmentfault.com/a/1190000005964730

22.说说ICONFONT是如何用的?
从以下几个方面做答:
(1) font-face
(2)什么是iconfont,iconfont怎么用
(3) iconfont怎么做
(4) iconfont的利和弊
详细参见: https://segmentfault.com/a/1190000005904616?_ea=953657

23.说说移动端Web分辨率
从以下几个方面做答:
(1) PC到移动，渲染的变迁
(2)可以更改的布局宽度
(3)再次变迁的像素
(4)又一次变迁
(5)是时候说说安卓了
详细参见: https://segmentfault.com/a/1190000005884985

性能和效率

24.你平时如何评测你写的前端代码的性能和效率。
Chrome Dev Tools的Timeline:是用来排查应用性能瓶颈的最佳工具。
Chrome Dev Tools的Audits:对页面性能进行检测，根据测试的结果进行优化。
第三方工具Yslow。
详细参见:
http://www.cnblogs.com/-simon/p/5883336.html http://blog.csdn.net/ivan0609/article/details/45508365 http://www.wtoutiao.com/p/1305TZW.html

25.如何优化页面，加快页面的加载速度(至少5条)
(1)优化图片资源的格式和大小
(2)开启网络压缩
(3)使用浏览器缓存
(4)减少重定向请求
(5)使用CDN存储静态资源
(6)减少DNS查询次数
(7)压缩css和js内容
详细参见: http://www.mahaixiang.cn/wyzz/1589.html

26.怎么保证多人开发进行内存泄漏的检查(内存分析
工具)
使用xcode里面的Analyze进行静态分析，为避免不必要的麻烦，多人开发的时候尽量使用
ARC。
详细参见: http://www.jianshu.com/p/424c15b9b73a

28.浏览器http请求过多怎么解决?
(1) 合并JS、CSS文件
(2)合并图片css sprite
(3)使用Image maps
(4) data嵌入图片:如base64
(5)使用CDN,减少http请求头

Web安全

29.你所了解到的Web攻击技术
(1) XSS攻击
(2) CSRF攻击
(3)网络劫持攻击
(4)控制台注入代码
(5)钓鱼
详细参见: http://blog.csdn.net/fengyinchao/article/details/52303118

30.如何防止XSS攻击?
(1)将前端输出数据都进行转义
(2)将输出的字符串中的反斜杠进行转义
(3)从urI中获取的信息，防止方法是由后端获取，在前端转义后再行输出
(4)使用cookie的HttpOnly属性,保护好cookie
详细参见:http://blog.csdn.net/fengyinchao/article/details/52303118

31.项目中有没有用过加密，哪种加密算法?
项目中没有用过，但我了解几个加密算法:
(1) RSA加密
(2) MD5加密
(3) SHA256加密

32.聊一聊网页的分段传输与渲染
从下面几个方面说:
(1) CHUNKED编码
(2) BIGPIPE
(3)分段传输与bigpipe适用场景
详细参见: https://segmentfault.com/a/1190000005989601?_ea=984496

33.百度移动端首页秒开是如何做到的?
从几个方面优化:
(1) 静态文件放置
(2) 缓存
(3)外链
(4)缓存DOM
(5)使用iconfont
(6)卡片的异步加载与缓存
(7)不在首屏的就要异步化
(8)少量静态文件的域名
详细参见: https://segmentfault.com/a/1190000005882953

34.前端速度统计(性能统计)如何做?
回答下面的两个问题,
(1)网站都有哪些指标?
(2)如何统计自己网站的这些指标?
详细参见: https://segmentfault.com/a/1190000005869953

架构

35.如果让你来制作一个访问量很高的大型网站，你会如何来管理所有css、js文件、图片?
(1) 遵循自定的一套CSS, JS和图片文件和文件夹命名规范
(2)依托采用的前端工程化工具,依照工具脚手架规范(gulp, webpack, grunt, yeoman)
(3)依据采用的框架规范(Vue, React, jQuery)

36.如果没有框架、怎么搭建你的项目
应用原生JS自己尝试搭建一个MVC架构:
(1)基本模块
common:公共的一组件，下面的各模块都会用到
config:配置模块，解决框架的配置问题
startup:启动模块，解决框架和Servlet如何进行整合的问题
plugin:插件模块，插件机制的实现，提供IPlugin的抽象实现
routing:路由模块，解决请求路径的解析问题，提供了lRoute的抽象实现和基本实现
controller:控制器模块，解决的是如何产生控制器
model:视图模型模块,解决的是如何绑定方法的参数
action: action模块，解决的是如何调用方法以及方法返回的结果，提供了lActionResult的抽象实现和基本实现
view:视图模块，解决的是各种视图引擎和框架的适配
filter:过滤器模块，解决是执行Action,返回IActionResult前后的AOP功能，提供了lFilter
的抽象实现以及基本实现
(2) 扩展模块
filters: 一些IFiter的实现
results:一些IActionResult的实现
routes:一些IRoute的实现
plugins:一些IPlugin的实现
详细参考 http://www.cnblogs.com/lovecindywang/p/4444915.html

37.在选择框架的时候要从哪方面入手
影响团队技术选型有很多因素，如技术组成，新技术，新框架，语言及发布等。为了更好的考量不同的因素，需要列出重要的象限，如开发效率、团队喜好，依次来决定哪个框架更适合当前的团队和项目。上线时间影响框架选择,不要盲目替换现有框架。
(1) jQuery
项目功能比较简单。并不需要做成一个单页面应用，就不需要MV*框架。项目是一个遗留系统。与其使用其他框架来替换，不如留着以后重写项目。
(2) AngularJS
当我们在制作一个应用，它对性能要求不是很高的时候，那么我们应该选择开发速度更快的技术栈AngularJS,她拥有混合开发能力的ionic框架。对于复杂的前端应用来说，基于Angular.js应用的运行效率，仍然有大量地改进空间。Angular2需要学习新的语言，需慎重选择。
(3) React
选择React有两个原因，一是通过Virtual DOM提高运行效率，二是通过组件化提高开发效率。大型项目首选。选择React还有一个原因是: React Native、React VR等等，可以让React运行在不同的平台之上。我们还能通过React轻松编写出原生应用，还有VR应用。令人遗憾的是React只是一个View层，它是为了优化DOM的操作而诞生的。为了完成一个完整的应用，我们还需要路由库、执行单向流库、web API调用库、测试库、依赖管理库等等，为了完整搭建出一个完整的React项目，我们还需要做大量的额外工作。
(4) Vue.js
对于使用Vue.js的开发者来说，我们仍然可以使用熟悉的HTML和CSS来编写代码。并且，Vue.js 也使用了Virtual DOM、Reactive 及组件化的思想，可以让我们集中精力于编写应用，而不是应用的性能。对于没有Angular和React经验的团队，并且规模不大的前端项目来说，Vue.js 是一个非常好的选择。
详细参见: https://zhuanlan.zhihu.com/p/25194137

38.聊一聊前端模板与渲染
(1)页面级的渲染，后端模板
如smarty,这种方式的特点是展示数据快，直接后端拼装好数据与模板，展现到用户面前，对SEO友好。
(2)异步的请求与新增模板，前端模板
如Mustache, ArtTemplate, 前端解析模板的引擎的语法，与后端解析模板引擎语法一致。这样就达到了一份HTML前后端一起使用的效果。
详细参见: https://segmentault.com/a/1190000005916423

混合开发:

39.UIWebView和JavaScript之间是怎么交互的?
UIWebView是ioS SDK中渲染网面的控件，在显示网页的时候，我们可以hack网页然后显示想显示的内容。其中就要用到JavaScript的知识，而UIWebView 与javascript交互的方法就是stringByEvaluatingJavaScriptFromString:
有了这个方法我们可以通过objc调用javascript,可以注入javascript。
Js调用OC方法原理就是利用UIWebView重定向请求，传-些命令到我们的UlWebView,在UlWebView的delegate的方法中接收这些命令，并根据命令执行相应的objc方法。这样就相当于在javascript中调用objc的方法。
在android中，我们有固有组件webview,经过设置可以让它支持我们的js的渲染，然
后在代码中设置(WebViewClient/WebChromeClient) 让应用跳转页面时在本webview中跳
转，通过webview.loadurl (String str)方法可以在需要的地方加载我们前端的页面或者调用前端所定义的方法(wv.loadUrl("javascript:sendData ToAndroid(我是来自js的呦，你看到了吗";)，我们再通过JavascriptInterface接口设置我们前端和android通讯的标识，wv.addJavascriptlnterface(new MJavascriptinterface(getApplicationContext()),
"WebViewFunc");
这样前端就可以在页面上调用我们的方法了，fun1方法是在android中定义的
Window.WebViewFunc.fun1();
总之，前端和android或者ios进行结合开发，我们称之为混合开发，原理就是在原生的开发语言中，我们提供了-个组件webview,这个组件就是我们的原生语言的浏览器，但是我们得自行设置让其能够完美支持我们的应用，需要设置对应的标识，然后连接起来，我们称之为JavascriptInterfac。

40.混合开发桥接api是怎么调用的，需要引入类库嘛?
调用的对象是什么?
Hybrid框架结构
HyBrid App = H5 App + Native框架
H5App用来实现功能逻辑和页面渲染
Native框架提供WebView和设备接口供H5调用
方案一重混合应用，在开发原生应用的基础上，嵌入WebView但是整体的架构使用原生应用提供，- -般这样的开发由Native开发人员和Web前端开发人员组成。Native开发人员会写好基本的架构以及API让Web开发人员开发界面以及大部分的渲染。保证到交互设计，以及开发都有一个比较折中的效果出来，优化得好也会有很棒的效果。Hybrid App技术发展的早期，Web的运行性能成为主要瓶颈!为解决性能问题Hybrid App走向“重混”。
通过多WebView:实现流畅的多页加载和专场动画。
使用Navtive UI组件:框架、菜单、日期等。
“重混”的优缺点
优点:
提升了运行性能
增强了交互体验
缺点:
Web和Native技术交叉混杂
需要同时掌握Web和Native技术，学习难度增加
一个页面有Web组件也有Native组件，编程调试困难需要引入各自需要的各种依赖工具
方案二:轻混合应用，使用PhoneGap、AppCan之类的中间件，以WebView作为用户界面层，以Javascript作为基本逻辑,以及和中间件通讯，再由中间件访问底层API的方式，进行应用开发。这种架构一般会非常依赖WebView层的性能。
随着时代的发展，手机硬件、浏览器技术、无线网络技术都得到了大幅的提升，H5已经可以支持复杂应用，并拥有良好的运行性能。使用轻混方案的App也越来越多。
目前我们要学习的Hybrid App开发就是方案二，使用H5+Js+Native框架开发当前轻混合应用。
Phonegap引入phonegap.js或者cordova.js,对象为navigator
Dcloud引入引入mui.js或者其他的js组件，对象为plus
apiloud引入各种第三方插件，对象为api
顺变提一下，2012年8月，微信公众平台的.上线，重新定义了移动应用:移动应用
= Iphone App + Android App +微信App

前端面试 1000道!

基础强化

前端工程化

移动端布局与适配

性能和效率

Web安全

架构

混合开发:

持续更新中近1000道～

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Web前端之路

技术干货

前端开发

前端面试 1000道!

基础强化

前端工程化

移动端布局与适配

性能和效率

Web安全

架构

混合开发:

持续更新中 近1000道～

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Web前端之路

技术干货

前端开发

持续更新中近1000道～