深入学习前端
草莓味的狮子座leo
这个作者很懒,什么都没留下…
展开
-
DOM和BOM
DOM文档对象模型:一种处理html和xml文件的标准API。解析:将html或xml文档转化为DOM树的过程DOM模型不仅描述了文档的结构,还定义了结点对象的行为,利用对象的方法和属性,可以方便地访问、修改、添加和删除DOM树的结点和内容document1、setAttribute设置类名element.setAttribute('className','newClassName') // 只ie有效element.className = 'newClassName' //所有2、F原创 2020-11-29 17:05:51 · 65 阅读 · 0 评论 -
CommonJS与ES6 Module
一、CommonJSnode中使用common.js,导入require;导出module.exports// 向外部模块导出数据exports.version = version;exports.sayHi = sayHi;module.exports.greeting = greeting// require导入模块let a = require('./a.js')二、ES6 Module导入:import导出:1)默认导出export default2)命名导出expo原创 2020-12-14 09:51:35 · 66 阅读 · 0 评论 -
跨域
1、同源策略同源策略是一种约定,指“协议+域名+端口”三者都相同同源策略限制内容:Cookie、LocalStorage、indexedDBDOM节点Ajax请求发送,结果被浏览器拦截允许跨域加载资源<img src =xxx> 、 <link href=xxx> 、 <script src=xxx>2. 跨域解决方案JSONP1)原理:利用script标签没有跨域限制,网页可以获取外部资源产生的json数据;jsonp请求需要对方的服务器支持原创 2020-11-18 15:35:19 · 98 阅读 · 1 评论 -
前端性能优化
博客1博客2原则1 .多使用内存,缓存2 .减少CPU计算,减少网络请求3. 减少IO操作(硬盘读写加载资源优化静态资源合并和压缩、静态资源缓存、使用CDN加载静态资源合并:a.js b.js c.js -------------> abc.js缓存:<script src='abc.js'></script>渲染优化「1」css放head中,js放body中「2」图片懒加载(延迟加载)<img src='image.png' realsrc原创 2020-11-12 11:36:17 · 138 阅读 · 1 评论 -
浏览器缓存机制
什么是浏览器缓存memory cache将资源缓存至内存中,只能存储一些派生类资源文件;退出进程时数据会被清除(一般脚本、字体、图片)disk cache将资源缓存至磁盘中,退出进程时数据不会被清除(一般非脚本,如css)三级缓存原理1)先在内存查找,如果有,直接加载2)如果内存没有,则在硬盘中查找,3)如果硬盘也没有,那么网络请求4)请求获取的资源缓存至硬盘或内存中...原创 2020-11-09 21:20:11 · 387 阅读 · 0 评论 -
sessionStorage 、localStorage 和 cookie、session
Http协议是无状态协议,客户每次读取web页,服务器都会打开新的回话,服务器端不会自动维护客户端的上下文信息。Session:即一种保存上下文信息机制,将客户,变量值保存至服务器端,通过sessionID来区分,session以cookie或url重写为基础,默认使用cookie实现,通过响应头的 Set-Cookie:JSESSIONID=XXX命令,向客户端发送要求设置 Cookie 的响应; 客户端收到响应后,在本机客户端设置了一个 JSESSIONID=XXX的 Cookie 信息,该 Coo.原创 2020-11-04 10:59:05 · 683 阅读 · 0 评论 -
浏览器渲染页面原理
主要过程:1.用户输入网址,浏览器向服务器发送http请求,服务器返回html文件(运用缓存,减少http请求)2.浏览器载入html文件,发现头部内有引入外部css文件,浏览器立即发送css文件请求。获取浏览器返回的css文件(css文件合并,减少http请求)3.浏览器继续载入html文件中代码块,开始渲染页面(css文件位于最上面)4.浏览器发现标签,向服务器发送请求。此时浏览器继续渲染后面的页面代码(图片文件合并,减少http请求)5.服务器返回图片文件,图片占用一定面积,影响后面段落的排原创 2020-11-02 20:40:06 · 122 阅读 · 0 评论 -
箭头函数
概述:箭头函数没有自己的this,arguments,super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。基础语法(param1, param2, …, paramN) => { statements } (param1, param2, …, paramN) => expression//相当于:(param1, param2, …, paramN) =>{ return expression; }// 当..原创 2020-10-11 22:07:53 · 116 阅读 · 0 评论 -
数组问题
var arr = []arr[0] = 1arr[1] = 2arr.foo = '3'console.log(arr.length) //2var arr = []arr[5] = 3arr.foo = '3'console.log(arr.length) // 6console.log(typeof arr) //objectlength属性:设置或返回数组中元素的数目数组的length=数组最大下标值+1数组的length属性在使用构造函数Array()创建数组时原创 2020-10-29 09:59:38 · 402 阅读 · 0 评论 -
prototype、__proto__、constructor
参考博客__proto__属性(1)__proto__和constructor属性是对象所独有的;(2)prototype属性是函数所独有的注:在javascript中,函数也是一个对象,因此函数同时拥有__proto__和prototype作用:当访问一个对象的属性时,如果该对象内部不存在这个属性,那么就会去它的__proto__属性所指向的对象(父对象)去找…直到原型链顶端nullprototype属性函数独有的,是函数的原型对象,也就是这个函数创建的实例的原型对象functi.原创 2020-09-28 16:25:08 · 84 阅读 · 0 评论