前端优化
unravel space
hello world
展开
-
CDN简介
什么是CDN?工作原理是什么?网站通常将其所有的服务器都放在同一个地方,当用户群增加时,公司就必须在多个地理位置不同的服务器上部署内容为了缩短http请求的时间,我们应该把大量的静态资源放置的离用户近一点。内容发布网络CDN(Content Delivery Networks)CDN是一组分布在多个不同地理位置的web服务器,用于更加有效的向用户发布内容基本思路: 尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。 通过在网络各处放置节点服务原创 2021-09-03 19:34:11 · 88 阅读 · 0 评论 -
浏览器渲染与阻塞
一、浏览器渲染引擎主要模块一个渲染引擎主要包括:HTML解析器,CSS解析器,javascript引擎,布局layout模块,绘图模块HTML解析器:解释HTML文档的解析器,主要作用是将HTML文本解释成DOM树。CSS解析器:它的作用是为DOM中的各个元素对象计算出样式信息,为布局提供基础设施Javascript引擎:使用Javascript代码可以修改网页的内容,也能修改css的信息,javascript引擎能够解释javascript代码,并通过DOM接口和CSS树接口来修改网页内容和原创 2021-09-03 19:18:30 · 422 阅读 · 0 评论 -
浏览器缓存分类及区别
缓存1. 缓存理解缓存定义:浏览器在本地磁盘上将用户之前请求的数据存储起来,当访问者再次需要改数据的时候无需再次发送请求,直接从浏览器本地获取数据缓存的好处:减少请求的个数节省带宽,避免浪费不必要的网络资源减轻服务器压力提高浏览器网页的加载速度,提高用户体验2. 缓存分类强缓存不会向服务器发送请求,直接从本地缓存中获取数据请求资源的的状态码为: 200 ok(from memory cache)协商缓存向服务器发送请求,服务器会根据请求头的资源判断是否命原创 2021-09-03 17:34:01 · 925 阅读 · 0 评论 -
浏览器存储
浏览器存储实现浏览器页面之间跨页面数据共享Cookie, SessionStorage, LocalStorage这三者都可以被用来在浏览器端存储数据,而且都是字符串类型的键值对!注意:session和SessionStorage不是一个概念!!!在服务端有一种存储方式叫做:session会话存储,常常被简称sessionsession:会话SessionStorage:浏览器端用于存储数据的容器,常常被前端人员简称为session。session会话存储:服务器端一种存储数据的方式,常常被后原创 2021-09-03 14:18:30 · 158 阅读 · 0 评论 -
函数防抖与节流
函数防抖(debounce)概念: 延迟要执行的动作,若在延迟的这段时间内,再次触发了,则取消之前开启的动作,重新计时。举例: 电脑无操作1分钟之内如果没有操作会进入休眠,当第40秒时鼠标被移动一下,重新计时1分钟。实现: 利用定时器进行函数防抖。应用:搜索时等用户完整输入内容后再发送查询请求。<input type="text" id="user_input"> <button id="btn">搜索</button><scri原创 2021-09-03 13:28:32 · 43 阅读 · 0 评论 -
图层重排重绘及优化
###css图层浏览器在渲染一个页面时,会将页面分为很多个图层,图层有大有小,每个图层上有一个或多个节点。在渲染DOM的时候,浏览器所做的工作实际上是:1. 获取DOM后分割为多个图层2. 对每个图层的节点计算样式结果 (Recalculate style–样式重计算)3. 为每个节点生成图形和位置 (Layout–布局,重排,回流)4. 将每个节点绘制填充到图层位图中 (Paint–重绘)5. 图层作为纹理上传至GPU6. 组合多个图层到页面上生成最终屏幕图像 (Composite原创 2021-09-03 10:21:24 · 214 阅读 · 0 评论 -
浏览器组成及功能
浏览器应该有的功能网络: 浏览器通过网络模块来下载各式各样的资源,例如html文本;javascript代码;样式表;图片;音视频文件等。 网络部分尤为重要,因为它耗时长,而且需要安全访问互联网上的资源。资源管理: 从网络下载,或者本地获取到的资源需要有高效的机制来管理它们。 例如如何避免重复下载,资源如何缓存等等网页浏览: 这是浏览器的核心也是最基本的功能,最重要的功能。 如何将资源转变为可视化的结果。 多页面管理插件与管理账户和同步安全机制开发者工具......原创 2021-09-02 22:05:07 · 930 阅读 · 0 评论