又到了跳槽的季节, 现在也该总结一下自己在前端积累这么多年的一点珍藏的货色了, 注意了我主要总结是尽量用自己能表达的想法去说, 所有可能没别人总结的那么客观, 还有尽量用简短的话简单的思路去表达应该有的意思, 方便记忆理解, 还有这篇博文我会持续更新的
什么叫优雅降级和渐进增强(这个其实很多的, 但是我是不可能去背的, 所有尽量用少的话, 总结清楚)
- .transition{
- -webkit-transition: all .5s;
- -moz-transition: all .5s;
- -o-transition: all .5s;
- transition: all .5s;
- }// 渐进增强
- .transition{
- transition: all .5s;
- -o-transition: all .5s;
- -moz-transition: all .5s;
- -webkit-transition: all .5s;
- }// 优雅降级
优雅降级: 一开始就构建完整的功能, 然后再针对低版本浏览器进行兼容
渐进增强: 针对低版本浏览器进行构建页面, 保证最基本的功能, 然后再针对高级浏览器进行效果. 交互等改进和追加功能达到最好的用户体验
jQuery 的实现原理
(functon(window,undefined){})(window)
jQuery 利用 JS 函数作用域的特性, 采用立即调用表达式包裹了自身, 解决命名空间和变量污染问题
window.jQuery=window.$=jQuery
在闭包当中将 jQuery 和 $()绑定到 window 上, 从而 jQuery 和 $ 暴露为全局变量
jQuery.fn 的 init 方法返回的 this 就是 jQuery 对象
jQuery 的属性拷贝 (extend) 的实现原理是什么, 如何实现深拷贝?
浅拷贝(只复制一份原始对象的引用)
var newObject=$.extend({},oldObject)
深拷贝(对原始对象实行所引用的对象进行递归拷贝)
var newObject=$.extend(true,{},oldObject)
清除浮动
第一种 overflow:hidden
第二种
- .clearfix:after{
- content:".",
- diplay:block;
- hieght:0;
- clear:both;
- visibility:hidden;
- }
最快速的数组求最大值
- var arr=[1,2,12,5,6];
- Math.max(...arr);//es6
- math.max.apply(null,arr)//es5 apply
- //for 循环
- let max=arr[0];
- for(let i=0;i<arr.length-1;i++){
- max=arr[i]<arr[i+1]?arr[i+1]:arr[i]
- }
- // 数组 sort()
- arr.sort((num1,num2)=>{return num1-num2<0})// 回忆 a-b 升序 b-a 降序, 同理喔
- arr[0]
- // 数组 reduce
- // 这个还是需要科普一下
- //aray 的 reduce()把一个函数作用在整个 Array 的 [x1,x2,x3,x4...] 上, 这个必须接受两个
- // 参数, reduce()把结果继续和序列的下一个元素做累计计算, 怎么感觉有点像 map
- // 感觉没有解释清楚, 下面给个地址
- arr.reduce((num1,num2){return num1>num2?num1:num2})
reduce 科普
数组去重
[... new Set([2,"23","2","5",12,5,6,12])]
最快速的方式
最简单的方法
- function arr1(){
- var n=[];
- for(var i=0;i<arr.length;i++){
- if(n.indexOf(arr[i])==-1){
- n.push(arr[i])
- }
- }
- return n;
- }
cookie . sessionStorage . localStorage 的区别资料
cookie 是网站为了标识用户身份而存储在用户本地终端上的数据
cookie 数据使用在同源的 http 请求中携带, 会在浏览器和服务器来回传递
webStorage 目的: 克服 cookie 带来的一些限制, 当数据需要被严格控制在客户端是, 不需要持续的将数据发回服务器
webstorage 提供两种 API:localstorage(本地存储)和 sessionStorage
生命周期:
sessionStorage(本地存储)
永久的, 关闭网页也不会消失, 除非主动删除数据
localStorage(会话存储)
数据在当前浏览器窗口关闭后自动删除
cookie 设置的 cookie 过期时间之前一直有效, 即使浏览器关闭
sessionStorage(本地存储)和 localStoratge(会话存储)不会自动把数据发给服务器, 仅仅本地保存
存储大小:
cookie -->4k
sessionStorage 和 localStorage -->5m 或更大
javascript 有几种类型的值
栈: 原始数据类型(undefined,null,Boolean,number,string)
堆: 引用数据类型(对象, 数组, 函数)
区别: 存储位置不同
原始类型数据直接存储在栈的简单数据段
占据空间小, 大小固定, 属于被平凡使用数据, 所以放在栈中存储
引用数据类型存储在堆中的对象
占据空间大, 大小不固定, 如果存储在栈中, 将会影响程序运行的性能
引用数据类型在栈中存储了指针, 该指针指向该实体的起始地址
当解释器寻找引用值时, 会首先检索在栈中的地址, 取得地址后从堆中获取实体
javascript 如何实现继承
原型 prototype 机制或 apply 和 call 方法去实现较简单, 建议使用构造函数与原型混合方式
- function Parent() {
- this.name = 'wang';
- }
- function Child() {
- this.age = 28;
- }
- Child.prototype = new Parent(); // 继承了 Parent, 通过原型
- var demo = new Child();
- alert(demo.age);
- alert(demo.name); // 得到被继承的属性
什么是 doctype
DTD 就是告诉浏览器我是什么文档类型, 用这个来判断我用什么来解析它渲染它
doctype 就是通知浏览器哪个 DTD 和文档类型
<!doctypehtml>--->HTML5
HTML4.0 有两个模式: 严格模式和宽松模式
内核的理解
分为两个部分: 渲染引擎和 js 引擎
渲染引擎: 负责取得网页的内容(html,CSS)
js 引擎: 解析和执行 javascript 来实现网页的动态效果, 但是后来 js 引擎越来越独立了(V8 引擎)
有一个长度 100 的数组, 算前 10 项的和
- var a=[1,2,34,4,5,6,76,7,1,2,3,4,5,6,7]
- sun=null;
- sun=a.slice(0,10).reduce(function(pre,current){
- return pre+current;
- })
- console.log(sun);//reduce 可以看前面最大值
javascript 优化
松耦合: 当修改一个组件而不需要改其他组件时, 就做到松耦合
将 js 从 css 中抽出, 不要使用 css 表达式
将 css 从 js 中抽出: 通过 js 修改 css 样式时, 使用 className 或 classList
将 js 从 html 抽离: 从 js 外置文件
将 HTML 从 js 中抽离: 不要使用 innerHTML 使用字符串模板
全局变量
零全局变量
(function(){})(window)
单全局变量 (jQuery) 和命名空间
模块
事件处理
隔离应用逻辑(将应用逻辑和事件处理的代码拆分开)
- var MyApplication = {
- handleClick: function(event) {
- this.showPopup(event);
- },
- showPopup: function(event) {
- var popup = document.getElementById('popup');
- popup.style.left = event.clientX + 'px';
- popup.style.top = event.clientY + 'px';
- popup.className = 'reveal';
- }
- };
- addListener(element, 'click',
- function(event) {
- MyApplication.handleClick(event);
- });
不要分发事件对象
让事件处理程序使用 event 对象来处理事件, 然后拿到所有需要的数据传到应用逻辑
- // 改进的做法
- var MyApplication = {
- handleClick: function(event) {
- this.showPopup(event.clientX, event.clientY);
- },
- showPopup: function(x, y) {
- var popup = document.getElementById('popup');
- popup.style.left = x + 'px';
- popup.style.top = y + 'px';
- popup.className = 'reveal';
- }
- };
- addListener(element, 'click',
- function(event) {
- MyApplication.handleClick(event);
- });
记得在事件处理程序应当在进入应用逻辑之前针对 event 对象执行任何必要的操作, 包括阻止时间冒泡, 都应该包含在事件处理程序中
- // 改进的做法
- var MyApplication = {
- handleClick: function(event) {
- event.preventDefault();
- event.stopPropagation();
- this.showPopup(event.clientX, event.clientY);
- },
- showPopup: function(x, y) {
- var popup = document.getElementById('popup');
- popup.style.left = x + 'px';
- popup.style.top = y + 'px';
- popup.className = 'reveal';
- }
- };
- addListener(element, 'click',
- function(event) {
- MyApplication.handleClick(event);
- });
感觉这个需要日积月累, 感觉前面是有无数的坑等着你踩
先完成功能然后再考虑优化的问题
线程和进程的区别
node 进程启动过后默认会创建一个线程, 线程用于执行我们的代码
一个进程可以有多个线程, 所有进程与线程是包含与被包含的关系
进程(程序): 一个静态概念, 一个 class 文件, 一个 exe 文件
线程: 是一个程序里面不同的执行路径
二叉树遍历
先序遍历: 顺序根左右
中序遍历: 顺序左根右
后序遍历: 顺序左右根
层序遍历: 顺序
从上到下从左到右分层遍历
前序遍历: 先访问根节点, 然后前序遍历左子树, 再前序遍历右子树(中左右)
中序遍历: 从根节点开始(注意不是先访问根节点), 中序遍历根节点的左子树, 然后是访问根节点, 左后遍历根节点的右子树(左中右)
这里还是要多罗嗦一些东西, 因为我有时还是有点不太懂(这样是不是稍微清晰了一点)
中序遍历: BDCAEHGKF
后序遍历: 从左到右先叶子后节点的方式遍历访问根节点(左右中)// 怎么有点像 css 遍历从上到下从右到左
层序遍历: 从树的第一层, 也就是根节点开始访问, 从上到下逐层遍历, 在同一层中, 按从左到右的顺序结构访问
浏览器的渲染原理
当浏览器获取 html 文件时, 会 "自上而下" 加载, 并在加载过程解析渲染
解析:
浏览器会将 HTML 解析成一个 DOM 树, DOM 树的构建过程是一个深度遍历过程: 当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点
将 CSS 解析成 CSS Rule Tree
根据 DOM 树和 CSSOM 树来构造 Rendering Treen, 注意: Rendering Tree 渲染树并不等同于 DOM 树, 因为一些想 header 或 display:none 的东西就没必要放在渲染树中
有了 Render Tree, 浏览器已经能知道网页中有哪些节点. 各个节点的 CSS 定义以及他们的从属关系, 下一步操作称之为 Layout 就是计算出每个节点在屏幕中的位置
然后就进行绘制, 遍历 render 树, 并使用 UI 后端层绘制每一个节点
终于说到重点了, 影响浏览器渲染主要有: reflow(回流)和 repaint(重绘)
回流 Reflow(渲染机制类)
DOM 结构中的各个元素都有自己的盒子模型, 这些需要浏览器根据各种样式计算并根据计算结果将元素放在该出现的位置, 这个过程称 reflow
触发 Reflow
移动 DOM
修改 CSS
修改网页默认字体
增加删除修改 DOM 节点
重绘 Repaint
页面呈现的内容放在页面上
触发 Reqaint
DOM 改动
CSS 改动
尽量避免 reflow(回流)
reflow 想想怎么可能避免呢? 那只能将 reflow 对性能的影响减到最小
比如需要改变元素的样式, 不要通过父级元素影响子元素, 最好直接加载子元素
设置 style 属性改变样式的话, 没设置一次都会导致一次 reflow, 最好就是设置 class 的方式
避免不必要的复杂的 css 选择器, 尤其是后代选择器(这里肯定会有人反驳了, 我用的是 less, 就看看解析的时候, 后代有多长, 看着多怕, 哥们要不你用 sess 或者 sass, 有个属性可以直接跳出选择器 @at-rootless 有没有我也不知道)
还有就是不要用 tables 布局
ES6
从数组中移出 falsey 值
使用 Array.filter()删选出 falsey 值(false,null,0,"",undefined 和 NaN)
- const compact=arr=>arr.filter(Boolean);
- console.log(compact([0, 1, false, "", 3,"s","e"*23,"a", NaN]));
- Ajax
- $.ajax({//jQuery
- url:"http://www.baidu.com",// 请求的 url 地址
- dataType:"json",// 返回的数据格式
- data:{} // 参数
- type:"GET"
- success:function(data){
- // 请求成功的请求
- }
- })
- // 1. 创建
- var ajax = new XMLHttpRequest();
- // 2 设置
- ajax.open('get', 'Ajax_get.php');
- // 3. 发送
- ajax.send(null);
- // 4. 状态事件
- ajax.onreadystatechange = function() {
- if (ajax.readyState == 4 && ajax.status == 200) {
- // 5. 使用返回的数据 修改页面的内容
- // responseText 返回的就是一个 字符串
- // 我们 在 ajax 中 如果 是通过 ajax.responseText 获取到的 统统都是字符串
- console.log(ajax.responseText);
- }
- }
- var ajax = new XMLHttpRequest();
- // 使用 post 请求
- ajax.open('post','ajax_post.php');
- // 如果 使用 post 发送数据 必须 设置 如下内容
- // 修改了 发送给 服务器的 请求报文的 内容
- // 如果需要像 HTML 表单那样 POST 数据, 请使用 setRequestHeader() 来添加 HTTP 头然后在 send() 方法中规定您希望发送的数据:
- ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
- // 发送
- // post 请求 发送的数据 写在 send 方法中
- // 格式 name=jack&age=18 字符串的格式
- ajax.send('name=jack&age=998');
- // 注册事件
- ajax.onreadystatechange = function () {
- if (ajax.readyState==4&&ajax.status==200) {
- console.log(ajax.responseText);
- }
- }
来源: https://www.cnblogs.com/fangdongdemao/p/8492563.html