前端工程
文章平均质量分 68
gigi就是我
这个作者很懒,什么都没留下…
展开
-
前端工程指导问卷
针对在实验室做的项目的前端部分,通过以下问题可以进行自查和面试准备: 翻译自https://github.com/bradfrost/frontend-guidelines-questionnaireHTMLHTML原则你的团队在写HTML的时候有什么规范吗? × 例如,语义化? 参考规范HTML工具使用HTML预处理工具了吗?× 例如, HAML, Jade……使用模板引擎了吗?×原创 2016-12-10 19:52:13 · 633 阅读 · 0 评论 -
less-loader、css-loader、style-loader
webpack中与样式相关的几个loader:less-loader:将less编译为csscss-loader:css-loader会遍历 CSS 文件,找到其中的@import与url(),当作css依赖的模块并处理它们。style-loader:将css代码插入到页面的style中原创 2017-08-14 17:05:45 · 1670 阅读 · 0 评论 -
移动端web适配
移动端web适配我了解的总共有4种方法:固定宽度 定死页面宽度,直接写一个div把宽度订到设计稿的宽度或者你需要的宽度,然后让它居中,再在这个div盒子里进行你的页面开发,这种开发的缺点就是当遇到较大的屏幕时,屏幕的两边会流出白边,影响美观,体验不好。宽度百分比使用媒体查询 但媒体查询一般是针对几种主流分辨率进行定制,用户体验也不能说有多好,毕竟在一些分辨率变换的瞬间,布局会突然性地变化。原创 2017-05-01 19:43:22 · 1213 阅读 · 0 评论 -
webpack学习笔记
概述 webpack是一个模块打包工具,支持CommonJs、AMD、ES6等模块化方式,并将各种静态资源都视为模块。webpack会递归地解析所有文件,构建成一个依赖关系图,最终打包成一个文件,由浏览器加载。模块webpack支持以下模块:ES6 import语句CommonJS require语句AMD define、require语句css/sass/less @import语句原创 2017-07-30 14:17:28 · 1270 阅读 · 0 评论 -
服务器渲染与客户端渲染
服务器渲染(后端渲染)浏览器发送请求到服务器端,服务器端处理请求并处理好数据,然后生成html文件,并返回给浏览器。 传统的jsp、php都是属于服务器渲染。后端渲染的优势:首屏性能好,不需要先下载一堆 js 和 css 后才能看到页面有利于SEO后端渲染的劣势:不能实现部分更新。即使只有一部分变动,也需要后端重新渲染整个页面并发回给浏览器。客户端渲染(前端渲染)服务器端处理请求后将数据原创 2017-08-05 22:47:19 · 1097 阅读 · 0 评论 -
模块化之间的比较
CommonJS是nodejs使用的模块化规范,一个单独的文件就是一个模块,加载模块使用require方法同步加载,该方法读取一个文件并执行,最后返回文件内部的exports对象。//example.jsexports.message = "hi";exports.say = function (){ console.log("hello");};var exam原创 2017-08-12 13:24:47 · 488 阅读 · 0 评论 -
前端工程化
前端工程化是根据具体的业务特点,将前端的开发流程、技术、工具、经验等规范化、标准化。 它的目的是最大程度地提高前端工程师的开发效率。模块化js模块化在ES6之前,JavaScript一直没有模块系统,这对开发大型复杂的前端工程造成了巨大的障碍。对此社区制定了一些模块加载方案,如CommonJS、AMD和CMD等。 现在ES6已经在语言层面上规定了模块系统,完全可以取代现有的CommonJS原创 2017-08-11 17:38:21 · 1162 阅读 · 0 评论 -
一个全面详细的gulp工作流
开发dev gulp-load-plugins 使用gulp-load-plugins模块,可以加载package.json文件中所有的gulp模块,而不用一个一个地去加载。 var gulp = require('gulp'), gulpLoadPlugins = require('gulp-load-plugins'), $= gulpLoadPlugi原创 2017-07-26 18:49:17 · 3867 阅读 · 0 评论 -
ie兼容问题
hack技巧html条件注释法<!--[if !IE]> 除ie之外的 <![endif]--><!--[if IE]> 针对ie <![endif]--><!--[if IE 6]> 仅IE6可识别 <![endif]--><!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]--><!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endi原创 2017-08-02 15:33:10 · 298 阅读 · 0 评论 -
gulp、requirejs、webpack之间是什么关系
gulp、requirejs、webpack之间是什么关系AMD与CMD分别为模块化规范requirejs和seaJs分别为实现规范的一种方案。在线编译模块方案:在工程中引入了requirejs,就相当于加载了一个AMD解释器,是的能够使用 define、exports、module 这些方法,实现模块化browserify / webpack预编译模块方案。gulp:一种原创 2017-08-02 14:41:36 · 3602 阅读 · 0 评论 -
REST&&RESTful
RESTful可以通过一套统一的接口为不同终端提供服务,如Web、IOS、Android等。REST描述的是在网络中client和server的一种交互形式。服务器提供的RESTful API,每个网址代表一种资源。URL中使用名词来指定资源,如 http://api/v1/belongs/使用HTTP中的动词来实现对资源的增删改查GET(SELECT):从服务器取出资源(一项或多项)。PO原创 2017-05-02 20:52:02 · 327 阅读 · 0 评论 -
vue学习总结:响应式系统&vue实例
响应式系统vue是一个帮助用户构建界面的前端框架,它的核心是一个响应式的数据绑定系统,通过数据来驱动页面显示的更新,而不是像jquery那样通过操作DOM来改变页面的显示。vue通过ViewModal来实现数据和DOM的双向数据绑定。这是如何实现的呢? 当我们把一个普通的js对象传给Vue实例的data选项后,Vue将遍历这个对象所有的属性,并使用Object.defineProperty 把这些原创 2017-03-14 20:13:45 · 5338 阅读 · 0 评论 -
前端js性能优化(三)
UI界面浏览器让一个单线程共用于执行js和更新UI界面,因此这两种操作无法同时进行。浏览器UI线程用于执行js和更新UI的进程通常被成为浏览器UI线程。 UI线程的工作基于一个简单的队列系统,任务会被保存到队列中直到进程空闲。一旦空闲,队列中的下一个任务就会被重新提取出来并运行。这些任务要么是js代码,要么是执行UI更新(包括重绘和重排)。这两种任务是相互阻塞的。浏览器限制原创 2017-03-21 10:56:11 · 1868 阅读 · 0 评论 -
前端js性能优化(二):DOM
DOM编程 DOM是一个独立于语言的,用于操作XML和HTML文档的接口。在浏览器中的DOM接口是用js实现的。 浏览器中通常会把DOM和js独立实现。两个相互独立的功能只要通过接口彼此连接就会产生消耗。因此每次js通过接口访问DOM时都会产生一些消耗,操作的次数越多,消耗越大。DOM访问与修改根据上面所说的,访问DOM是有代价的。最坏的情况就是在循环中访问或修改元素,原创 2017-03-20 22:42:09 · 642 阅读 · 0 评论 -
前端js性能优化(一)
加载和执行多数浏览器使用单一进程来处理UI刷新和js脚本执行,因此同一时刻只能做一件事。 因此,当页面遇到script标签后都会阻止页面渲染过程并等待脚本的解析和执行,无论脚本是内嵌的还是外链的。脚本位置HTML4规范指出script脚本可以放在HTML的head或body中。 如果把script标签放在head中,由于脚本会阻塞页面渲染,因此直到他们全部下载并执行完成后,页面的渲染才会继续。原创 2017-03-20 17:57:19 · 557 阅读 · 0 评论 -
浏览器渲染机制
几个概念1、DOM:Document Object Model,浏览器将HTML解析成树形的数据结构,简称DOM。 2、CSSOM:CSS Object Model,浏览器将CSS代码解析成树形的数据结构。 3、Render Tree:DOM 和 CSSOM 合并后生成 Render Tree,如下图:Render Tree 和DOM一样,以多叉树的形式保存了每个节点的css属性、节点本身属性、原创 2017-01-24 17:24:49 · 382 阅读 · 0 评论 -
前端性能优化最佳实践
合并处理脚本和样式表大多数人已经知道通常要把 JavaScript 放在文档底部,把 CSS 放在文档顶部。为什么呢?因为 JavaScript 会阻塞页面的解析,而外部样式表会阻塞页面的呈现和 JavaScript 的执行。CSS阻塞渲染 通常情况下 CSS 被认为是阻塞渲染的资源,在CSSOM 构建完成之前,页面不会被渲染,放在顶部让样式表能够尽早开始加载。 但如果把引入样式表的 link转载 2017-02-14 22:12:54 · 484 阅读 · 0 评论 -
前端性能优化大总结
减少HTTP请求合并脚本与样式文件使用雪碧图图像使用data url图片被转换成base64编码的字符串形式,内嵌于CSS或HTML中,而不必单独请求。<img src="data:image/gif;base64,R0lGODlhMwAxAIAAAAAAAP///yH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGXElcraA9jI原创 2017-08-08 16:11:50 · 465 阅读 · 0 评论