分类：渲染

2022
02-10

mini-vue渲染的简易实现

mini-vue渲染的简易实现 目录前言目标第一步： 第二步：第三步：第四步：总结前言目前的主流框架Vue、React都是通过 VirtualDom（虚拟Dom）来实现的，通过VirtualDom技术提高页面的渲染效率。Vue中我们通过在 template 模板中编写html代码，React中我们通过在内部的一个render函数里编写html代码，这个函数通过jsx编译后，实际会输出一个h函数，也就是我们的 VirtualDom（虚拟Dom），下面简单来实现一个虚拟dom渲染真实d... 继续阅读 >
2021
07-04

前端从浏览器的渲染到性能优化

目录问题前瞻浏览器渲染1.浏览器渲染图解2.css解析规则3.js加载和执行机制4.图片的加载和渲染机制性能优化css优化使用减少资源请求延迟加载图像大促活动实践2.1懒加载与异步加载2.2.资源整合2.3预解析与预加载总结问题前瞻1.为什么css需要放在头部？2.js为什么要放在body后面？3.图片的加载和渲染会阻塞页面DOM构建吗？4.dom解析完才出现页面吗？5.首屏时间根据什么来判定？浏览器渲染1.浏览器渲染图解浏览器渲染页面主要经... 继续阅读 >
2021
05-15

浅谈vue首次渲染全过程

浅谈vue首次渲染全过程 昨天有朋友问我vue在页面第一次加载时到底做了些什么，看来这个问题在很多朋友心中可能还比较模糊，今天我们一起来详细的看看vue的首次渲染过程了解vue首次渲染全过程，我们应该从哪说起呢，很明显，是不是应该从入口文件说起啊，即main.js1、vue初始化首先，我们看main.js中，第一个最关键的肯定是引入vue吧importvuefrom'vue'其实，vue被打包后，dist文件夹中存在多个版本，分别是通用版本（UMD）：中的完整版vue.js和运行... 继续阅读 >
2020
10-18

详解如何使用React Hooks请求数据并渲染

前言在日常的开发中，从服务器端异步获取数据并渲染是相当高频的操作。在以往使用ReactClass组件的时候，这种操作我们已经很熟悉了，即在Class组件的componentDidMount中通过ajax来获取数据并setState，触发组件更新。随着Hook的到来，我们可以在一些场景中使用Hook的写法来替代Class的写法。但是Hook中没有setState、componentDidMount等函数，又如何做到从服务器端异步获取数据并渲染呢？本文将会介绍如何使用React的新特性Hook... 继续阅读 >
2020
10-08

在Vue 中实现循环渲染多个相同echarts图表

在Vue 中实现循环渲染多个相同echarts图表 在开发过程中我们常常需要，在一个页面中使用相同的图表来展示同级别的多个事物（如：同级别的多个不同id的仓库、同级别的多个不同id的设备等）。上图效果实现代码：<template><divclass="projectCost"><divclass="container"><divclass="wrapper"v-for="(item,index)inlist":key="index"><divclass="roseChart"></div>//使用class,不是id</div></div></div></template><script>exportdefault{data(){ret... 继续阅读 >
2020
10-08

详解React 条件渲染

在React中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。React中的条件渲染和JavaScript中的一致，使用JavaScript操作符if或条件运算符来创建表示当前状态的元素，然后让React根据它们来更新UI。先来看两个组件:functionUserGreeting(props){return<h1>欢迎回来!</h1>;}functionGuestGreeting(props){return<h1>请先注册。</h1>;}我们将创建一个Greeting... 继续阅读 >
2020
10-08

详解React 元素渲染

元素是构成React应用的最小单位，它用于描述屏幕上输出的内容。constelement=<h1>Hello,world!</h1>;与浏览器的DOM元素不同，React当中的元素事实上是普通的对象，ReactDOM可以确保浏览器DOM的数据内容与React元素保持一致。将元素渲染到DOM中首先我们在一个HTML页面中添加一个id="example"的<div>:<divid="example"></div>在此div中的所有内容都将由ReactDOM来管理，所以我们将其称为"根"DOM节点... 继续阅读 >
2020
10-01

jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例

本文实例讲述了jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作。分享给大家供大家参考，具体如下：1、先给json格式的数据：[{"id":1,"name":"stan"},{"id":2,"name":"jack"},{"id":3,"name":"lucy"},{"id":4,"name":"mary"},{"id":5,"name":"jerry"},{"id":6,"name":"tom"}]2、通过访问html页面，获取并展示数据：方法一：<!DOCTYPEhtml><html><head><title></title></head><scriptsrc="https://code.jquery.com/j... 继续阅读 >
2020
10-01

微信小程序开发（一）：服务器获取数据列表渲染操作示例

微信小程序开发（一）：服务器获取数据列表渲染操作示例 本文实例讲述了微信小程序服务器获取数据列表渲染操作。分享给大家供大家参考，具体如下：在实际项目开发中，有很多时候，前台页面的数据需要后台服务器传递过来。而前台需要循环铺值，类似如下页面：请求后台数据：wx.request({url:getApp().globalData.httpUrl+'/sys/group/selectGroupProList',//请求后台地址data:{//请求后台的分页数据pageNum:that.data.page,pageSize:that.data.pageSize},m... 继续阅读 >
2015
01-27

Yii2.0教程应用结构篇 —— 视图

视图是MVC模式中的一部分。它是展示数据到终端用户的代码，在网页应用中，根据视图模板来创建视图，视图模板为PHP脚本文件，主要包含HTML代码和展示类PHP代码，通过[[yii\web\View|view]]应用组件来管理，该组件主要提供通用方法帮助视图构造和渲染，简单起见，我们称视图模板或视图模板文件为视图。创建视图如前所述，视图为包含HTML和PHP代码的PHP脚本，如下代码为一个登录表单的视图，可看到PHP代码用来生成动态内容如... 继续阅读 >
2014
11-11

浏览器的渲染原理简介

浏览器的渲染原理简介 看到这个标题大家一定会想到这篇神文《HowBrowsersWork》，这篇文章把浏览器的很多细节讲得很细，而且也被翻译成了中文。为什么我还想写一篇呢？因为两个原因，1）这篇文章太长了，阅读成本太大，不能一口气读完。2）花了大力气读了这篇文章后可以了解很多，但似乎对工作没什么帮助。所以，我准备写下这篇文章来解决上述两个问题。希望你能在上班途中，或是坐马桶时就能读完，并能从中学会一些能用在工作上的东西。浏览器工... 继续阅读 >
2014
11-07

Yii框架官方指南系列49——专题：使用非主流模板语法

Yii框架允许开发者使用自己喜好的模板语法(例如Prado,Smarty)来编写控制器或者挂件的视图.这可以通过编写和安装一个viewRenderer应用组件来实现.这个视图渲染器拦截CBaseController::renderFile的调用，通过自定义的模板语法编译视图文件，然后渲染最终编译结果.Info: 只有当编写的视图很少复用时才推荐使用自定义模板语法.否则的话，在应用中复用视图将会强制使用同样的模板语法.接下来,我们会介绍如何使用 CPradoView... 继续阅读 >