加载html中的静态资源 其中,加载静态资源的过程,一般为浏览器根据DNS服务器得到域名的IP地址,然后向这个IP的机器发送http请求,服务器收到.处理并返回http请求,浏览器得到返回http请求. 浏览器渲染页面的过程 根据HTML 结构生成DOM Tree 根据CSS 生成 CSSOM 将DOM和CSSOM结合生成RenderTree 浏览器根据RenderTree开始渲染和展示 遇到<script> 时,会执行并阻塞渲染 window.onload // 页面的全部资源全部渲染完 d…

前端性能优化--为什么DOM操作慢?   作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩(css.js.图片皆可压缩) 样式表放头部,脚本放底部 使用CDN(这部分,不少前端都不用考虑,负责发布的兄弟可能会负责搞好) 缓存…… 等等…… 有兴趣的同学,可以自行搜索雅虎关于前端优化的十四条规则.但这些规则当中,有多少是需要前端工程师付诸实践的?就我来说,CDN.缓存的设置,就是不需要我去关…

[原创]浅谈H5页面性能优化方法 前阶段公司H5页面性能测试,其中测试时也发现了一些性能瓶颈问题,接下来我们在来谈谈H5页面性能优化,仅仅是一些常用H5页面性能优化措施,其实和Web页面性能优化思路大体相同,仅仅是平台稍有差异或是不同. 我觉得H5平台与Web平台最大的区别是载体的访问渠道不同,移动与PC端不同就造就了针对各平台优化,下面看看我们主要针对H5页面性能优化入手从哪些方面开展: 1.图片资源压缩 1.1 压缩Png网站   工具推荐:http://tinypng.org/ 2 减少H…

[原创]浅谈H5页面性能测试 H5页面我想各位都不陌生,随着移动互联网兴起,不管是App,还是H5都火起来了,最突出的2个表现是ios/android/前端等工程师薪水大涨,尤其是资深前端工程师40W以上竟然很难招到合适的,又扯远了,今天我们来谈谈H5页面性能测试及优化的事. 首先先来谈下H5页面性能测试关注的指标有哪些?无规矩不成方圆,每家公司对自己的产品都有一个衡量好不不好的标准,我是这样定义H5页面性能测试标准的,具体如下: 1.H5页面操作时,服务器系统资源类占用情况(略),具体数值不公…

前端的性能优化是一个很宽泛的概念,最终目的都是为了提升用户体验,改善页面性能.面试的时候经常会遇到问谈谈性能优化的手段,这个我分几大部分来概述,具体细节需要自己再针对性的去搜索,只是提供一个索引(太多了写不过来+主要是懒得写).这里PC端和移动端分开说了,业务场景不同,需要考虑各自的优化手段 目前来看,前端优化的策略有很多,主要包括网络加载,页面渲染,CSS优化,JS执行优化,缓存,图片,协议几大类.这一篇先讲PC端的优化策略 网络加载 1. 减少HTTP请求次数 建议尽可能的根据需要去合并静态…

[原创]浅谈H5页面测试介绍 目前移动互联网非常火热,除了各种App,H5也是非常热,由于H5跨平台,且版本更新容易,做为引流或获客是非常好的一种简单低成本平台:今天来谈谈H5页面测试都要测试什么? 闲话少说,H5页面测试看到这个大家就会联系到Web页面测试,其中二者有相同之处,也有不同之处,但是总体测试策略是大体相同,且听我一一道来,先说说我现在公司对H5测试我们重点测试什么,主要有以下几类: 1.功能测试:主要是各系统功能点实现,与之交互的逻辑处理是否合理,如:登录就需要考虑H5与App之间…

http://www.tamabc.com/article/85038.html 从MySQL Bug#67718浅谈B+树索引的分裂优化   原文链接:http://hedengcheng.com/?p=525 问题背景 今天,看到Twitter的DBA团队发布了其最新的MySQL分支:Changes in Twitter MySQL 5.5.28.t9,此分支最重要的一个改进,就是修复了MySQL 的Bug #67718:InnoDB drastically under-fills page…

浅谈Spark应用程序的性能调优 :http://geek.csdn.net/news/detail/51819 下面列出的这些API会导致Shuffle操作,是数据倾斜可能发生的关键点所在 1. groupByKey 2. reduceByKey 3. aggregateByKey 4. sortByKey 5. join 6. cogroup 7. cartesian 8. coalesce 9. repartition 10. repartitionAndSortWithinPartiti…

http://www.taidous.com/article-667-1.html 前言 首先,这个系列文章做个大致的介绍,题目"浅谈Unity",因为公司和国内大部分3D手游开发还是以Unity3d为主,而Unity不开源的问题,也注定大部分用户是无法在架构和API的层面对它做改造和优化的,所以本文也不会涉太多底层的优化方法,为了争取能让更多制作相关的人员看懂,而是针对Unity的设计,把如何在设计和使用上来规避和利用的"浅显"方法用易懂的方式来描述."…

JavaScript之浅谈dom操作 1.理解dom: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两个角度理解: 对于JavaScript,为了能够使JavaScript操作Html,JavaScript就有了一套自己的dom编程接口. 对于Html,dom使得html形成一棵dom树,类似于一颗家族树一样,一层接一层,子子孙孙. 所以说,有了DOM,在我看来就是相当于JavaScript拿到了钥…

SSR: 服务端渲染(Server Side Render),即:网页是通过服务端渲染生成后输出给客户端. 一.那为什么要使用SSR呢? 我用一句话理解的就是降低SPA(Single Page Application)首屏渲染的时间,解决SPA不利于SEO(Search Engine Optimization)的优化. 那Nuxt是什么呢?跟SSR有什么关系呢? Nuxt.js 是一个基于 Vue.js 的通用应用框架. 通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的…

浅谈类和对象的概念 一.什么是类?什么是对象? 学习一门面向对象编程语言,我们必须得知道什么是类?什么是对象? 类(Class)实际上是对某种类型的对象定义变量和方法的原型.它表示对现实生活中一类具有共同特征的事物的抽象,是面向对象编程的基础. 简单地说,类是一种抽象的数据类型,是对一类对象的统一描述.在生活中,我们常常会把一组具有相同特性的事物归为一类,当然根据分类的标准不同,划分的类也是不相同的.汽车和人都是独立的类,它们都有各自的特点.汽车这个大类还可以分为卡车,公共汽车,和小轿车等各种小…

1.前端性能优化的一点: 对js.css.图片等进行压缩,尽可能减小文件的大小,减少文件下载的时间,从而减少网页响应的时间. 2.前端性能优化的另一点: 对HTTP传输进行压缩,即在js,css.图片等资源已经压缩的基础上(其实,文件的压缩与否均可,文件的压缩跟HTTP传输过程的压缩没关系),在HTTP传输过程中的再次压缩. 3.HTTP1.1的Accept-Encoding和content-Encoding: 从HTTP1.1开始,客户端可以通过Accept-Encoding头来声明浏览器支持…

国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私募机构九鼎控股打造,九鼎投资是在全国股份转让系统挂牌的公众公司,股票代码为430719,为“中国PE第一股”,市值超1000亿元.  -----------------------------------------------------------------------------------…

记得面试现在这份工作的时候,一位领导语重心长地谈道——当今的世界是互联网的世界,IT企业之间的竞争是很激烈的,如果一个网页的加载和显示速度,相比别人的站点页面有那么0.1秒的提升,那也是很大的一个成就. 然后我不知道怎么写下去了,就在群里问了那群狗头军师,结果是这样的... 好的,是时候“语锋一转”切回主题了 —— 如何提升我们站点页面的访问速度.减少等待时间,从而最大化地提升用户访问体验呢? 针对这个问题,我们今天会从前端的角度来提出系列解决方案,它们都能有效地提升你页面的访问速度. 一. 减…

Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vue1.0悄悄 的问世了,它的优雅,轻便也吸引了一部分用户,开始收到关注,16年中旬,VUE2.0问世,这个时候vue不管从性能上,还是从成本上都隐隐超过了react,火的一塌糊涂,这个时候,angular 开发团队也开发了angular2.0版本,并且更名为angular,吸收了react.vue的…

function时代 前端这几年发展太快了,我学习的速度都跟不上演变的速度了(门派太多了,后台都是大牛公司支撑类似于facebook的react.google的angular,angular的1.0还没怎么用过项目,网上查阅2.0的正式版就要出来,书写方法大改,思维架构都有很大的改变,真是难为了现在的前端).2010年第一次接触前端js,还是从asp.net拖控件中接触,再接着就是我大学那个时代最出名的传智播客视频教学,那个时候课余时间全去看这个视频了,对着教学一个一个的敲,依稀的记得好定义了好…

转载地址: https://blog.csdn.net/lzm18064126848/article/details/53385274?tdsourcetag=s_pctim_aiomsg SEO(Search Engine Optimization),就是传说中的搜索引擎优化,是指为了增加网页在搜索引擎自然搜索结果中的收录数量以及提升排序位置而做的优化行为.我认为这是一门说来简单,但操作起来复杂的技术,只可意会,不可言传.作为一名前端工程师,不需要精通SEO,但必须要了解它.SEO有一条不变的…

前端常用脚手架工具 前端有很多特定的脚手架工具大多都是为了特定的项目类型服务的,比如react项目中的reate-react-app,vue项目中的vue-cli,angular 项目中的angular-cli根据一些信息创建对应的项目基础结构,只适用于对应的项目,还有一些对应的项目脚手架工具比如Yeoman. 根据模板生成对应的结构,比较灵活,容易拓展,还有一种脚手架工具plop,例如创建一个组建/模块所需要的文件. 一.Yeoman简介 Yeoman是一款最老牌最通用的脚手架工具,基于nod…

用了vue这么久,却没有认真的关注mvvm与mvc,着实汗颜.趁着周末刚好看了一下网上的文章还有书籍,简单的谈一下我的理解. -以下图片均摘自网络. 一.MVC 特点:单项通讯 视图(View):用户界面.View 传送指令到 Controller 控制器(Controller):业务逻辑.Controller 完成业务逻辑后,要求 Model 改变状态 模型(Model):数据保存.Model将新的数据发送到 View,用户得到反馈 二.互动模式 接受用户指令时,MVC 可以分成两种方式.一种…

0X1:在学习xss之前,先快速学习相关的HTML代码 1.  <input>标签 文本域用法: <input  type="text" /> Type的作用:type 属性值规定其<input>的作用,输入字段拥有很多种形式,输入的字段可以是文本字段.复选框.掩码后的文本控件.单选按钮.按钮等. 运行结果: 文本域可以输入各种文本,input常用于表单,至于表单如何使用,这里先不提. 0X2:认识XSS漏洞,并自己构造一个基础的XSS XSS的实质…

关于MVC页面之间的传值,有多种方式,下面,我们就Html.RenderAction 方式 和 Html.RenderPartial 方式 来给大家分享一下有什么不同. 一.Html.RenderAction 方式页面之间传递参数的方式: Html.RenderAction 方式 是访问的另一页面的Controller,并将参数传入另一页面的Controller中相应的Action中的参数中. 例如:我有这么一个Controller和Action(是一个部分视图的) public class T…

背景: 在开发ASP.NETMVC4 项目中,虽然web.config配置满足了大部分需求,不过对于某些特定业务,我们有时候需要添加新的配置文件来记录配置信息,那么XML文件配置无疑是我们选择的一个方案之一.下面简单谈谈XML的读取.  一. xml.linq读取xml 1.新建一个data.XML文件 <Customers> <Customer> <Name>Frank</Name> <City>成都</City> <Cont…

之前在学习原型(prototype)的时候,一直对原型的理解不是很清晰,只是知道每个对象都有一个原型,然后在js中万物又皆对象.在这里谈一下自己对于js原型的简单理解吧. 原型可以实现属性和方法的共享. 原型链理解: 假设有一个对象o,其有自己的属性a和b: {a:1,b:2}; 然后o的原型o.[[prototype]]又有自己的属性b和c: {b:3,c:4}; 最后,o.[[prototype]].[[prototype]]为null.这就是原型链的末尾,即null,根据定义,null没有…

Web页面常常比显示该页面的浏览器窗口还要大,因为Web文档具有很多内容,往往会导致页面比浏览器还要高,有时候甚至还要宽,这迫使访问者通过滚动来查看整个页面(如图10-8所示).当访问者滚动页面的时候,一部分文档会从视线中消失.例如,Web页面不能完全放入浏览器窗口中,文档会向左或向上滚动,因此,页面的顶部和左边都会消失在视野之内.这意味着浏览器窗口的左上角和文档的左上角并不相同.如果试图放置一个新元素,例如,屏幕顶部的一个动态Banner:而如果只是试图将元素的left和top位置设置为0,将…

来源:http://yanping.me/cn/blog/2011/12/04/github-pages-domain/ 前段时间看到COS上的各位都有博客,也想开个博,给COS的各位管理员发邮件,向他们请教如何开个像怡轩和太云那样的博客,思喆兄说要向益辉申请空间和cos的二级域名.无奈老大太忙,迟迟没有给我分配空间和域名,只是某次提到有个叫github的东西,可以在上面建网页,还可以写博客,写博客还可以不用网络哦亲,只要在本地写好,哪天有网络了就一个push过去哦亲,so fashion!1于…

一.前言 1.元素和节点的区别 2.总结获取元素的方式 3.总结获取节点的方式 二.主要内容 1.结点和元素的区别 (1)一些常见基本概念: 文档:document 元素:页面中所有的标签 结点:页面中所有的内容包括(标签,属性,文本(文字,空格,换行,回车)) 根元素:html标签 (2)节点属性 nodeType:表示节的类型:  1-------表示是标签, 2-------属性, 3-------文本 nodeName:节点的名字: 标签------大写的标签名字, 属性-----小写的…

前言 多家公司和组织已经公开了它们的风格规范,详细可參阅jscs.info,以下的内容主要參考了Airbnb的JavaScript风格规范.当然还有google的编程建议等编程风格 本章探讨怎样使用ES6的新语法.与传统的JavaScript语法结合在一起.写出合理的.易于阅读和维护的代码. 编程风格 块级作用域 (1)let 代替 var ES6提出了两个新的声明变量的命令:let和const. 当中,let全然能够代替var.由于两者语义同样,并且let没有副作用. 'use strict'…

js变量是除了this以外最让人恶心的东西了,还因为烂语法造成各种各样奇奇怪怪的事情发生,下面让我们来谈谈都有什么奇怪的事: 1.用var与不用var function test(){ a = 123; var b =456; } test(); console.log(a); console.log(b); //报错 容易看出,在函数内部,没有用var定义的变量变成了全局的了,究竟发生了什么事呢?那就是万恶的作用域链在作怪了~~ 首先,变量 = ...这种赋值写法会先寻找当前作用域有没有这个这…

每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式. 一.Angular,它两个版本都是强主张的,如果你用它,必须接受以下东西: - 必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件(这一点每个视图框架都有,难以避免) 所以Angular是带有比较强的排它性的,如果你的应用不是从头开始,而是要不断考虑是否跟其他东西集成,这些主张会带来一些困扰. 二.React,它也有一定程度的主张…