一、渲染机制
什么是DOCTYPE及作用
-
DTD就是告诉浏览器我是什么文档类型，浏览器便以此判断用什么引擎来解析渲染它
-
DOCTYPE就是直接告诉浏览器什么是DTD
HTML5
HTML4.01 Strict(严格模式)
HTML4.01 Transitional(宽松模式)
浏览器渲染过程
重排
重绘
二、错误监控
即时运行错误的捕获方式
- try...catch
- window.onerror
资源加载错误
- object.onerror
- performance.getEntries()
- Error事件捕获
上报错误的基本原理
- 采用Ajax通信方式上报
- 利用Image对象上报
三、bind/call/apply的区别
相同点：
- 都是用来改变函数的this对象的指向的；
- 第一个参数都是this要指向的对象；
- 都可以利用后续参数传参。
区别
-
call 对函数直接调用 第一个参数是改变this指向的对象 直接传参
函数名.call(目标对象,参数1,参数2,...参数n) 例如：getName.call(obj, 'Leslie', 18) -
apply 对函数的直接调用 第一个参数是改变this指向的对象 参数用数组包裹
函数名.apply(目标对象,[参数1,参数2,...参数n]) 例如：getName.apply(obj, ['Leslie', 18]) -
bind 返回一个函数 第一个参数是改变this指向的对象 直接传参
getName.bind(obj, 'Leslie', 18)() 或 getName.bind(obj)('Leslie', 18) -
call和apply是直接调用函数
-
bind是返回函数本身，如果要执行，必须再后面再加()调用
getName.bind(obj)()
四、Webpack打包原理
webpack只是一个打包模块的机制，只是把依赖的模块转化成可以代表这些包的静态文件。webpack就是识别你的入口文件，识别你的模块依赖，来打包你的代码。webpack做的就是分析代码、转换代码、编译代码、输出代码。
示例：
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口起点
entry: './src/index.js',
output: {
// 输出文件名
filename: 'built.js',
// 输出路径
// __dirname，nodejs的变量，代表当前文件目录的绝对路径
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
// 匹配哪些文件
test: /\.css$/,
// 使用loader进行处理(从右到左，从下到上)
use: [
// 创建style标签，将js中的样式资源插入运行，添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载js中，里面的内容是样式字符串
'css-loader'
]
},
{
test: /\.less$/,
// 使用多个loader用use
use: ['style-loader', 'css-loader', 'less-loader']
},
{
test: /\.(jpg|png|gif)$/,
// 使用单个loader
// 下载两个loader：url-loader、file-loader
loader: 'url-loader',
options: {
// 图片小于10kb，就会被base64处理
// 优点：减少请求
// 缺点：图片体积变大
limit: 10 * 1024,
// 问题：url-loader默认使用es6模块化解析，html-loader引入图片是commonJS
esModule: false,
// 给图片重命名
// [hash:10]取图片hash的前10位
// [ext]取文件原来的扩展
name: '[hash:10].[ext]'
}
},
{
test: /\.html$/,
// 处理html文件的img图片（负责引入img，从而能被url-loader处理）
loader: 'html-loader'
},
{
exclude: /\.(html|css|less|js)$/,
// 处理其它文件
loader: 'file-loader',
options: {
name: '[hash:10].[ext]'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'
// mode: 'production'
}
/**
* 1、Webpack是一种前端资源构建工具，一个静态模块打包器(module bundler)；
* 2、在Webpack看来，前端的所有资源文案(js/json/css/less/...)都会作为模块处理；
* 3、它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。
*
* Webpack五个核心概念
*
* 1、Entry
* 入口(entry)指示Webpack以哪个文件为入口起点开始打包，分析构建内部依赖图；
*
* 2、Output
* 输出(output)指示Webpack打包后的资源bundles输出到哪里去，以及如何命名；
*
* 3、Loader
* loader让Webpack能够去处理那些非js文件(Webpack自身只理解js)；
*
* 4、Plugins
* 插件(plugins)可用于执行范围更广的任务。插件的范围包括，从打包优化和压缩一直到重新定义环境中的变量等；
*
* 5、Mode * 模式(mode)指示Webpack使用相应模式的配置。
* development：会将process.env.NODE_ENV的值设为development，能让代码本地调试运行的环境；
* production：会将process.env.NODE_ENV的值设为production，能让代码优化上线运行的环境；
*
*/
