Skip to content

Latest commit

 

History

History
249 lines (186 loc) · 15.6 KB

js_ relative.md

File metadata and controls

249 lines (186 loc) · 15.6 KB

记录下日常的js积累以及todo-list

部分会写在简书上面
这里收藏了segmentfault上面的一些有用的回答


js中基本数据类型和引用数据类型的区别

  区别:

   a.声明变量时不同的内存分配:           
     1).原始值:存储在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量访问的位置。        
        这是因为这些原始类型占据的空间是固定的,所以可将他们存储在较小的内存区域 – 栈中。这样存储便于迅速查寻变量的值。 
        
     2).引用值:存储在堆(heap)中的对象,也就是说,存储在变量处的值是一个指针(point),指向存储对象的内存地址。      
        这是因为:引用值的大小会改变,所以不能把它放在栈中,否则会降低变量查寻的速度。相反,放在变量的栈空间中的值是该对象存储在堆中的地址。  
        地址的大小是固定的,所以把它存储在栈中对变量性能无任何负面影响。
        
   b.不同的内存分配机制也带来了不同的访问机制  
     1).在javascript中是不允许直接访问保存在堆内存中的对象的,所以在访问一个对象时,  
    首先得到的是这个对象在堆内存中的地址,然后再按照这个地址去获得这个对象中的值,这就是传说中的按引用访问。  
    
   2).而原始类型的值则是可以直接访问到的。  
   
   c.复制变量时的不同  
     1).原始值:在将一个保存着原始值的变量复制给另一个变量时,会将原始值的副本赋值给新变量,此后这两个变量是完全独立的  
        他们只是拥有相同的value而已。 
        
   2).引用值:在将一个保存着对象内存地址的变量复制给另一个变量时,会把这个内存地址赋值给新变量   
     也就是说这两个变量都指向了堆内存中的同一个对象,他们中任何一个作出的改变都会反映在另一个身上。   
    (这里要理解的一点就是,复制对象时并不会在堆内存中新生成一个一模一样的对象,只是多了一个保存指向这个对象指针的变量罢了)。多了一个指针 
    
   d.参数传递的不同(把实参复制给形参的过程)
     首先我们应该明确一点:ECMAScript中所有函数的参数都是按值来传递的。  
   但是为什么涉及到原始类型与引用类型的值时仍然有区别呢?还不就是因为内存分配时的差别。
   
    1)原始值:只是把变量里的值传递给参数,之后参数和这个变量互不影响。 
    
    2)引用值:对象变量它里面的值是这个对象在堆内存中的内存地址,这一点你要时刻铭记在心!  
     因此它传递的值也就是这个内存地址,这也就是为什么函数内部对这个参数的修改会体现在外部的原因了,因为它们都指向同一个对象。  

什么是 Event Loop?

 事件轮询
可以参照下阮老师写的这篇文章


进程与线程

计算机基础问题,参照这篇文章

 


对于闭包 原型的理解

 这里博客可以参考下


立即调用函数/匿名函数

IIFE
  ###作用 javascript中没用私有作用域的概念,如果在多人开发的项目上,你在全局或局部作用域中声明了一些变量,可能会被其他人不小心用同名的变量给覆盖掉, 那么这时候就可以使用IIFE创建一个私有作用域来保护变量,防止命名冲突,俗称“匿名包裹器”或“命名空间”。 对比 延时调用函数

匿名函数的作用    ·
匿名函数可以有效的保证在页面上写入Javascript,而不会造成全局变量的污染。    ·
这在给一个不是很熟悉的页面增加Javascript时非常有效,也很优美。   
javascript中没用私有作用域的概念,如果在多人开发的项目上,你在全局或局部作用域中声明了一些变量,
可能会被其他人不小心用同名的变量给覆盖掉,根据javascript函数作用域链的特性,可以使用这种技术可以模仿一个私有作用域
用匿名函数作为一个“容器”,“容器”内部可以访问外部的变量,而外部环境不能访问“容器”内部的变量,
所以( function(){…} )()内部定义的变量不会和外部的变量发生冲突,俗称“匿名包裹器”或“命名空间”。

window.setTimeout(checkState,10000); //延时调用
widow.setTimeout(checkState(),10000); //立即调用


TODO

  这里的题目没有刷


web性能优化

  1. YaHoo Web优化的14条原则
1.尽可能的减少HTTP的请求数
/*
http请求是要开销的,想办法减少请求数自然可以提高网页速度。常用的方法,合并css,js(将一个页面中的css和js文件分别合并)以及 Image maps和css sprites等。
当然或许将css,js文件拆分多个是因为css结构,共用等方面的考虑。阿里巴巴中文站当时的做法是开发时依然分开开发,然后在后台 对js,css进行合并,
这样对于浏览器来说依然是一个请求,但是开发时仍然能还原成多个,方便管理和重复引用。yahoo甚至建议将首页的css和js 直接写在页面文件里面,而不是外部引用。
因为首页的访问量太大了,这么做也可以减少两个请求数。而事实上国内的很多门户都是这么做的。而css sprites是指只用将页面上的背景图合并成一张,
然后通过css的background-position属性定义不过的值来取他的背景。
*/

2.使用CDN(内容分发网络)
/*
用户离web server的远近对响应时间也有很大影响。从用户角度看,把内容部署到多个地理位置分散的服务器上将有效提高页面装载速度。但是该从哪里开始呢?
作为实现内容地理分布的第一步,不要试图重构web应用以适应分布架构。改变架构将导致多个周期性任务,如同步session状态,在多个server之间复制数据库交易。
这样缩短用户与内容距离的尝试可能被应用架构改版所延迟,或阻止。
我们还记得80-90%的最终用户响应时间花在下载页面中的各种元素上,如图像文件、样式表、脚本和Flash等。与其花在重构系统这个困难的任务上,还不如先分布静态内容。
这不仅能大大减少响应时间,而且由于CDN的存在,分布静态内容非常容易实现。
CDN是地理上分布的web server的集合,用于更高效地发布内容。通常基于网络远近来选择给具体用户服务的web server。
一些大型网站拥有自己的CDN,但是使用如Akamai Technologies, Mirror Image Internet, 或 LimelightNetworks等CDN服务提供商的服务将是划算的。
在Yahoo!把静态内容分布到CDN减少了用户影响时间20%或更多。切换到CDN的代码修改工作是很容易的,但能达到提高网站的速度。
*/

3.增加Expires Header
/*
现在越来越多的图片,脚本,css,flash被嵌入到页面中,当我们访问他们的时候势必会做许多次的http请求。其实我们可以通过设置Expires header 来缓存这些文件。
Expire其实就是通过header报文来指定特定类型的文件在览器中的缓存时间。大多数的图片,flash在发布后都是不需要经常修改的,
做了缓存以后这样浏览器以后就不需要再从服务器下载这些文件而是而直接从缓存中读取,这样再次访问页面的速度会大大加快
*/

4.启用Gzip压缩页面元素
/*
通过压缩HTTP响应内容可减少页面响应时间。从HTTP/1.1开始,web客户端在HTTP请求中通过Accept-Encoding头来表明支持的压缩类型,
如:Accept-Encoding: gzip, deflate.
如果Web server检查到Accept-Encoding头,它会使用客户端支持的方法来压缩HTTP响应,会设置Content-Encoding头,如:Content-Encoding: gzip。
Gzip是目前最流行及有效的压缩方法。其他的方式如deflate,但它效果较差,也不够流行。通过Gzip,内容一般可减少70%。
Gzip的思想就是把文件先在服务器端进行压缩,然后再传输。这样可以显著减少文件传输的大小。
传输完毕后浏览器会重新对压缩过的内容进行解压缩,并执行。目前的浏览器都能“良好”地支持gzip
*/

5.将css放在页面最上面
/*
我们发现把样式表移到HEAD部分可以提高界面加载速度,因此这使得页面元素可以顺序显示。
在很多浏览器下,如IE,把样式表放在document的底部的问题在于它禁止了网页内容的顺序显示。
浏览器阻止显示以免重画页面元素,那用户只能看到空白页了。Firefox不会阻止显示,但这意味着当样式表下载后,有些页面元素可能需要重画,这导致闪烁问题。
HTML规范明确要求样式表被定义在HEAD中,因此,为避免空白屏幕或闪烁问题,最好的办法是遵循HTML规范,把样式表放在HEAD中。
*/

6.将script放在页面最下面

7.避免在CSS中使用Expressions

8.把javascript和css都放到外部文件中

9.减少DNS查询
/*
DNS用于映射主机名和IP地址,一般一次解析需要20~120毫秒。为达到更高的性能,DNS解析通常被多级别地缓存,
如由ISP或局域网维护的caching server,本地机器操作系统的缓存(如windows上的DNS Client Service),浏览器。
IE的缺省DNS缓存时间为30分钟,Firefox的缺省缓冲时间是1分钟。
减少主机名可减少DNS查询的次数,但可能造成并行下载数的减少。避免DNS查询可减少响应时间,而减少并行下载数可能增加响应时间。
一个可行的折中是把内容分布到至少2个,最多4个不同的主机名上。
*/

10.压缩 JavaScript 和 CSS

11.避免重定向

12.移除重复的脚本

13.配置ETags

14.缓存Ajax

  1. 移动端相关
1. img src 比 background 方式展示图片,使用到的内存资源可能会更多。
2. 移动端的内存是有限的,在进行代码设计是要充分考虑有可能带来的性能瓶颈。
3. 图片很浪费内存,使用要小心。
4. visibility:hidden,display:none都可以节约内存。

http相关

  1. http状态码   302需要重点掌握
1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态代码。

100	  (继续) 请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分,正在等待其余部分。  
101   (切换协议) 请求者已要求服务器切换协议,服务器已确认并准备切换。

2xx(成功)表示成功处理了请求的状态代码。

200   (成功)  服务器已成功处理了请求。 通常,这表示服务器提供了请求的网页。 
201   (已创建)  请求成功并且服务器创建了新的资源。 
202   (已接受)  服务器已接受请求,但尚未处理。 
203   (非授权信息)  服务器已成功处理了请求,但返回的信息可能来自另一来源。 
204   (无内容)  服务器成功处理了请求,但没有返回任何内容。 
205   (重置内容) 服务器成功处理了请求,但没有返回任何内容。 
206   (部分内容)  服务器成功处理了部分 GET 请求。

3xx(重定向)表示要完成请求,需要进一步操作。通常,这些状态代码用来重定向。

300   (多种选择)  针对请求,服务器可执行多种操作。服务器可根据请求者 (user agent) 选择一项操作,或提供操作列表供请求者选择。 
301   (永久移动)  请求的网页已永久移动到新位置。服务器返回此响应(对 GET 或 HEAD 请求的响应)时,会自动将请求者转到新位置。 
302   (临时移动)  服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求。 (常问)
303   (查看其他位置) 请求者应当对不同的位置使用单独的 GET 请求来检索响应时,服务器返回此代码。 
304   (未修改) 自从上次请求后,请求的网页未修改过。服务器返回此响应时,不会返回网页内容。 
305   (使用代理) 请求者只能使用代理访问请求的网页。如果服务器返回此响应,还表示请求者应使用代理。 
307   (临时重定向)  服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求。

4xx(请求错误)这些状态代码表示请求可能出错,妨碍了服务器的处理。

400   (错误请求) 服务器不理解请求的语法。 
401   (未授权) 请求要求身份验证。 对于需要登录的网页,服务器可能返回此响应。 
403   (禁止) 服务器拒绝请求。 
404   (未找到) 服务器找不到请求的网页。 
405   (方法禁用) 禁用请求中指定的方法。 
406   (不接受) 无法使用请求的内容特性响应请求的网页。 

5xx(服务器错误)这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误,而不是请求出错。

500   (服务器内部错误)  服务器遇到错误,无法完成请求。 
501   (尚未实施) 服务器不具备完成请求的功能。 例如,服务器无法识别请求方法时可能会返回此代码。 
502   (错误网关) 服务器作为网关或代理,从上游服务器收到无效响应。 
503   (服务不可用) 服务器目前无法使用(由于超载或停机维护)。 通常,这只是暂时状态。 
504   (网关超时)  服务器作为网关或代理,但是没有及时从上游服务器收到请求。 
505   (HTTP 版本不受支持) 服务器不支持请求中所用的 HTTP 协议版本。

http 缓存 相关知识 https://www.cnblogs.com/chenqf/p/6386163.html

浏览器渲染机制
CSSOM View Module (CSS Object Model View)即css视图模块

   ECMAScript函数的参数与大多数语言中函数的参数有所不同, ECMAScript函数的参数在内部是用一个数组来表示的,
   在函数体内可以通过arguments  
   对象来访问这个参数的数组,从而获取传递给函数的每一个参数 

  即 ECMAScript函数的一个重要特点:命名的参数只提供便利,但不是必须的

回到顶部

更多参考