-
前端二进制ArrayBuffer、TypedArray、DataView、Blob、File、Base64、FileReader一次性搞清楚
-
UTP:相对于TCP缺少了三次握手,导致不安全,但是传输速度更快,适合用于视频直播。
2. OSI参考模型
3. IPv4/IPv6
-
- 文件合并,最大化减少文件数量,请求阻塞(业务文件跟库的文件分离)
- service worker
- 图片懒加载
- 首页服务器渲染 + 分包prefetch
3. Webpack自动化工程
配置有这些:
- img请求地址
- 前端请求地址,
- node请求地址,
- redis配置丶地址丶端口
- 是否开启/关闭日志(会影响性能)
- 是否开启服务器渲染等等等等
5.
<video>
画中画6.
<meta>
7. 防抖和节流
1. 通过devicePixelRatio+meta标签的scale,缩小比例 2. rem -> 布局 3. less/mixin -> 字体px
-
<!-- html --> <div> <img /><span></span> </div>
div{ width:100px; height:100px; text-align: center; } div>img{ vertical-align:middle; } div>span{ vertical-align:middle; display:inline-block; height:100%; }
作用: 1.清除内部浮动 2.BFC区域不与浮动元素重叠 产生BFC的条件: 1.overflow-hidden 2.display:inline-block 3.display:flex 4.float:left
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 1.整体把px改为rem,rem即根据根节点元素的font-size。默认font-size为16px,所以默认1rem = 16px。 额外补充:em即根据父元素的font-size 2.所以重点就是动态改变根节点元素的font-size。 a.媒体查询,通过@media监听,设备宽度如果达到某个区间就更改相应的根节点font-size。缺点:只能换区间,才更改。 //vscode设置px->rem 设置为75 //原设备375px * 5 = 根节点字体大小75px @media (min-width:320px) { html { font-size:64px !important;}} @media (min-width:375px) { html { font-size:75px !important;}} @media (min-width:414px) { html { font-size:82.8px !important;}} @media (min-width:768px) { html { font-size:153.6px !important;}} @media (min-width:1024px) { html { font-size:204.8px !important;}} b.js插件,每次更改设备宽度都会改变根节点font-size。缺点:性能损耗。(此插件在utils文件夹) Vscode设置:首选项->搜索cssrem->Cssrem:RootFontSize->写入设备宽度除以20。如:iphone6就输入750/20=37.5 脚本设置:18行,750改成设备宽度。如:iphone6就输入750。
button{ // 居中 text-align:center; //字间距 letter-space: 10px; // 首行缩进 text-indent: 10px; }
input{ outline:medium; }
-
简单来说就是函数套函数。父函数被销毁 的情况下,返回出的子函数的[[scope]]中仍然保留着父级的单变量对象和作用域链, 因此可以继续访问到父级的变量对象,这样的函数称为闭包。
一般POST请求需要设置content-type,其实就是限制传输数据的格式。
1. application/x-www-form-urlencoded > 如:key1=val1&key2=val2 2. multipart/form-data > 传文件 // 浏览器原生支持以上两种方式 3. application/json > 传JSON
<form> <input type="text" name="uid" value="testID" /> <input type="password" name="upsw" value="testPSW" /> <form /> 如果用var form = new FormData(document.querySelector("form")); 就等于默认做了 form.append("uid","testID"),form.append("upsw","testPSW"); 等于发AJAX的时候,多了两条params。 PS: form.append(兼容性最好) form.delete/set/get(不兼容iphone6sp的WX内置浏览器)
function A(){ //静态方法 A.sayMeS=function(){ console.log("S"); } //实例方法 this.sayMeE=function(){ console.log("E"); } //原型方法 this.prototype.sayMeP=function(){ console.log("P"); } //全局方法 sayMeW=function(){ console.log("W"); } } new A(); //先执行A函数,……,最后返回实例对象(不执行此行代码,这个函数["构造函数也只是个函数"]只是个虚设)
function test(){ //先执行then方法 Promise.resolve() //返回reject,执行catch,直接跳过2 .then(()=>Promise.reject(1)) .then(()=> console.log(2)) //打印1 .catch((err)=>console.log(err)) //继续执行resolve,打印4 .then(()=>{console.log(4)}) } test() // 1 4
<div> <div>点击逻辑</div> </div> <!-父元素ontouchstart事件,preventDefault(),会导致子元素的点击事件失效,所以让子元素事件类型改为ontouchend事件->
-
前端渲染的劣势: 1.损耗性能:浏览器要解析打包后的一个巨型JS文件。 2.不利于SEO:只有一个HTML模板,其他HTML由巨型JS文件动态生成。因为SEO有关的爬虫技术不能抓JS包,也可以说不能抓到后来/动态生成的HTML。 服务端渲染: 1.服务端把巨型JS文件解包多个HTML后,再返回给前端。
有Key的话: 数据与节点与key值绑定,当数据数组排序倒序时,会使整个节点跟随数据变动。 节点:1,2,3 -> 3 , 2 , 1 无Key的话: 就地复用,当数据改变时,节点就近使用。 节点:1,2,3 -> 1,2,3
-
//事件在当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发 window.onhashchange=function(){ //获取#后面的字符串 let hash = location.hash.slice(1); switch(hash){ case '/home': xxxxxx; break; case 'list': xxxxxxx; break; } }
-
1. 小菜团队Node使用
-
1. TS教程
bulk-knowledge's Introduction
bulk-knowledge's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.