前端性能优化：当页面渲染遇上边缘计算；探究SEO与VUE首屏渲染及其解决方案；jQuery实现视频展示效果；Webpack 详解之代码分割（code-splitting）；JavaScript – 原生JS实现滚轮翻页；这才是真正的 Git 分支合并；JDK14性能管理工具:jstack使用介绍；AV1 vs HEVC：WebRTC 编解码器之争卷土重来？（四）
-
简介： 当前几种常见的前端性能优化方案仍然不可避免地会存在一些缺点。本文在 ESI (Edge Side Include) 的基础上，提出了一种新的优化思路：边缘流式渲染方案（ESR），即借助 CDN 的边缘计算能力，将静态内容与…
-
前言 【音乐博客】 上线啦！ 开开心心部署到服务器，然后满怀欣喜打开首页，结果发现有点小慢，这就很不愉快啦 下面来解决vue首屏渲染 五个方面 1. SPA单页面应用 首屏打开速度很慢，因为用户首次加载需要先下载SPA框架及应用程序的代码，然后再渲染页面。 不利于…
-
本文实例为大家分享了jQuery实现视频展示的具体代码，供大家参考，具体内容如下 效果： 用户可以单击左上角的左右箭头，来控制视频展示的左右滚动。当单击向右箭头时，下面的展示视频会向左滚动，同时新的视频展示会以滚动方式显示出来。 思路： 当视频展示内容处于最后一个版面时，如果再向后，…
-
Webpack 详解之代码分割（code-splitting）
本文所有的内容均基于 webpack@4.42.0 所撰写。阅读本文之前需了解 Webpack 的一些基本概念，如： entry 、 chunk 、 module 等。 代码分割是 Webpack 最引人注目的特性之一。这个特性允许开发者将代码分割成不同的包，然后可以按需加载或并行加载这些包。它可以用来实现更小的包，并控制资源加载优先级，如果…
-
当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时，就会触发mousewheel事件，这个事件就是实现全屏切换效果需要用到的。在IE6, IE7, IE8, Opera 10+, Safari 5+中，都提供了 “mousewheel” 事件，而 Firefox 3.5+ 中提供了一个等同的事件：”DOMMouseScroll”。与mousewheel事件对应的event对象中我们还会用到另一个…
-
本文通过讲解三向合并和 Git 的合并策略，介绍 Git 如何完成一次合并。
-
简介 在之前的文章中，我们介绍了JDK14中jstat工具的使用，本文我们再深入探讨一下jstack工具的使用。 jstack工具主要用来打印java堆栈信息，主要是java的class名字，方法名，字节码索引，行数等信息。 更多精彩…
-
AV1 vs HEVC：WebRTC 编解码器之争卷土重来？（四）
有关最新WebRTC视频编解码器的常见问题解答 Web WebRTC是否支持HEVC（H.265）？ 不，并没有正式支持。 苹果正在Safari中添加对HEVC的支持，但是其他浏览器没有添加，或表示有此计划。 我可以在WebRTC中使用HEVC吗？ 可以，但浏…
-
飞猪前端中有3个点，分别为开放、追求极致、全栈，本篇文章发于 2 年前的内网 ATA，恰逢最近飞猪微信公众号刚开通，借此分享给更多有需要的同学，用来加强对全栈跨端方向的理解，全文如下： 最近主要在研究 iOS 中的 JS 这一块内容，本文打算从为什么不能单纯地搞前端、JSCore 的原理和通信机制、OC 底层…
-
一文了解如何将JavaScript隐藏在PNG图片中来绕过CSP
将一个恶意的JavaScript库隐藏到一个PNG图片中，并在twitter上发布，然后利用XSS攻击绕过其内容安全策略(CSP)，将其包含在一个易受攻击的网站中。是不是觉得很科幻，本文我就将详细解锁这个过程。 使用HTML Canvas可以将任何JavaScript代码或整个库隐藏到一个PNG图片中，方法是将每个源代码字符转换为一个像素。然后，…
-
欢迎点击「算法与编程之美」↑关注我们！ 本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。 欢迎加入团队圈子！与作者面对面！直接点击！ AJAX是什么 AJAX 全称为 Asynchronous JavaScript And XML，是一种从网页访问 Web 服务器的技术AJAX 的作用有从 web …
-
Lessons from rewriting the next major version of Vue.js.
-
语句（statement） 完成某种操作，一般不需要返回值 表达式（expression） 一个为了得到返回值的计算式 语句、表达式的区别 语句主要为了进行某种操作一般不需要返回值 表达式是为了得到返回值且一定会返回一个值 JS 中预期为值的地方都可用表达式，如赋值语句等号右边预期是值，所以可放置…
-
确实简单到令人发指。
-
衡量一个 Web 页面的体验和质量一直有非常多的工具和指标 … 每次我们去关注这些指标的时候都会非常痛苦，因为这些指标真的是又多又难理解，测量这些指标的工具也非常多。
-
Vue是数据驱动视图模式，数据变更后，会自动更新视图。开发很便利，不要手动管理视图更新。哪 Vue 是如何实现自动更新，也就是响应式的？ 以原生 JS 为例，数据变化了需要手动获取 Dom 节点，然后使用相关 Api 去修改视图 而 Vue 数据变化后需要自动更新视图，所以流程应该： 从图可以大致感…
-
跨域 是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。 广义的跨域 ： 资源跳转： A 链接、重定向、表单提交 资源嵌入： <link> 、 <script> 、 <img> 、 <frame> 等 dom 标签，还有样式中 background:url() 、 @font-face() 等…
-
分享的内容很棒，里面有很多技巧， 有的很实用， 有的很华丽。 听完之后， 我觉得十分受用， 就想结合自己的一些理解，再次整理一番， 加深印象， 二次吸收， 所以就有了今天的文章。
-
拷贝：指拷贝源对象到目标对象，又分为浅拷贝和深拷贝两种 浅拷贝：如拷贝的对象有属性值是非基础类型（即对象），则浅拷贝拷贝的是对象的引用，而非对象本身，拷贝完成以后更改目标对象，源对象也会被更改 深拷贝：深拷贝完美解决了浅拷贝存在的问题，目标对象是一个全新的对象，更改目标对象不会影响到源对象 …
-
学习 JS，都知道语言里包含一个 Undefined 类型，该类型中只包含一个值 undefined 。 我们可能写过这样的代码： let sometThing = undefined 复制代码 这里的“undefined”其实是个变量，何以见得？下图为证： 因为历史原因， ECMAScript 标准并没有把 undefined 列为保留字 。也就是，我们平常里使用的&…
-
写作背景 女朋友要我教她CSS，于是我就折腾了一周，终于完成了这篇长文… 然后，然后？然后当我发布这篇文章的时候，她会感动到哭吗？ 熟悉HTML知识 HTML常见元素 head 部分 body部分 doctype的意义是什么 让浏…
-
webpack优化解决项目体积大、打包时间长、刷新时间长问题
在大家的日常开发中，特别是开发大型项目，大家有没有每次打包想要骂娘的冲动！反正我是很痛苦，每次打包20分钟起，这漫长的等待时间，让人非常焦虑，遇见一些特殊问题（比如测试微信分享），必须要打包部署，看效果，你会发现，一天时间全部浪费在打包上，真所谓改代码两分钟，打包代码两小时，于是闲暇之余，研究了一…
更多内容请关注公众号【前端开发博客】每日更新
