Web开发( 右侧选择分类 )
java

通过OpenGL理解前端渲染原理(1)

通过OpenGL理解前端渲染原理,本文着重介绍渲染管线工作流程。一、OpenGLOpenGL,是一套绘制3D图形的API,当然它也可以用来绘制2D的物体。OpenGL有一大套可以用来操作模型和图片的函数,通常编写OpenGL库的人是显卡的制造者。我们买的显卡都支持特定版本的OpenGL。下图是用OpenGL做的旋转的立方体。二、渲染原理2.1 渲染管道在OpenGL中,所有东西都在一个3D的空间里
1100 人浏览
xiaozhi

14.如何使用 Set 来提高代码的性能

译者:前端小智原文:https://medium.com/@bretcameron/how-to-make-your-code-faster-using-javascript-sets-b432457a4a77为了保证的可读性,本文采用意译而非直译。我确信有很多开发人员坚持使用基本的全局对象:数字,字符串,对象,数组和布尔值。对于许多用例,这些都是需要的。 但是如果想让你的代码尽可能快速和可扩展,
1091 人浏览
xiaozhi

8.快速了解 React Hooks 原理

为了保证的可读性,本文采用意译而非直译。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你!我们大部分 React 类组件可以保存状态,而函数组件不能? 并且类组件具有生命周期,而函数组件却不能?React 早期版本,类组件可以通过继承PureComponent来优化一些不必要的渲染,相对于函数组件,React 官网没有提供对应的方法来缓存函数组件以减少一些不必要的渲染,直接 16
1090 人浏览
xiaozhi

4.React 新特性讲解及实例(一)

本节主要讲解以下几个新的特性:ContextContextTypelazySuspense错误边界(Error boundaries)momoContext定义:Context 提供了一种方式,能够让数据在组件树中传递而不必一级一级手动传递。这定义读的有点晦涩,来看张图:假设有如上的组件层级关系,如果最底层的Item组件,需要最顶层的Window组件中的变量,那我们只能一层一层的传递下去。非常的繁
1060 人浏览
xiaozhi

10.搞懂JavaScript引擎运行原理

译者:前端小智原文:https://codeburst.io/js-essentials-the-javascript-engine-302ff38e8465为了保证可读性,本文采用意译而非直译。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你!一些名词JS引擎— 一个读取代码并运行的引擎,没有单一的“JS引擎”;,每个浏览器都有自己的引擎,如谷歌有V。作用域— 可以从中访问变量
1040 人浏览
xiaozhi

3.你要的 React 面试知识点,都在这了

React是流行的javascript框架之一,在2019年及以后将会更加流行。React于2013年首次发布,多年来广受欢迎。它是一个声明性的、基于组件的、用于构建用户界面的高效javascript库。以下是面试前必须了解的话题。什么是声明式编程声明式编程 vs 命令式编程什么是函数式编程什么是组件设计模式React 是什么React 和 Angular 有什么不同什么是虚拟DOM及其工作原理什
1034 人浏览
xiaozhi

12. 8个有用的JS技巧

译者:前端小智原文:https://devinduct.com/blogpost/26/8-useful-javascript-tricks这些技巧可能大家大部分都用过了,如果用过就当作加深点映像,如果没有遇到过,就当作学会了几个技巧。1. 确保数组值使用 grid ,需要重新创建原始数据,并且每行的列长度可能不匹配, 为了确保不匹配行之间的长度相等,可以使用Array.fill方法。letarr
1027 人浏览
xiaozhi

2.JavaScript是如何工作的:深入V8引擎&编写优化代码的5个技巧

概述JavaScript引擎是执行 JavaScript 代码的程序或解释器。JavaScript引擎可以实现为标准解释器,或者以某种形式将JavaScript编译为字节码的即时编译器。以为实现JavaScript引擎的流行项目的列表:V8 — 开源,由 Google 开发,用 C ++ 编写Rhino — 由 Mozilla 基金会管理,开源,完全用 Java 开发SpiderMonkey — 
1019 人浏览
xiaozhi

1.vue 2.6 中 slot 的新用法

最近发布不久的Vue 2.6,使用插槽的语法变得更加简洁。 对插槽的这种改变让我对发现插槽的潜在功能感兴趣,以便为我们基于Vue的项目提供可重用性,新功能和更清晰的可读性。 真正有能力的插槽是什么?如果你是Vue的新手,或者还没有看到2.6版的变化,请继续阅读。也许学习插槽的最佳资源是Vue自己的文档,但是我将在这里给出一个纲要。插槽是什么?插槽是Vue组件的一种机制,它允许你以一种不同于严格的父
1005 人浏览
xiaozhi

3.Web 性能优化:缓存 React 事件来提高性能

JavaScript中一个不被重视的概念是对象和函数是如何引用的,并且直接影响 React性能。 如果创建两个完全相同的函数,它们仍然不相等,试试下面的例子:constfunctionOne=function(){alert('Helloworld!');}; constfunctionTwo=function(){alert('Helloworld!');};
1003 人浏览
xiaozhi

4.JavaScript是如何工作的:事件循环和异步编程的崛起+ 5种使用 async/await 更好地编码方式

通过第一篇文章回顾在单线程环境中编程的缺陷以及如何解决这些缺陷来构建健壮的JavaScript UI。按照惯例,在本文的最后,分享5个如何使用async/ wait编写更简洁代码的技巧。为什么单线程是一个限制?在发布的第一篇文章中,思考了这样一个问题:当调用堆栈中有函数调用需要花费大量时间来处理时会发生什么?例如,假设在浏览器中运行一个复杂的图像转换算法。当调用堆栈有函数要执行时,浏览器不能做任何
995 人浏览
xiaozhi

4.如何在 JS 循环中正确使用 async 与 await

async与await的使用方式相对简单。 蛤当你尝试在循环中使用await时,事情就会变得复杂一些。在本文中,分享一些在如果循环中使用await值得注意的问题。准备一个例子对于这篇文章,假设你想从水果篮中获取水果的数量。constfruitBasket={ apple:27, grape:0, pear:14 };你想从fruitBasket获得每个水果的数量。 要获取水果的数量,可以使
986 人浏览
xiaozhi

1.Web 性能优化: 使用 Webpack 分离数据的正确方法

制定向用户提供文件的最佳方式可能是一项棘手的工作。 有很多不同的场景,不同的技术,不同的术语。在这篇文章中,我希望给你所有你需要的东西,这样你就可以:了解哪种文件分割策略最适合你的网站和用户知道怎么做根据Webpack glossary,有两种不同类型的文件分割。 这些术语听起来可以互换,但显然不是。Webpack 文件分离包括两个部分,一个是 Bundle splitting,一个是 Code
984 人浏览
xiaozhi

7.JavaScript 原型的深入指南

为了保证可读性,本文采用音译而非直译不学会怎么处理对象,你在 JavaScript 道路就就走不了多远。它们几乎是 JavaScript 编程语言每个方面的基础。事实上,学习如何创建对象可能是你刚开始学习的第一件事。对象是键/值对。创建对象的最常用方法是使用花括号{},并使用点表示法向对象添加属性和方法。letanimal={} animal.name='Leo' animal
984 人浏览
xiaozhu

前端学习路线图

废话不多说,直接上图,希望对你有帮助
978 人浏览
webhome

谈谈移动端页面性能优化方案

众所周知,在互联网行业里,移动端占有的比例越来越高了,尤其实在电商领域,用户购物大部分在移动端。比如淘宝双11,在移动端支付的接近7成。这就要求我们产品质量越来越高,那对于我们前端工程师来说也是一个挑战,如何让我们所开发的页面能有更好的体验,就是我们今天讨论的话题:移动端页面性能优化。Html5的出现对于移动端影响挺大,HTML5框架可以提升网站的访问速度,通过优化前端将响应时间加快,使用户的等待
973 人浏览
xiaozhu

大前端完整学习路线(详解)

第一阶段:HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、JavaScript基础:Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。JS基本特效:常见特效、例如:tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。JS高级特征:正则表达式、排序算
920 人浏览
webhome

移动和PC端中的hover处理

移动和PC端中的hover处理最近都忙死了,好久都没更新博客了。今天还是想提下移动端的问题 :hover选择器。说到移动和PC端中的hover处理问题,已经碰到过很多次了,先前一直没去仔细的研究过,有时候忽略过去了。众所周知,现在项目都注重交互用户体验,譬如按钮之类的都加上hover效果。但是这个效果在PC端体验很好,如果页面需要做成响应式,那问题就来了,发现在移动端点击按钮后,会执行PC的hov
905 人浏览
cheng

2019web前端全新面试题及答案

1、页面导入样式时,使用link和@import有什么区别? 答案:差别1:本质的差别:link属于XHTML标签,而@import完全是CSS提供的一种方式。 差别2:加载顺序的差别:当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁
875 人浏览
xiaozhu

微信小程序添加删除线和下划线

小程序官方提供的html标签,跟传统的HTML有所差异,不能够使用<del>等标签下面关于下划线和删除线的操作。在对应的标签中添加css样式即可:text-decoration:underline; //下划线text-decoration:line-through;//删除线
98 人浏览