js
js代码程序、js知识要点
花开花落人间
这个作者很懒,什么都没留下…
展开
-
浏览器缓存类型
http缓存:基于HTTP协议的浏览器文件级缓存机制(强制缓存与协商缓存)。 websql:将数据以数据库的形式存储在客户端,根据需求去读取,允许sql语句查询。 indexDB:在客户端存储可观数量的结构化数据,并且在这些数据上使用索引进行高性能检索的 API。浏览器可能对indexDB有50M大小的限制,一般用户保存大量用户数据并要求数据之间有搜索需要的场景。 cookie:一般网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据(通常经过加密)。 localstorage:htm.原创 2020-12-15 10:59:53 · 728 阅读 · 0 评论 -
服务端缓存
CDN缓存 用户浏览器与服务器的交互流程 客户端浏览器先检查是否有本地缓存是否过期,如果过期,则向CDN边缘节点发起请求,CDN边缘节点会检测用户请求数据的缓存是否过期,如果没有过期,则直接响应用户请求,此时一个完成http请求结束;如果数据已经过期,那么CDN还需要向源站发出回源请求(back to the source request),来拉取最新的数据。 CND的作用 CDN的全称是Content Delivery Network,即内容分发网络。 可以理解为分布在每个县城的火车票代售点,用户在原创 2020-12-15 10:20:14 · 503 阅读 · 0 评论 -
浏览器缓存的位置
缓存位置的类型 缓存位置有四种,各自有优先级,当依次查找缓存且都没有命中的时候,才会去请求网络。 Service Worker Memory Cache Disk Cache Push Cache Service Worker Service Worker 是运行在浏览器背后的独立线程,一般可以用来实现缓存功能。基于h5的web worker,所以绝对不会阻碍当前js线程的执行。 最重要的工作原理就是:后台线程:独立于当前网页线程;网络代理:在网页发起请求时代理,来缓存文件; 使用 Service W原创 2020-12-14 18:45:18 · 2334 阅读 · 0 评论 -
浏览器端强缓存与协商缓存
强缓存 强缓存的实现 浏览器请求一个资源文件,服务端在response header中对该文件做缓存配置,缓存时间、缓存类型都由服务端控制。 之后每次用户正常打开这个页面,浏览器会判断缓存是否过期,没有过期就从缓存中读取数据并返回200状态。 cache-control max-age=31536000,表示资源最大有效时间的秒数,是一个相对值,不会因为用户修改本地时间而导致失效。 public/private:public表示浏览器和代理服务器(nginx、CDN)都可以缓存;private表示仅浏原创 2020-12-14 14:53:14 · 140 阅读 · 0 评论 -
前端性能优化
优化原则: 以空间换时间,使用内存、缓存等方法 减少请求次数,减少CPU计算 减少IO操作 优化 - 资源加载 压缩代码,减少代码体积(如webpack打包时的开发模式和生产模式) 合并代码(图片、css文件等)减少请求次数、 采用缓存策略:浏览器静态资源缓存 SSR:服务端渲染技术 CDN:让静态资源加载更快 优化 - 渲染 css放在head中,js放在body后面 图片懒加载 使用DomContentLoaded,尽早执行js dom查询操作缓存 dom增删操作,多次操作合并为一次操作 事件节流防原创 2020-11-11 11:16:08 · 153 阅读 · 0 评论 -
前端面试题javascript
CSS 盒子模型 所有HTML元素可以看作盒子,它包含content、padding、border、margin。 JS eval的用法 eval() 可以接受一个字符串str作为参数,并把这个参数作为脚本代码来执行。 数组的方法 pop、shift、unshift、push: 增加或删除元素。会改变元数组的内容,删除是返回的是删除的内容,增加元素返回的则是改变后数组的长度。 其他方法: 纯函数:slice、concat、map、filter 非纯函数:reduce、forEach、some、every l原创 2020-11-09 11:31:43 · 138 阅读 · 0 评论