返回主页

参考答案：WebPack 是一个模块打包工具，你可以使用 WebPack 管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包 Web 开发中所用到的 HTML、JavaScript、CSS 以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，webpack 有对应的模块加载器。webpack 模块打包器会分析模块间的依赖关系，最后 生成了优化且合并后的静态资源。

webpack 的两大特色：

1. code splitting（可以自动完成）
2. loader 可以处理各种类型的静态文件，并且支持串联操作

webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。

webpack 具有 requireJs 和 browserify 的功能，但仍有很多自己的新特性：

1. 对 CommonJS 、 AMD 、ES6 的语法做了兼容
2. 对 js、css、图片等资源文件都支持打包
3. 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对 CoffeeScript、ES6 的支持
4. 有独立的配置文件 webpack.config.js
5. 可以将代码切割成不同的 chunk，实现按需加载，降低了初始化时间
6. 支持 SourceUrls 和 SourceMaps，易于调试
7. 具有强大的 Plugin 接口，大多是内部插件，使用起来比较灵活
8. webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快

参与互动

参考答案：

参与互动

参考答案：

一、webpack的常见配置

const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    // 入口文件
    entry: {
        app: path.join(__dirname, "../src/js/index.js")
    },
    // 输出文件
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, "dist"),
        publicPath: "/"
    },
    // loader配置
    module: {
        rules: [{
                test: /\.scss/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            }
            ......
        ]
    },
    // plugins配置
    plugins: [
        // 重新创建html文件
        new HtmlWebpackPlugin({
            title: "首页",
            filename: "index.html",
            template: path.resolve(__dirname, "../src/index.html")
        })
        ......
    ]
}

二、webpack的打包原理

1. 识别入口文件
2. 通过逐层识别模块依赖(Commonjs、amd或者es6的import，webpack都会对其进行分析，来获取代码的依赖)
3. webpack做的就是分析代码，转换代码，编译代码，输出代码
4. 最终形成打包后的代码

三、什么是loader

loader是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中

1. 处理一个文件可以使用多个loader，loader的执行顺序和配置中的顺序是相反的，即最后一个loader最先执行，第一个loader最后执行
2. 第一个执行的loader接收源文件内容作为参数，其它loader接收前一个执行的loader的返回值作为参数，最后执行的loader会返回此模块的JavaScript源码

四、什么是plugin

在webpack运行的生命周期中会广播出许多事件，plugin可以监听这些事件，在合适的时机通过webpack提供的API改变输出结果。

五、loader和plugin的区别

对于loader，它是一个转换器，将A文件进行编译形成B文件，这里操作的是文件，比如将A. scss转换为A. css，单纯的文件转换过程

plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务

class MyPlugin {
    constructor(options) {
        console.log("MyPlugin constructor:", options);
    }
    apply(compiler) {
        compiler.plugin("compilation", compilation => {
            console.log("MyPlugin");
        });
    }
}
module.exports = MyPlugin;

webpack.config.js配置：
module.exports = {
    ...
    plugins: [
        new MyPlugin({
            param: "my plugin"
        })
    ]
}

使用该plugin后，执行的顺序：

1. webpack启动后，在读取配置的过程中会执行new MyPlugin(options)初始化一个MyPlugin获取其实例
2. 在初始化compiler对象后，就会通过compiler.plugin(事件名称，回调函数)监听到webpack广播出来的事件
3. 并且可以通过compiler对象去操作webpack

参与互动

参考答案：以实际情况为准，vue源码可参考

参与互动

参考答案：时间选择器组件，图片上传组件，轮播图组件等，一定要知道其原理。

参与互动

参考答案：

设计组件要遵循一个原则：一个组件只专注做一件事，且把这件事做好。

带来的好处：降低耦合性，提高了系统的伸展性，降低了开发的复杂度，提升开发效率，降低开发成本。

参与互动

参考答案：以实际情况为准

参与互动

参考答案：

样本一

• 减少 http 请求次数：CSS Sprites, JS、CSS 源码压缩、图片大小控制合适；网页 Gzip，CDN 托管，data 缓存 ，图片服务器。
• 前端模板 JS+数据，减少由于 HTML 标签导致的带宽浪费，前端用变量保存 AJAX 请求结果，每次操作本地变量，不用请求，减少请求次数
• 用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能。
• 当需要设置的样式很多时设置 className 而不是直接操作 style。
• 少用全局变量、缓存 DOM 节点查找的结果。减少 IO 读取操作。
• 避免使用 CSS Expression（css 表达式)又称 Dynamic properties(动态属性)。
• 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
• 避免在页面的主体布局中使用 table，table 要等其中的内容完全下载之后才会显示出来，显示比 div+css 布局慢。

样本二

• 减少 HTTP 请求
• 减少 DOM 操作
• 避免不必要的重绘与重排
• 优化 CSS 选择器（从右向左匹配）
• CSS/JS minify，减少文件体积
• 开启 Gzip 压缩
• 将 CSS 放到顶部，JavaScript 放到尾部
• 压缩图片以及使用 CSS Sprite
• 使用 CDN 加速，适当进行文件缓存
• 合理控制 cookie 大小（每次请求都会包含 cookie）

参与互动

参考答案：

一、Vue. js：

其实Vue. js不是一个框架，因为它只聚焦视图层，是一个构建数据驱动的Web界面的库。

Vue. js通过简单的API（应用程序编程接口）提供高效的数据绑定和灵活的组件系统。

Vue. js的特性如下：

1. 轻量级的框架
2. 双向数据绑定
3. 指令
4. 插件化

优点：

1. 简单：官方文档很清晰，比 Angular 简单易学。
2. 快速：异步批处理方式更新 DOM。
3. 组合：用解耦的、可复用的组件组合你的应用程序。
4. 紧凑：~18kb min+gzip，且无依赖。
5. 强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。
6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

缺点：

1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。
2. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
3. 不支持IE8：

二、React：

React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

React特性如下：　

1. 声明式设计：React采用声明范式，可以轻松描述应用。
2. 高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
3. 灵活：React可以与已知的库或框架很好地配合。

优点：

1. 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
6. 兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

缺点：

1. React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

二、小程序： 小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。

参与互动

参考答案：

参与互动

参考答案：

参与互动

参考答案：文件合并及压缩、使用 CDN 托管、使用缓存

参与互动

参考答案：

参与互动

参考答案：

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

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

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

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

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

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

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

参与互动

参考答案：

参与互动

参考答案：

参与互动

参考答案：服务端渲染等

解析：参考

参与互动

参考答案：

• AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。

• CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

• AMD 是提前执行，CMD 是延迟执行。

• AMD 推荐的风格通过返回一个对象做为模块对象，CommonJS 的风格通过对 module. exports 或 exports 的属性赋值来达到暴露模块对象的目的。

CMD 模块方式

define(function(require, exports, module) {
    // 模块代码
});

参与互动

参考答案：

调试模式中的按钮作用 F8 跳出断点调试模式 F10、F11 代码的逐行调试

进入断点调试模式的 方法

1. 在浏览器当中打断点
2. 直接在代码中加 debugger

参与互动

参考答案：

参与互动

参考答案：

参与互动

参考答案：

参与互动

参考答案：

Performance 接口可以获取到当前页面中与性能相关的信息。
该类型的对象可以通过调用只读属性 Window. performance 来获得。
白屏时间：

performance.timing.responseStart - performance.timing.navigationStart

首屏时间

window.onload = () => {
    new Date() - performance.timing.responseStart
}

解析：参考

参与互动

参考答案：

参与互动

参考答案：

参与互动

参考答案：

参与互动

参考答案：

参与互动

参考答案：

参与互动

参考答案：

参与互动

参考答案：

参与互动

参考答案：

参与互动

参考答案：

参与互动

参考答案：

参与互动

参考答案：

一般来说分为两种：一种是将所有路由数据存储在本地文件中，然后从服务端获取用户的权限信息，在路由跳转时，添加权限判断钩子，如果用户前往的页面不在权限列表内，则禁止跳转。另一种则是本地只存储基本路由，如错误处理页面、无权限控制页面等，而权限路由则从服务器获取，服务器根据用户的权限下发相应的路由数据，客户端利用这些数据进行路由的动态生成和添加。 参考

参与互动

参考答案：

参与互动

参考答案：

参与互动

参考答案：

参与互动

参考答案：

参与互动

参考答案：

参与互动

参考答案：

参与互动

参考答案：

参与互动

参考答案：

参与互动

参考答案：

• 需求分析及变更管理
• 项目模型及业务流程分析
• 系统分析及建模设计
• 界面设计及代码开发
• 系统测试，部署和文档编写
• 维护

参与互动

参考答案：

• html5 websoket
• WebSocket 通过 Flash
• XHR 长时间连接
• XHR Multipart Streaming
• 不可见的 Iframe
• <script> 标签的长时间连接(可跨域)

参与互动

参考答案：

立即执行函数, 不暴露私有成员

var module1 = (function() {
    var _count = 0;
    var m1 = function() {
        //...
    };
    var m2 = function() {
        //...
    };
    return {
        m1: m1,
        m2: m2
    };
})();

参与互动

参考答案：

1、尽量减少 HTTP 请求 2、使用浏览器缓存 3、使用压缩组件 4、图片、JS 的预载入 5、将脚本放在底部 6、将样式文件放在页面顶部 7、使用外部的 JS 和 CSS 8、精简代码

参与互动

参考答案：

尽量使用 css3 动画，开启硬件加速。适当使用 touch 事件代替 click 事件。避免使用 css3 渐变阴影效果。 尽可能少的使用 box-shadow 与 gradients。box-shadow 与 gradients 往往都是页面的性能杀手

参与互动

参考答案：

参与互动

参考答案：

参与互动

参考答案：它是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式设计是让所有的人能在这些设备上让网站运行正常

参与互动

参考答案：前端异常监控

参与互动

参考答案：

• Ascii（1 个字节 1 个字符）

• GBK 是国内的编码标准（汉字 2 个字节）

• Unicode 是国际编码标准（统一 2 个字节表示一个字符）

• UTF 是 Unicode 实现的另一个标准

  unicode 同样也不完美，这里就有两个的问题，一个是，如何才能区别 unicode 和 ascii？
  由于”半角”英文符号只需要用到低 8 位，所以其高 8 位永远是 0，因此这种大气的方案在保存英文文本时会多浪费一倍的空间
  unicode 在很长一段时间内无法推广，直到互联网的出现，为解决 unicode 如何在网络上传输的问题，于是面向传输的众多 UTF（UCS Transfer Format）标准出现了，顾名思义，UTF-8 就是每次 8 个位传输数据，而 UTF-16 就是每次 16 个位。UTF-8 就是在互联网上使用最广的一种 unicode 的实现方式，这是为传输而设计的编码，并使编码无国界，这样就可以显示全世界上所有文化的字符了。UTF-8 最大的一个特点，就是它是一种变长的编码方式。它可以使用 1~4 个字节表示一个符号，根据不同的符号而变化字节长度，当字符在 ASCII 码的范围时，就用一个字节表示，保留了 ASCII 字符一个字节的编码做为它的一部分，注意的是 unicode 一个中文字符占 2 个字节，而 UTF-8 一个中文字符占 3 个字节）。从 unicode 到 utf-8 并不是直接的对应，而是要过一些算法和规则来转换。

解析：参考

参与互动

参考答案：

图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。

如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

如果图片为 css 图片，可以使用 CSSsprite，SVGsprite，Iconfont、Base64 等技术。

如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

解析：参考

参与互动

参考答案：

1、禁止使用 iframe（阻塞父文档 onload 事件）；
*iframe 会阻塞主页面的 Onload 事件；
*搜索引擎的检索程序无法解读这种页面，不利于 SEO;
*iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe，最好是通过 javascript
动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题。

2、禁止使用 gif 图片实现 loading 效果（降低 CPU 消耗，提升渲染性能）；
3、使用 CSS3 代码代替 JS 动画（尽可能避免重绘重排以及回流）css3 平面动画开启 translateZ(0)，打开浏览器 3d 加速，在一定程度可缓解卡顿。不宜多用；
4、对于一些小图标，可以使用 base64 位编码，以减少网络请求。但不建议大图使用，比较耗费 CPU；
小图标优势在于： 1.减少 HTTP 请求； 2.避免文件跨域； 3.修改及时生效；
5、页面头部的 `<style></style>` 会阻塞页面；（因为 Renderer 进程中 JS 线程和渲染线程是互斥的）；
6、页面头部 `<script</script>` 会阻塞页面；（因为 Renderer 进程中 JS 线程和渲染线程是互斥的）；
7、页面中空的 href 和 src 会阻塞页面其他资源的加载 (阻塞下载进程)；
8、网页 Gzip，CDN 托管，data 缓存 ，图片服务器；
9、前端模板 JS+数据，减少由于 HTML 标签导致的带宽浪费，前端用变量保存 AJAX 请求结果，每次操作本地变量，不用请求，减少请求次数
10、用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能。
11、当需要设置的样式很多时设置 className 而不是直接操作 style。
12、少用全局变量、缓存 DOM 节点查找的结果。减少 IO 读取操作。
13、避免使用 CSS Expression（css 表达式)又称 Dynamic properties(动态属性)。
14、图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
15、 避免在页面的主体布局中使用 table，table 要等其中的内容完全下载之后才会显示出来，显示比 div+css 布局慢。
对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘 IO。
向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，
能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，
本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。
减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如 join 查询），
减少磁盘 IO 指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。
16、通过改变 src 的情况下\*\*.MP3（不同于 mp3）在移动端有可能不能播放。

参与互动

参考答案：

1. 什么是前端路由？

   路由是根据不同的 url 地址展示不同的内容或页面

   前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据 url 的不同返回不同的页面实现的。

2. 什么时候使用前端路由？

   在单页面应用，大部分页面结构不变，只改变部分内容的使用

3. 前端路由有什么优点和缺点？

   优点

   用户体验好，不需要每次都从服务器全部获取，快速展现给用户

   缺点

   使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存

   单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置

参与互动

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案： npm3 和 npm2 对于依赖的处理不一样了，npm2所有项目依赖是嵌套关系，而npm3为了改进嵌套过多、套路过深的情况，会将所有依赖放在第二层依赖中（所有依赖只嵌套一次，彼此平行，也就是平铺的结构）

参考

参考答案：

参考答案：

1. 负责前端团队的管理及与其他团队的协调工作，提升团队成员能力和整体效率；
2. 带领团队完成研发工具及平台前端部分的设计、研发和维护；
3. 带领团队进行前端领域前沿技术研究及新技术调研，保证团队的技术领先；
4. 负责前端开发规范制定、功能模块化设计、公共组件搭建等工作，并组织培训。

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：

（一）：cookie
    前端 post 账号密码，后端 response header: set-cookie, 将 token 插入 cookie 内，之后每次针对该域名下的请求都会带上 cookie。
（二）：jwt
    前端 post 账号密码，后端 generate jwt token 返回前端，前端根据 token 存储于 js 堆栈内，然后于发起请求的时候手动携带。

参考答案：提高网站安全性，比如网站有论坛方面的功能，那需要保证不让黑客通过拦截请求信息，发起对论坛信息的破解。在比如DDOS 攻击

参考答案：

参考答案：

参考答案：

参考答案：

参考答案：