在学习html5的时候,使用canvas实现了对html文本的解析和渲染,支持的tag有<p>.<i>.<b>.<u>.<ul>.<li>,并参考chrome对不规则html进行了解析.代码扔在了我的github上(https://github.com/myhonor2013/gadgets,里面的html-render-with-canvas目录里面). 程序的主函数是个循环,对html文本从左往右进行解析,wangy每个循环开始处

线程与进程 说到单线程,就得从操作系统进程开始说起.在早期的操作系统中并没有线程的概念,进程是能拥有资源和独立运行的最小单位,也是程序执行的最小单位.任务调度采用的是时间片轮转的抢占式调度方式,而进程是任务调度的最小单位,每个进程有各自独立的一块内存,使得各个进程之间内存地址相互隔离.后来,随着计算机的发展,对CPU的要求越来越高,进程之间的切换开销较大,已经无法满足越来越复杂的程序的要求了.于是就发明了线程,线程是程序执行中一个单一的顺序控制流程,是程序执行流的最小单元.这里把线程比喻一个车间

最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知识点,选择性跳到相应地方阅读.    滚动优化的由来 滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件.简单的看看: var i = 0; wind

本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知识点,选择性跳到相应地方阅读.    滚动优化的由来 滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件.简单的看看: 1 2 3 4 var i = 0; window.addEventListener('scroll',function(){   

最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知识点,选择性跳到相应地方阅读. 滚动优化的由来 滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件.简单的看看:     1 2 3 4 var i

转自:http://www.oschina.net/translate/loading-css-without-blocking-render 本文展示了一种技术,它能通过异步下载样式表,以阻止它们的下载阻塞页面的渲染,从而尽可能快的让访问者获取到信息内容. 警告! 我发这篇帖子全是好意,但是它并不负责让读它的人意识到下面将会遇到的问题. 社区很快地给了我许多的反馈 (有些反馈我很感激) ,而越来越明显的是这项技术并不如我所希望的那样稳定. 不像我那样的成功地对它进行了测试和利用,许多开发者在

#我是怎么发现并解决项目页面渲染效率问题的(IE调试工具探查器的使用) ##背景 之前的项目中,有很多的登记页面,一般都有100-200甚至更加多的字段,而且还涉及到字典.日期及其他效果的显示,载入时很慢,而且会有卡死的现象,IE下特别明显 ##IE调试工具探查器的使用 当时找了不少资料,不过最后还是把目光聚焦到IE自带的调试工具了 目前我电脑里面的是IE10,当时分析时用的是IE9,里面有一页**探查器**引起了我的注意,经过一轮的折腾,掌握了其分析方法如下: 1. 打开要分析的页面,F12进

前言 最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作.本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,是我自己学习记录的一个过程,如果上面列出的知识点都了然于胸了,就可以不必往下看了. 滚动优化的由来 滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件.简单的看看

网上找的帖子大多是直接在onload中请求数据.而我想实现的是点击按钮,然后请求服务器,接着返回数据,前端页面渲染.所以搞了挺久的,在此记录一下. 请求是按照微信官方给出的,wx.request 在这里,我的逻辑是:点击按钮--->根据绑定的事情注册函数-->发起微信请求-->判断是否返回数据,成功返回数据则显示请求成功.-->返回数据到前端页面进行渲染 废话不多说,直接上代码: 一.前端页面代码: <view class="container2">

浏览器的内核主要分为渲染引擎和JS引擎.目前市面上常见的浏览器内核可以分为这四种:Trident(IE).Gecko(火狐).Blink(Chrome.Opera).Webkit(Safari).这里面大家最耳熟能详的可能就是 Webkit 内核了,Webkit 内核是当下浏览器世界真正的霸主. 页面加载过程 浏览器根据DNS域名服务器解析域名得到IP地址: 向这个IP地址发起HTTP请求: 服务器收到,处理,返回HTTP请求; 浏览器得到返回的内容. 浏览器渲染过程 主要分为三步: 1. 解析

文档对象模型(Document Object Model,简称DOM) 浏览器渲染引擎 一个渲染引擎 主要模块: HTML 解析器 解释 HTML 文档的解析器,将 HTML 文本 解析成 DOM 树 css 解析器 级联样式的解析器,为 DOM 中的各个元素计算出样式信息,为布局提高基础设施 javascript 引擎 使用 Javascript 代码可以修改网页的内容,也能修改 css 的信息 javascript 引擎能够解释 javascript 代码,并通过 DOM 接口和 CSSOM

1. http协议 超文本传输协议 协议详细规定了 浏览器 和 万维网服务器 之间互相通信的规则 客户端与服务端通信时传输的内容我们称之为报文(请求报文.响应报文) 常见的发送 get 请求方式 在浏览器地址栏输入 url 地址访问 所有的标签默认发送的是 get 请求:如 script link img a... form 表单默认也是 get 请求 常见的发送 post 请求方式 只能通过 form 表单,设置 method="post" 发送 ajax 可以发送任意请求 2. 响

参考文档:http://blog.csdn.net/vector_yi/article/details/24402101 当activity中用到的布局较多较为复杂时,页面渲染就会变得复杂,现汇总以下常用方法,提升页面加载速度. 1.利用<include />标签来避免重复渲染 当页面中出现重复的布局时,如果只是复制粘贴,会显得代码陈余,并且繁琐,使用<include/>标签,直接引用,可避免重复渲染. 第一种方式,在<include />标签内指定width及heig

从url 输入网址到最终页面渲染完成,发生了什么? 1.DNS解析:将域名地址解析为IP地址 先读取: -浏览器DNS缓存 -系统DNS缓存 -路由器DNS缓存 -网络运营商DNS缓存 -递归搜索:blog.baidu.com - .com域名下查找DNS解析 - .baidu域名下查找DNS解析 - blog域名下查找DNS解析 - 页面出错 2.TCP连接:TCP三次握手 -第一次握手,由浏览器发起,告诉服务器我要发送请求了 -第二次握手,由服务器发起,告诉浏览器我准备接受了,你可以发送了

使用 Headless Chrome 进行页面渲染 - 知乎专栏 使用 Headless Chrome 进行页面渲染 - 知乎专栏 这里我们使用 chrome-remote-interface 来远程控制 Chrome ,实际上 chrome-remote-interface 是对于 Chrome DevTools Protocol 的远程封装,我们可以参考协议文档了解详细的功能与参数.使用 npm 安装完毕之后,我们可以用如下代码片进行简单控制:

转载自:http://www.jianshu.com/p/d1d29e97f6b8 (在该文章中看到一段感兴趣的文字,转载过来) 在Web开发中,有两种主流的页面渲染方案: 服务器端渲染,通过页面渲染引擎渲染好HTML页面发送给浏览器 客户端渲染,客户单端通过RESTAPI获取数据在浏览器上动态渲染页面 前者的技术栈包括:Thymeleaf.Apache Velocity .Freemarker 等主流方案,后者有React.AngularJS.vue.js.Backbone.js等前端渲染框架

问题 在用Hexo写文章时,如果文章标题含有双引号",也就是说如果在文件头里的title出现双引号,如下: --- title: Hexo - 文章标题含有双引号"导致页面渲染失败无法打开 --- 由于这里的写法属于yml语法,双引号属于特殊符号,上述的title的写法就会在执行hexo g时报错,当我们在浏览器里打开这篇文章的页面时就会渲染失败无法打开. 解决方法 我们需要对这里的双引号进行转义,对于这些特殊字符,可以用对应的HTML字符实体来替换. 对于双引号,其字符实体是&quo

前言:好久没翻阅我的gmail邮箱了,午休时就打开看了一下,看到InfoQ推荐的一篇名为“Javascript高性能动画与页面渲染”文章,粗略的看了一下,很赞!讲的很详细,对好些细节讲的都很好,很通俗易懂.so……笔记诞生 1.fps -frame per second 帧 页面是每一帧变化都是系统绘制出来的(GPU或者CPU).但这种绘制又和PC游戏的绘制不同,它的最高绘制频率受限于显示器的刷新频率(而非显卡),所以大多数情况下最高的绘制频率只能是每秒60帧(frame per second,

1.vue中数据接收成功,页面渲染失败.代码如下 经过查找资料修改代码为 或是 原因是: 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如: vm.items.length = newLength 但是可以通过set和push,splice操作数组

前言 上篇博文我们依葫芦画瓢已经将hello world 展现在界面上啦,但是是不是感觉新虚虚的,总觉得这么多文件,项目怎么就启动起来了呢?怎么访问到8080 端口就能进入到我们的首页呢.整个的流程是怎么样的呢? 我也是刚刚接触,所以就会有这样的困惑,所以这篇就简单的理解一下项目页面渲染的过程. 渲染过程 我们上篇文章说main.js 是无用的,是废代码,只是起到支撑框架的.但是其实我们应该有感觉,把他删除了整个项目就跑步起来了.其实main.js 算是项目的入口了.我们就从这个文件看起. im

首先说明以下是我参考网上答案和自己的思考,给出自己的想法,如果有问题,欢迎大家吐槽从用户在浏览器中输入一个URL,到整个页面渲染,这个过程中究竟发生了什么呢?今天先简单写下整个过程,后面再一点点完善. 一.获取IP地址 为什么要获取IP地址? IP地址对应一台真实的物理机器,而且IP地址就像人的身份证是唯一的,用户请求服务器,只需要输入为该服务器分配的唯一的IP地址即可.但由于IP地址不便于记忆,因而使用较为语义化的域名来替代IP地址,而且一个域名可能对应了对个IP地址,比如用户输入www.ba