作者: SeaseeYoul | 来源:发表于2018-02-28 14:19 被阅读32次

优化

react:

constructor:
构造函数，在创建组件之前调用（1次）
componentWillMount：
挂载之前调用，如果在这个函数里面调用setState，本次的render函数可以看到更新后的state，并且只渲染一次（1次）
componentDidMount：
在组件挂载之后调用一次。这个时候，子主键也都挂载好了，可以在这里使用refs。（1次）
componentWillReceiveProps：
父组件发生render的时候子组件就会调用componentWillReceiveProps
shouldComponentUpdate：
每次调用setState后都会调用shouldComponentUpdate判断是否需要重新渲染组件。默认返回true，需要重新render。在比较复杂的应用里，有一些数据的改变并不影响界面展示，可以在这里做判断，优化渲染效率。
componentWillUpdate：
shouldComponentUpdate返回true或者调用forceUpdate之后，componentWillUpdate会被调用。
componentDidUpdate：
除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate。
componentWillMount、componentDidMount和componentWillUpdate、componentDidUpdate可以对应起来。区别在于，前者只有在挂载的时候会被调用；而后者在以后的每次更新渲染之后都会被调用。
componentWillUnmount：
组件被卸载的时候调用。一般在componentDidMount里面注册的事件需要在这里删除。

实现跨域的几种方式

jsonp

javascript是网络资源可以跨域

cors

服务器设定允许跨域

postMessage

基本原理现在就比较清晰了，我们依然使用同源iframe做代理，但是主页面与iframe的通讯方式是利用
postMessage实现的。

JavaScript异步编程

回调函数

。这是在回调函数使用中的一种普遍的魔术。另一种常见的模式是定义一个命名函数并将函数名作为变量传递给函数

事件监听

事件的三个阶段：捕获，目标，冒泡。
捕获阶段：从外到内，监听中设置为true,子类事件不产生
目标阶段：点击的目标
冒泡阶段：从内到外

发布订阅者模式

加入信号，触发信号执行事件

Promise

css3

translate()只支持x,y轴的变换 translate3d支持x,y,z轴的变换

<div id="test1">
    <span id="test2"></span>
</div>

#test1 {
    display: none;
}
#test2 {
    background-image: url('mypic.jpg');
    visibility: hidden;
}

mypic.jpg不会被加载

overfloa:hidden 是否形成新的块级格式化上下文？答：会。
会触发BFC的条件有：
float的值不为none。
overflow的值不为visible。
display的值为table-cell, table-caption, inline-block 中的任何一个。
position的值不为relative 和static。
根元素。

css3

圆角

渐变

    background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, red , blue); /* 标准的语法 */

动画

| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 | 3 |
| animation-name | 规定 @keyframes 动画的名称。 | 3 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
| animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 | 3 |
| animation-delay | 规定动画何时开始。默认是 0。 | 3 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | 3 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 | 3 |

过渡

| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |

转换

translate /3d
scale /XYZ
route /XYZ
perspective

盒子模型

flex

BFC

BFC(Block Formatting Contexts)意为“块级格式化上下文”。就是页面上的一个渲染区域，容器内的子元素不会对外面的元素布局产生影响，反之亦然。如何生成BFC：
float的值不为none;
overflow的值不为visible;
position的值不为relative和static;
display的值为table-cell,table-caption何inline-block中的任何一个。
规则：
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

IFC

IFC(Inline Formatting Contexts)意为“内联格式化上下文”,IFC中，盒子依次水平放置，从包含块的顶部开始。

GFC

GFC(GridLayout Formatting Contexts)意为“网格布局格式化上下文”当一个元素设置为display:grid的时候，此元素将获得一个独立的渲染区域，可以在网格容器上定义网格行和列，为每一个网格定义位置和空间。GFC和table的区别在于GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染。

FFC

FFC(Flex Formatting Contexts)意为“自适应格式化上下文”,display值为flex或者inline-flex的元素将会生成自适应容器，当前只有谷歌和火狐支持该属性，不过在移动端几乎没有障碍(移动端是chrome和Safari的天下)。flex box由伸缩容器和伸缩子元素组成。通过设置元素display:flex/inline-flex可以得到伸缩容器，前者为块级元素，后者为行内元素。伸缩容器外元素不受影响。

vue

javascript

1.ES6

2.设计模式

3.继承
1. 所有的对象都有proto属性，该属性对应该对象的原型.
2. 所有的函数对象都有prototype属性，该属性的值会被赋值给该函数创建的对3. 象的proto属性.
4. 所有的原型对象都有constructor属性，该属性对应创建所有指向该原型的实例的构造函数.
5. 函数对象和原型对象通过prototype和constructor属性进行相互关联.

webpack

module.exports = {
    entry:"./src/app.js",
    output:{
        path:__dirname + "/dist",
        filename: "bundle.js"
    },
    module:{
        loaders:[
            {
                test:/\.(js|jsx)$/,
                exclude:/node_modules/,
                loader:"babel-loader",
                query:{presets: [ 'es2015', 'react' ,'stage-0'] }
            },
            {
                test:/\.css$|\.scss$/,
                loader:"style-loader!css-loader!sass-loader"
            },
            {
                test:/.(png|jpg|jpeg|gif)$/,
                loader: 'url?limit=25000'
            }
        ]
    },
    devServer:{
        contentBase:"./virtual",
        hot:true,
        historyApiFallback: false,
        port:8080,
        inline: true, // Livereload
        host: '0.0.0.0',
    },
    plugins: [
        new CleanPlugin(['dist/*']),
        new webpack.DefinePlugin({
            //去掉react中的警告，react会自己判断
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
/*      new HtmlWebpackPlugin({
            template: './public/template.html',
            htmlWebpackPlugin: {
                "files": {
                    "css": ["style.css"],
                    "js": ["vendors.js","bundle.js"]
                }
            },
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            }
        }),*/
        new webpack.HotModuleReplacementPlugin()
        //new OpenBrowserPlugin({url: 'http://127.0.0.1:8080/'})
    ]
}

打包优化

总结需要抽离的公共依赖。
使用CDN引入资源
加上cacheDirectory参数或使用 transform-runtime

 externals: {
        'react': 'React',
        'react-dom': 'ReactDOM',
        'react-router': 'ReactRouter',
        'redux': 'Redux',
        'history': 'History'
    },

gulp

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    autoprefixer = require("gulp-autoprefixer"),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    imagemin = require('gulp-imagemin'),
    spritesmith = require('gulp.spritesmith'),
    cleancss = require('gulp-clean-css'),
    merge = require('merge-stream'),
    connect = require('gulp-connect');

//var folders = ['common', '20170623', 'FindLawyer','LawyerBackstage','LawyerLibrary','LearnLaw','Login','OnlineLawyer','personalCenter','LawLibrary'];
var folders = ['common','Consult'];
gulp.task('styles', function(){
    var tasks = folders.map(function(element){
        return gulp.src('./scss/'+element + '/*.scss')
            .pipe(sass())                   //调用sass插件
            .pipe(gulp.dest('./css/'+element))      //输出到目标目录
    .pipe(rename({suffix: '.min'}))         //重命名
    .pipe(cleancss({compatibility: 'ie8'}))     //压缩样式
    .pipe(gulp.dest('./css/'+element))      //输出到相同目录
    .pipe(notify('css  style task complete'))
    });

    return merge(tasks);                    //合并任务
});

gulp.task('imgmin', function() {                //图片压缩
    gulp.src('./_imgmax/*.{png,jpg,gif,ico}')       //原图片资源地址
    .pipe(imagemin({                //调用压缩插件
        optimizationLevel: 5,           //类型：Number  默认：3  取值范围：0-7（优化等级）
        progressive: true,          //类型：Boolean 默认：false 无损压缩jpg图片
        interlaced: true,               //类型：Boolean 默认：false 隔行扫描gif进行渲染
        multipass: true                 //类型：Boolean 默认：false 多次优化svg直到完全优化
    }))
    .pipe(gulp.dest('./img'))               //输出目录
    .pipe(notify('images  compress task complete'))     //提示任务完成    
});

gulp.task('spriter', function () {
    return gulp.src('./_imgmax/icons/*.png')    //需要合并的图片地址
    .pipe(spritesmith({
        imgName: 'sprite.png',          //保存合并后图片的地址
        cssName: 'css/sprite.css',      //保存合并后对于css样式的地址
        padding:10,             //间距
        algorithm:'top-down'
        //cssTemplate:"css/handlebarsStr.css"   //注释2
    }))
    .pipe(gulp.dest('./_imgmax'));
});

gulp.task('webserver', function() {
    connect.server({
        livereload: true,
        port: 4546
    })
});

http1.1 / http tcp ip

三次握手四次挥手

第一次握手：192.168.1.116发送位码syn＝1,随机产生seq number=3626544836的数据包到192.168.1.123,192.168.1.123由SYN=1知道192.168.1.116要求建立联机;
第二次握手：192.168.1.123收到请求后要确认联机信息，向192.168.1.116发送ack number=3626544837,syn=1,ack=1,随机产生seq=1739326486的包;
第三次握手：192.168.1.116收到后检查ack number是否正确，即第一次发送的seq number+1,以及位码ack是否为1，若正确，192.168.1.116会再发送ack number=1739326487,ack=1，192.168.1.123收到后确认seq=seq+1,ack=1则连接建立成功。
挥手告别

挥手告别：

http报文头

HOST：请求资源所在服务器
Connection keep-alive：一般情况下，一旦web服务器向浏览器发送了请求数据，他就要关闭TCP连接，然后如果浏览器或者服务器在其头信息加入了Connection:keep-alive，则TCP连接在发送后仍将保持打开状态，于是，浏览器可以继续通过相同的连接发送请求，保持连接节省了为每个请求建立新连接所需要的时间，还节约了网络带宽。
User-Agent:客户端程序的信息，就是我发送请求的浏览器信息。
Accept：列出了浏览器可以接收的媒体数据类型：
**Accept-Encoding: **是浏览器用来告知服务器它能够支持的内容编码及内容编码的优先级顺序，可一次性指定多种内容编码。gzip：有文件压缩程序gzip生成的编码格式。deflate：组合使用zlib格式和deflate压缩算法生成的编码格式。sdch： Shared Dictionary Compression over HTTP字典压缩算法。
Accept-Language:告知服务器浏览器能够处理的自然语言集（中文、英文等）。zh-CN中文简体。
Cookie：浏览器记录的用户相关信息
第一行状态行：给出了状态码200，表示请求已被正常处理。
Server：这是服务器用来告诉客户端当前服务器上安装的HTTP服务器应用程序的信息，可能包含服务器上的软件应用名称，版本号等。
Content-Type:此字段标明了服务器返回给浏览器的实体内容的类型是text/html，charset为UTF-8。这部分与请求头中的Accept相对应。
Transfer-Encoding: chunked 表示输出的内容长度不能确定，普通的静态页面、图片之类的基本上都用不到这个。动态页面中可能会用到。
**Cache-Control: **缓存控制，默认值为private，表示内容只缓存到私有缓存中(仅客户端可以缓存，代理服务器不可缓存)。
Expires:告知客户端资源失效的日期。当浏览器看到响应中有一个Expires头时，它会和相应的组件一起保存到其缓存中，只要组件没有过期，浏览器就会使用缓存版本而不会进行任何的HTTP请求。Expires设置的日期格式必须为GMT（格林尼治标准时间）。
**X-UA-Compatible: **设置浏览器兼容模式。 IE=Edge 指定IE浏览器以最新的标准来渲染页面，chrome=1 则可以激活Chrome Frame，将允许站点在使用了谷歌浏览器内嵌框架（Chrome Frame）的客户端渲染，对于没有使用的，则没有任何影响。

web安全 csrf 跨域相关

Xss跨站脚本攻击意代码提交给服务器，并且存储在服务器端，当用户访问相关内容时再渲染到页面中，以达到攻击的目的，它的危害更大。
CSRF跨站请求伪造使用验证码
cookie劫持 httponly
sql注入代码转义

盒子模型

flex布局

display: -webkit-box;
display: box;
浮动/清除浮动
删栏布局 / 删布局

http1.1 与2.0的区别

HTTP/2采用二进制格式而非文本格式
HTTP/2是完全多路复用的，而非有序并阻塞的——只需一个连接即可实现并行
使用报头压缩，HTTP/2降低了开销
HTTP/2让服务器可以将响应主动“推送”到客户端缓存中

① 客户方错误
100 继续
101 交换协议
② 成功
200 OK
201 已创建
202 接收
203 非认证信息
204 无内容
205 重置内容
206 部分内容
③ 重定向
300 多路选择
301 永久转移
302 暂时转移
303 参见其它
304 未修改（Not Modified）
305 使用代理
④ 客户方错误
400 错误请求（Bad Request）
401 未认证
402 需要付费
403 禁止（Forbidden）
404 未找到（Not Found）
405 方法不允许
406 不接受
407 需要代理认证
408 请求超时
409 冲突
410 失败
411 需要长度
412 条件失败
413 请求实体太大
414 请求URI太长
415 不支持媒体类型
⑤ 服务器错误
500 服务器内部错误
501 未实现（Not Implemented）
502 网关失败
504 网关超
505 HTTP版本不支持

get post put delete option

0，GET：GET可以说是最常见的了，它本质就是发送一个请求来取得服务器上的某一资源。资源通过一组HTTP头和呈现数据（如HTML文本，或者图片或者视频等）返回给客户端。GET请求中，永远不会包含呈现数据。
1，HEAD：HEAD和GET本质是一样的，区别在于HEAD不含有呈现数据，而仅仅是HTTP头信息。有的人可能觉得这个方法没什么用，其实不是这样的。想象一个业务情景：欲判断某个资源是否存在，我们通常使用GET，但这里用HEAD则意义更加明确。
2，PUT：这个方法比较少见。HTML表单也不支持这个。本质上来讲， PUT和POST极为相似，都是向服务器发送数据，但它们之间有一个重要区别，PUT通常指定了资源的存放位置，而POST则没有，POST的数据存放位置由服务器自己决定。举个例子：如一个用于提交博文的URL，/addBlog。如果用PUT，则提交的URL会是像这样的”/addBlog/abc123”，其中abc123就是这个博文的地址。而如果用POST，则这个地址会在提交后由服务器告知客户端。目前大部分博客都是这样的。显然，PUT和POST用途是不一样的。具体用哪个还取决于当前的业务场景。
3，DELETE：删除某一个资源。基本上这个也很少见，不过还是有一些地方比如amazon的S3云服务里面就用的这个方法来删除资源。
4，POST：向服务器提交数据。这个方法用途广泛，几乎目前所有的提交操作都是靠这个完成。
5，OPTIONS：这个方法很有趣，但极少使用。它用于获取当前URL所支持的方法。若请求成功，则它会在HTTP头中包含一个名为“Allow”的头，值是所支持的方法，如“GET, POST”。

网页加载优化

图片优化
使用免费 cdn 加载第三方资源
http协商缓存 302
合并压缩 js css
HTTP2 与 gzip

web安全
xss ：以简单的理解为一种javascript代码注入
csrf
tsl/ssl
sql注入：表单提交sql语句
cors Cross-site request forgery

cookie的HttpOnly

https://segmentfault.com/a/1190000010913697

ajax 自己实现

var Ajax={
    get: function(url, fn) {
        var xhr = new XMLHttpRequest();  // XMLHttpRequest对象用于在后台与服务器交换数据          
        xhr.open('GET', url, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { // readyState == 4说明请求已完成
                fn.call(this, xhr.responseText);  //从服务器获得数据
            }
        };
        xhr.send();
    },
    post: function (url, data, fn) {         // datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
        var xhr = new XMLHttpRequest();
        xhr.open("POST", url, true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  // 添加http头，发送信息至服务器时内容编码类型
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {  // 304未修改
                fn.call(this, xhr.responseText);
            }
        };
        xhr.send(data);
    }
}

ajax的五种状态

 0 － （未初始化）还没有调用send()方法
 1 － （载入）已调用send()方法，正在发送请求
 2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
 3 － （交互）正在解析响应内容
 4 － （完成）响应内容解析完成，可以在客户端调用了

js
基本数据类型
内置类型：null undefined string number symbol object boolean,除开object 其他的就是基本类型

事件绑定

   //显示绑定
   obj.foo()

   const bind = (fn,obj) =>{
    return ()=>{
        return fn.apply(obj,arguments)
    }
   }

   new 绑定

   //如果不关心this的话 可以传递一个 null 空值占位

正则 / 原型链

express

避免回调地狱
https://www.jianshu.com/p/bc7b8d542dcd

浏览器按下回车发生了什么？

react

keys Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。

nodejs
https://www.cnblogs.com/meteorcn/p/node_mianshiti_interview_question.html

babel

解析：将代码字符串解析成抽象语法树
变换：对抽象语法树进行变换操作
再建：根据变换后的抽象语法树再生成代码字符串

ES6

箭头函数需要注意的地方
ES6 let、const
set，map数据结构
promise对象的用法,手写一个promise
class的理解
模版语法的理解
rest参数
module体系
async

promise封装文件读取函数

import fs from "fs";
const readFile = fileName => {
    return new Promise( (reslove,reject)=>{
        fs.readFile(fileName,(error,data)=>{
            if ( error ) reject(error);
            reslove(data)
        })
    } )
}

Linux

find / -name file1 从 '/' 开始进入根文件系统搜索文件和目录
find / -user user1 搜索属于用户 'user1' 的文件和目录
find /home/user1 -name *.bin 在目录 '/ home/user1' 中搜索带有'.bin' 结尾的文件
find /usr/bin -type f -atime +100 搜索在过去100天内未被使用过的执行文件
find /usr/bin -type f -mtime -10 搜索在10天内被创建或者修改过的文件
mkdir
cd
ls
cp
mv
pwd
ln -s file1 lnk1 创建一个指向文件或目录的软链接
ln file1 lnk1 创建一个指向文件或目录的物理链接
passwd 修改口令
passwd user1 修改一个用户的口令 (只允许root执行)
chmod ugo+rwx directory1 设置目录的所有人(u)、群组(g)以及其他人(o)以读（r ）、写(w)和执行(x)的权限
chmod go-rwx directory1 删除群组(g)与其他人(o)对目录的读写执行权限
chown user1 file1 改变一个文件的所有人属性
chown -R user1 directory1 改变一个目录的所有人属性并同时改变改目录下所有文件的属性
yum install package_name 下载并安装一个rpm包
yum localinstall package_name.rpm 将安装一个rpm包，使用你自己的软件仓库为你解决所有依赖关系
yum update package_name.rpm 更新当前系统中所有安装的rpm包
yum update package_name 更新一个rpm包
yum remove package_name 删除一个rpm包
yum list 列出当前系统中安装的所有包
tar -cvfz archive.tar.gz dir1 创建一个gzip格式的压缩包
tar -xvfz archive.tar.gz 解压一个gzip格式的压缩包
zip file1.zip file1 创建一个zip格式的压缩包

vim

跳到指定行，冒号+行号，回车，
Ctrl + e 向下滚动一行
Ctrl + y 向上滚动一行
Ctrl + d 向下滚动半屏
Ctrl + u 向上滚动半屏
Ctrl + f 向下滚动一屏
Ctrl + b 向上滚动一屏
dl 删除当前字符， dl=x
dh 删除前一个字符
dd 删除当前行
dj 删除上一行
dk 删除下一行
:wq 保存并退出
:q! 强制退出并忽略所有更改
/text　　查找text，按n健查找下一个，按N健查找前一个。
?text　　查找text，反向查找，按n健查找下一个，按N健查找前一个。
vim中有一些特殊字符在查找时需要转义　　.*[]^%/?~$
:set ignorecase　　忽略大小写的查找
:set noignorecase　　不忽略大小写的查找
s/old/new/ 用old替换new，替换当前行的第一个匹配
s/old/new/g 用old替换new，替换当前行的所有匹配

map扩展

    if (!Array.prototype.map) {
        Array.prototype.map = function(callback, thisArg) {
            var T, A, k;
            if (this == null) {
                throw new TypeError(" this is null or not defined");
            }
            var O = Object(this);
            var len = O.length >>> 0;
            if (typeof callback !== "function") {
                throw new TypeError(callback + " is not a function");
            }
            if (thisArg) {
                T = thisArg;
            }
            A = new Array(len);
            k = 0;
            while(k < len) {
                var kValue, mappedValue
                if (k in O) {
                    kValue = O[ k ];
                    mappedValue = callback.call(T, kValue, k, O);
                    A[ k ] = mappedValue;
                }
                k++;
            }
            return A;
        };
    }

AMD CMD

对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.2. CMD 推崇依赖就近，AMD 推崇依赖前置

AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一

CMD 推崇依赖就近，AMD 推崇依赖前置
AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出

AJAX如何实现异步

js引擎本身不支持多线程，但是浏览器基本上都有三个线程：
js引擎线程、
事件触发线程、
http请求线程。
后两个线程在触发后会把对应的回调函数放到js引擎线程的执行队列中进行排队等待，只要js引擎线程空闲就会依次执行加入到队列中的回调函数。当然这些回调函数的执行依然是阻碍线程的。

浏览器缓存机制

Cache-Control no-cache 缓存但是不使用 no-store 不缓存 max-age 指定时间 public可以更改缓存资源 private针对单个用户缓存资源
Cache-Control与Expires的作用一致，都是指明当前资源的有效期，控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。只不过Cache-Control的选择更多，设置更细致，如果同时设置的话，其优先级高于Expires。
配置Last-Modified/ETag的情况下，浏览器再次访问统一URI的资源，还是会发送请求到服务器询问文件是否已经修改，如果没有，服务器会只发送一个304回给浏览器，告诉浏览器直接从自己本地的缓存取数据；如果修改过那就整个数据重新发给浏览器；
　　Cache-Control/Expires则不同，如果检测到本地的缓存还是有效的时间范围内，浏览器直接使用本地副本，不会发送任何请求。两者一起使用时，Cache-Control/Expires的优先级要高于Last-Modified/ETag。即当本地副本根据Cache-Control/Expires发现还在有效期内时，则不会再次发送请求去服务器询问修改时间（Last-Modified）或实体标识（Etag）了。

image.png

1. HTTP信息头中包含Cache-Control:no-cache，pragma:no-cache（HTTP1.0），或Cache-Control:max-age=0等告诉浏览器不用缓存的请求

2. 需要根据Cookie，认证信息等决定输入内容的动态请求是不能被缓存的

3. 经过HTTPS安全加密的请求（有人也经过测试发现，ie其实在头部加入Cache-Control：max-age信息，firefox在头部加入Cache-Control:Public之后，能够对HTTPS的资源进行缓存，参考《HTTPS的七个误解》）

4. POST请求无法被缓存

5. HTTP响应头中不包含Last-Modified/Etag，也不包含Cache-Control/Expires的请求无法被缓存

优化

dom深度尽量浅。减少inline javascript、css的数量。
使用现代合法的css属性。
不要为id选择器指定类名或是标签，因为id可以唯一确定一个元素。
避免后代选择符，尽量使用子选择符。原因：子元素匹配符的概率要大于后代元素匹配符。后代选择符;#tp p{} 子选择符：#tp>p{}
避免使用通配符，举一个例子，.mod .hd *{font-size:14px;} 根据匹配顺序,将首先匹配通配符,也就是说先匹配出通配符,然后匹配.hd（就是要对dom树上的所有节点进行遍历他的父级元素）,然后匹配.mod,这样的性能耗费可想而知.
，js的下载和执行会阻塞Dom树的构建。

关于css面试相关知识

浏览器渲染相关知识

html / css 解析相关知识

高性能动画相关知识

tcp / ip 浏览器工作过程，打开页面的经历过程

css相关知识（深刻？？）

html相关知识（标签/标签语义化）

svg / canvas相关知识

js操作css属性相关问题

repaint / reflow 问题引伸.......

高性能动画

-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);会开启GPU渲染模式
有一个CSS属性你可能认为会引起重绘，实际上却不会：opacity。GPU在合成的时候可以对opacity的改变进行处理，这只需要简单的用一个小的alpha值绘制元素的texture。当然，这个元素必须是层里唯一的元素。如果与其它元素在同一个层里，那么在GPU上改变opacity也一起改变。

在Blink和Webkit浏览上，带有CSS transition或animation 的opacity属性都会创建一个层。但是许多开发者使用translateZ(0)or translate3d(0,0,0)来手动强制创建层。强制层的创建确保动画开始时层被绘制并准备好使用。绘制层不是一个小的操作，它可能会延迟动画的开始；同时确保由于反锯齿的变化外观上没有改变。不管如何，层的创建应该是少量的。如果创建过多的层，可能会导致不流畅

改变元素的transform其实就是改变position,rotation或者scale。position经常采用left和top值来完成动画。这个问题，如上显示，left和top都会触发重绘操作，有很高的成本。更好的解决方式是在元素上使用translate，这个不会触发layout。

react:

实现跨域的几种方式

jsonp

cors

postMessage

JavaScript异步编程

回调函数

事件监听

发布订阅者模式

Promise

css3

css3

圆角

渐变

动画

过渡

转换

盒子模型

BFC

IFC

GFC

FFC

vue

javascript

1.ES6

2.设计模式

打包优化

gulp

http1.1 / http tcp ip

三次握手四次挥手

http报文头

web安全 csrf 跨域相关

盒子模型

http1.1 与2.0的区别

get post put delete option

网页加载优化

ajax的五种状态

AMD CMD

AJAX如何实现异步

浏览器缓存机制

优化

关于css面试相关知识

高性能动画

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读