前端笔记

发表于 | 分类于

基础

  • html
    1、html5
    新特性、画布、媒体元素、本地存储、编辑拖拽、新跨域机制、地理位置及文件等API、多平台兼容(PC,手机)
存储：
    cookie：本身由于C/S通讯，借用来存储，使用document.cookie = 获取和修改
        存储量4KB,http请求携带(影响效率),API简单需封装
    localStorage：H5专为存储设计(在浏览器中不清理则永久存储)
        存储量5MB，使用简单
        localStorage.setItem(key,value);
        localStorage.getItem(key);
        //ios safari隐藏模式下，localStorage.getItem会报错，建议统一使用try-catch封装
    sessionStorage：H5专为存储设计(关闭会话或浏览器时清理)
        存储量5MB，使用类似localstorage
    2、xhtml
    3、xml
  • css
    1、css
    2、css3
    新特性、动画效果
  • javascript
    1、原生js：原型链、闭包、单线程异步等核心理解
    2、jQuery，Zepto，bootstrap，swiper等框架应用
    3、阅读源码，理解框架原理
  • 浏览器兼容性
    1、内核
    Trident内核(IE内核)
webkit内核(Safari)
Gecko内核(Firefox)
Blink内核(Chrome)
    2、基础属性支持

跨域

  • 含义
    浏览器同源策略，不予许访问域外接口
    跨域条件：协议、域名、端口，有一个不同就算跨域
    可跨域的三个标签：
    < img src=xxx>    打点统计(统计网址可能为其他域：百度统计，站长统计，谷歌分析)
< link href=xxx>    引用CDN
< script src=xxx>     引用CDN，用于JSONP
    所有跨域请求都必须经过信息提供方允许(否则即为同源策略漏洞)

  • JSONP原理
    加载一个文件(服务器端不一定真有，可根据请求动态生成并返回)

    假设网站需要跨域访问xx.com的一个接口
其提供的地址为"http://xx.com/api.js"
返回内容格式为callback({x:1,y:2})(动态生成)


    1
    2
    3
    4
    5
    6
    <script>
    window.callback = function(data){
    	console.log(data);
    }
    </script>
    <script src="http://xx.com/api.js"></script> //返回callback({x:1,y:2}),执行已经定义好的函数

  • http header(服务器端设置)

    1
    2
    3
    4
    5
    6
    //不同后端语言可能写法不一样
    response.setHeader("Access-Control-Allow-Origin","http://a.com,http://b.com"); //第二个参数不建议写"*"
    response.setHeader("Access-Control-Allow-Headers","X-Requested-With");
    response.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE.OPTIONS");
    //接收跨域的cookie
    response.setHeader("Access-Control-Allow-Credentials","true");

模块化

  • 理解模块化含义
    不使用模块化：需要全部引入所需js文件并且互相暴露全局变量及函数
    使用模块化：引用所需js，被引用的js吐出变量给引用js，不暴露给全局
  • AMD(异步模块定义)
    requirejs
    全局define函数
全局require函数
依赖的JS会自动、异步加载
  • CommontJS(使用npm时建议)
    nodejs模块化规范，现被大量用于前端
    前端开发依赖库和插件，都可从npm获取
    构建工具自动化，使用npm成本低
    CommonJS不是异步加载，而是同步一次性加载

构建工具

  • 简介
    grunt,gulp,fis3,webpack(need node,npm)
    http-server搭建(浏览静态网页)
    npm install http-server -g
    进入静态页面所在文件夹执行
    http-server -p 8081
    npm init //初始化(生成package.json)
    npm install webpack –save-dev //保存webpack到开发环境
    npm install jquery –save //生产环境也需要(因此不加-dev)
    npm install moment –save //演示安装模块
    npm uninstall moment –save //演示卸载模块

上线回滚

  • 流程
    各公司具体流程及工具不同(要点如下)
    上线：
    1.将测试完成代码提交到git的master分支
    2.将当前服务器代码全部打包并记录版本号，备份
    3.将master分支的代码覆盖到服务器，生产新版本号
    回滚：
    1.将当前服务器代码全部打包并记录版本号，备份
    2.将备份的上一个版本解压覆盖到服务器，并生产新的版本号

前端三大框架(Angular,React,Vue)

  • 理解框架类型及区别
    mvc(angular)
    mv*
  • vue优势及其开发环境
  • node,npm应用

性能优化

  • 核心
    1、多利用内存及缓存或其他
    2、减少CPU计算，减少网络请求

  • 方法
    1、减少http请求次数

    打包css，js文件(静态资源压缩合并)

    2、渲染优化

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    //原则上css提前，js提后
    //lazyLoad(下拉加载更多或缩略图替换)
    //设置很小的缩略图a.png,当需要用时通过js加载真实图片地址
    	<img id="img" src="a.png" realsrc="b.png"/>
    	<script>
    		var img = document.getElementById('img');
    		img.src = img.getAttribute('realsrc');
    	</script>
    //减少DOM操作(缓存DOM查询,合并操作)
    	//未缓存DOM查询
    	for(var i = 0;i<document.getElementsByTagName('p').length;i++){
    		//
    	}
    	//缓存DOM查询
    	var pList = document.getElementsByTagName('p');
    	for(var i=0;i<pList.length;i++){
    		//
    	}
    	//多个操作合并执行
    	var listNode = document.getElementsById('list');
    	var frag = document.createDocumentFragment(); //定义片段
    	for(var x=0;x<10;x++){
    		var li = document.createElement("li");
    		li.innerHTML = 'list '+ x;
    		frag.appendChild(li);  //插入片段，不操作DOM
    	}
    	listNode.appendChild(frag);  //一次DOM插入
    //事件节流(例子)
    	var textarea = document.getElementById('text');
    	var timeoutId;
    	textarea.addEventListener('keyup',function(){
    		if(timeoutId){
    			clearTimeout(timeoutId);
    		}
    		timeoutId = setTimeout(function(){
    			//当key事件间隔小于100ms(快速击键)时，timeoutId定时器被清空，减少计算次数
    		},100)
    	})
    尽早执行操作(如DOMContentLoaded)

    3、浏览器缓存
    4、使用cdn(bootcdn,百度cdn等)
    5、SSR服务端渲染，数据直接输出到HTML(JSP,PHP,ASP)
    6、减小Cookie大小
    7、优化JavaScript代码

安全

出于性能考虑，此块最好由后端处理
  • 常见攻击方式
    xss(Cross-site scripting 跨站脚本攻击)
    例子：在发布的内容中插入一段< script>，用户访问时获取cookie发送到攻击者服务器
预防：<,>替换为&lt,&gt.前后端均可替换，考虑到性能，最好后端替换
    xsrf(Cross-site request forgery 跨站请求伪造)
    例子：登录购物网站，假设有一个无验证的付费接口"xxx"，若收到文件(如邮件)中隐藏< img src="xxx">,则当你查看时就会悄悄付款
解决：增加验证流程，如指纹，密码等

开发环境

  • IDE
    vscode,sublime,webstorm,atom(github),插件
  • git(coding.net,github.com,公司自己的git服务器)
    git add . //添加全部
    git checkout xx //还原文件
    git commit -m “xx”
    git push origin master
    git pull origin master
    git branch //查看当前分支
    git checkout -b xx //新建分支
    git checkout xx //切换分支
    git merge xx
  • linux
    基本命令：
    mkdir directory //创建目录
    ls //查看当前目录文件
    ll //查看当前目录文件详细信息
    pwd //查看当前所在目录
    cd / //：进入根目录（/表示根目录）
    cd etc //进入etc目录
    cd .. //返回上级目录
    vi a.js //编辑a.js文件(无则创建)
    rm -rf xx //删除xx文件夹
    rm a.js //删除文件
    cp a.js b.js //复制a.js命名为b.js
    mv a.js src/a.js //移动文件
    cat a.js //查看内容
    head a.js //查看头部内容
    tail a.js //查看尾部内容
    head -n 2 a.js //查看前两行(指定行)内容
    grep ‘2’ a.js //搜索

运行环境

  • 资源加载过程
    1.地址栏输入域名回车
    2.浏览器根据DNS得到域名对应的IP
    3.与该服务器建立TCP连接(三次握手)
    4.web浏览器向web服务器发送请求命令及请求头和请求体信息
    5.web服务器发送响应头信息及数据
    6.web服务器关闭TCP连接(四次挥手)
  • 浏览器渲染页面过程
    1.根据请求的HTML生成DOM树
    2.根据CSS生成CSSOM
    3.将DOM和CSSOM整合成RenderTree
    4.浏览器根据RenderTree渲染
    5.遇到< script>时，执行js并阻塞渲染